2

contenteditable 要素で、コマンド insertHTML を使用して execCommand が呼び出されると、選択がノード コマンド内にある場合、挿入された html セグメントの周囲の div タグがアンラップされます。

サンプルの HTML コード ブロックは次のとおりです。

<div id="editable" contenteditable="true">
    <div>Some text</div>
    <div>Yet another</div>
    <div>and other</div>
</div>
<input id="insert" type="button" value="Insert Segment">

そして、javascript処理の挿入を次のようにします

$('#insert').on('mousedown', function (e) { //that is to save selection on blur
    e.preventDefault(); 
}).on('click', function () { // this inserts the sample html segment
    document.execCommand('insertHTML', false, 
    '<div class="new-segment">Text inside Segment</div>');
});

http://jsfiddle.net/TE4Y6/の実際の例:

  • すべてのコンテンツの最後にキャレットを置き、Enter キーを押して新しい行を作成し、[セグメントの挿入] を押します

結果: 灰色の背景を持つ新しい div には、挿入された "Text Inside Segment" が含まれています

  • 最初の 3 行のいずれかの内側にキャレットを置き、[セグメントの挿入] を押します。

結果: div を囲んでいないセグメントのコンテンツのみを挿入します

予想: 灰色の背景を持つ新しい div には、挿入された "Text Inside Segment" が含まれています

  • 最初の 3 行のいずれかの最後にキャレットを置き、[セグメントの挿入] を押します。

結果: div を囲んでいないセグメントのコンテンツのみを挿入します

予想: 灰色の背景を持つ新しい div には、挿入された "Text Inside Segment" が含まれています

  • 最初の 3 行のいずれかの終わりにキャレットを置き、Enter キーを押して新しい行を作成し、[セグメントの挿入] を押します。

結果: 灰色の背景を持つ新しい div には、挿入された "Text Inside Segment" が含まれています

セグメントを挿入する前に自動的に挿入しようとしました<br>。冗長なスペースを挿入しますが、3 番目のステップを修正します。

何か提案はありますか？

4

2 に答える 2

1

Chromium の問題のようです。https://code.google.com/p/chromium/issues/detail?id=122062で問題を追跡できます。

于 2013-07-09T15:44:29.417 に答える