単純なjavascript（おそらくjQueryを使用）text/htmlエディターが必要です。私はたくさんの検索を行い、たくさんのプラグインを見つけましたが、それらのほとんどは私が探しているものにはあまりにも「完全」です。
実際、私が欲しいのは一連の関数であり、複雑なUIや派手なツールバーではありません。それらの機能は基本的に、
あなたは何をお勧めしますか？独自のプラグインを作成する必要がありますか？
前もって感謝します
すべてのWebエディターは非常にシンプルに動作し、ブラウザー機能を中継します。
要素に属性を設定し 、ページの読み込み後にcontenteditable="true" ：を呼び出すことで、HTMLページの任意のフィールドを編集可能にすることができます。$('#edit').designMode = "on";
選択したフォントは次のように変更できます
document.execCommand("fontname", false, "Courier New");
とのサイズ
document.execCommand("fontsize", false, "20");
との色
document.execCommand("ForeColor", false, "green");
太字、斜体：
document.execCommand("bold", false);
document.execCommand("italic", false);
これが私が作成したサンプルテストページです（他のブラウザではボタンをクリックするとテキストの選択が失われるため、残念ながらFFでのみ機能します）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>HTML5 Demo: ContentEditable</title>
<script src="jquery.js"></script>
</head>
<body onLoad="onload()">
<h2>Go ahead, edit away!</h2>
<div id="editarea"></div>
<!-- 'contenteditable="true"' need so the user can select the element and edit it's text-->
<section contenteditable="true">
<p>
Here's a typical paragraph element
</p>
<div contenteditable="true">
<p>
hallo welt
</p>
</div>
<ol>
<li>
and now a list
</li>
</ol>
</section>
</body>
<script>
function onload() {
// needed for the resize boxes in IE
document.designMode = "on"
$('#editarea').append($('<button>').html("fontname").click(function() {
document.execCommand("fontname", false, "Courier New");
}));
$('#editarea').append($('<button>').html("fontsize").click(function() {
document.execCommand("fontsize", false, "20");
}));
$('#editarea').append($('<button>').html("changeSize").click(function() {
document.execCommand("ForeColor", false, "green");
}));
$('#editarea').append($('<button>').html("bold").click(function() {
document.execCommand("bold", false);
}));
$('#editarea').append($('<button>').html("italic").click(function() {
document.execCommand("italic", false);
}));
}
</script>
</html>
PSさらに必要な場合は、Alohaエディターを参照してください。
extjsはかつては本当に素晴らしいものでしたが、フレームワークはかなり肥大化しています。
それ以外の場合は、jqueryプラグインを確認してください。ヒープがあると確信しています。extjsのものはまだ私のお気に入りです。
独自に作成することも、プラグインを使用することもできます。これが私からの基本的な考え方です。
HTML：
<div id="editor" contenteditable="true">Lorem Ipsum is simply dummy text</div>
<button id="make-bold">Make bold</button>
JS：
document.getElementById('make-bold').addEventListener('click', function(event){
event.preventDefault();
var selection = window.getSelection();
var range = selection.getRangeAt(0).cloneRange();
var tag = document.createElement('strong');
range.surroundContents(tag);
selection.addRange(range);
});
ライブデモ-https://jsfiddle.net/im4aLL/Lyusxq3p/
これで基本的な発想を引き出し、やっと将来のプロジェクトで使うものを作りました。
上記のコンセプトからEasyEditor- https://github.com/im4aLL/easyeditorを作成しました。やるべきことはもっとたくさんあります。ノードをラップするときのように、選択がすでに他のノードまたは同じノードでラップされているかどうかを確認する必要があります。また、克服する必要のある機能がたくさんあります。
または、別のアプリケーションと統合するために完全に柔軟なソリューションを必要とするあなたのような人のために私が作った私の軽量プラグインを試してみてください。