javascript - 範囲内のフォーマットをクリア

Question

contenteditable divで選択したテキストのフォーマットをどのように明確にしますか?

range byrange = window.getSelection().getRangeAt(0);があるので、そのすべての子で format をクリアするにはどうすればよいですか?

どうも

Answer 1

以下では、範囲の内容をプレーンテキストに置き換えますが、範囲全体が単一の書式設定要素に含まれている場合、このアプローチは機能せず、問題ははるかに困難になります。範囲の境界でノードの分割と複製を行う必要があります。<br>また、ブロック要素に由来するテキストの改行は失われます。したがって、以下は以下に対して機能します（パイプ文字で示される範囲境界）：

<p>One |two <b>three</b> four| five</p>

... だがしかし

<p>One <b>two |three| four</b> five</p>

コード：

function flattenRangeText(range) {
    var textNode = document.createTextNode( range.toString() );
    range.deleteContents();
    range.insertNode(textNode);
    range.selectNodeContents(textNode);
}

Answer 2

最新のブラウザでは Document.execCommand('removeFormat') を試すことができます。

参照: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

removeFormat

現在の選択範囲からすべての書式を削除します。