1

私はマイクロ wysiwyg エディターに取り組んでいます。次のことができる必要があります。

エディター内のコンテンツが次のようになっているとします。

<p>This is 
    <strong>some content 
        <span>and more</span>
    </strong>
</p>

カーソルをスペースに置いてand moreボタンをクリックすると、HTML が次のように分割されます。

<p>This is 
    <strong>some content 
        <span>and</span>
    </strong>
</p> 

** CURSOR IS HERE NOW **

<p>
    <strong>
        <span> more</span>
    </strong>
</p>

どうすればこれを行うことができますか？クリックした要素のアンカー ノードを既に取得でき、ルートの親を取得する方法がありますが、上記のように要素を分割する方法がわかりません。

4

1 に答える 1

0

カーソル位置に要素を追加するだけpで、すぐに削除できます。編集可能なコンテンツの自動化は、可能な分割された書式設定タグ (またはそれまで) を処理し、生成された HTML は有効になります。そのようです：

    var but = document.getElementById('splitBut');
    but.addEventListener('click', function () {
    	var temp;
    	document.execCommand('insertHTML', false, '<p id="temp"></p>');
        temp = document.getElementById('temp');
        temp.parentElement.removeChild(temp);
   });
<button id="splitBut">Split</button>
<div id="pad" contenteditable>
    <p>This is
        <strong>some content 
        <span>and more</span>
    </strong>
    </p>
</div>

jsFiddle でのライブ デモ。

このコードは Internet Explorer のどのバージョンでも機能しないことに注意してください (ただし、Edge では機能します)。また、生成される HTML は、使用するブラウザによって異なる場合があります。

編集

Chrome では HTML の挿入に問題があるようです。挿入される要素は空でなければなりません。要素を削除した後、Chrome は要素を追加し、contenteditable を正しくレンダリングしません (? の不整合リストにbr追加する候補)。残念ながら、これを修正できませんでした。答えは、FireFox または Edge で実行する場合にのみ役立ちます。document.execCommand

于 2016-09-16T18:51:09.450 に答える