4

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 プラグインを使用する必要がありますか?

4

1 に答える 1