11

ページ内にコンテンツ編集可能なセクションがある場合、Chromeは奇妙な/興味深い/紛らわしいことをしているように見えます。<span>テキストに追加のスタイル（フォントファミリ、色など）を適用するクラスが適用されている（おそらく他のタグ、私にはわかりません）でラップされたテキストのセクションがある場合は、編集可能なセクション。もう一度入力を開始すると、テキストはテキストの削除を開始したときと同じように見えますが、適切なクラスのスパンではなく、生の計算されたCSSでスタイル設定されているように見えます。

http://jsfiddle.net/tomprogramming/wS4Gp/

なぜこれが起こるのか、または私がそれをオフにすることができるかどうかについて何か考えはありますか？FirefoxとIEはどちらも、クラスを含むスパンを維持しているようです。

これは私が始めたものです

<span class="level1" style="font-weight:bold;">This is level'd text</span>

そしてこれが私が最終的に得たものです

<span style="color: rgb(255, 255, 255); font-family: helvetica, arial, sans-serif; font-size: 48.18181610107422px; font-weight: bold;">This is level'd text</span>

そして関連するCSS

.editable .level1 {
    color: #fff;
    font-size:3em;
    font-family:helvetica, arial, sans-serif;
}

私は何が起こっているのか理解しています、それはあなたのスタイリングを保持するWordや他のプロセッサのように振る舞おうとしています。ただし、これらのレベルはエディターで重要であり、保持する必要があります。できない場合は、この「機能」をオフにします。

4

1 に答える 1

3

Chrome が計算されたキャレット位置の古いスタイルを保持しないようにする 1 つの方法は、ブラウザーの選択をクリアしてから復元することです (選択を保持するため)。これは、スタイル付き要素の削除後、新しいコンテンツが挿入される前に行う必要があります。次の行で何かをする：

let selection = window.getSelection();
if (selection && selection.rangeCount > 0 && selection.isCollapsed) {
  let range = selection.getRangeAt(0);
  selection.removeAllRanges();
  selection.addRange(range);
}
于 2019-02-26T13:37:20.603 に答える