document.execCommand
そのため、WYSIWYG エディターに近いものを提供するために、コンテンツの編集可能な div を使用しようとしています。Chromeでうまく機能します。ただし、IE では、insertUnorderedList
およびinsertOrderedList
コマンドの動作が適切ではありません。具体的には、空白行にある場合は、Chrome のように箇条書き (または番号付き) のリストを挿入するのではなく、フォーカスを外すだけです。セクションが強調表示されている場合は、すべてを選択してから、リスト内の選択を設定するだけでなく、箇条書き (または番号付き) のリストを設定します。
HTML:
<div id="editable" contenteditable="true">Test<br/>Test</div>
<div class="buttons">
<button onclick="insertUnordered();">Unordered List</button>
<button onclick="insertOrdered();">Ordered List</button>
</div>
コード:
function insertUnordered() {
document.execCommand("insertUnorderedList");
}
function insertOrdered() {
document.execCommand("insertOrderedList");
}
また、この jsfiddle をセットアップしました: http://jsfiddle.net/sbazp/1/ IE と Chrome を比較すると、私が話していることがわかります。(ボタンが何かを行う前に、まず編集可能領域をクリックする必要があります)。
これを回避する簡単な方法はありますか、それとも WYSIWYG プラグインを使用する必要がありますか?