1

contentEditable divを使用してwysiwygエディターを作成しようとしていますが、Firefoxで太字（および斜体）を処理するときに問題が発生します。

div内のすべてのテキストが選択されている場合、execCommand（'bold'）はdiv内で機能しますが、そのコンテンツのHTMLを取得しようとすると、HTMLはフォーマットを表示しません。

私が何を意味するかを理解するには、Firefox5で次のHTMLコードを実行してみてください。 

<script type="text/javascript">
window.onload = function () {

    var output = document.getElementById('output');
    var input = document.getElementById('input');

}
</script>
<body>
<button onClick="execCommand('bold', false, null);output.value=input.innerHTML;">Bold</button>
<div style="width: 300px; border: 1px solid #000000;">
<div id="input" contenteditable="true">Some editable text</div>
</div>
<textarea id="output"></textarea>
</body>
</html>

次のことを試してください。

  • 「一部」という単語のみを選択してください。太字ボタンをクリックします。これにより、予想どおり、テキストが太字になります。HTML出力は<span style="font-weight:bold;">単語を太字にするために使用します。これはやや不幸です（<b>Safari、Chromeにあります）が、それでも機能します。
  • 「編集可能なテキスト」というフレーズ全体を選択します（手動またはCTRL-Aを使用）。太字ボタンをクリックします。contentEditableテキストは太字ですが、予想どおり、HTML出力には太字の書式が適用されていません。

これらの問題を引き起こしている可能性のあるものとそれらを回避する方法についてのアイデアは大歓迎です！

4

2 に答える 2

5

元のコードのjsFiddleは次のとおりです：http：//jsfiddle.net/Bv2Ek/

問題は、Firefoxが編集可能な要素の属性を追加font-weight: boldしてすべてを太字にすることです。これは非常に合理的なことです。太字を適用するために要素を使用したい場合は、最初にコマンドを使用できます。スクリプトに以下を追加します。style<div><b><strong>StyleWithCSS

function bold() {
    document.execCommand('StyleWithCSS', false, false);
    document.execCommand('bold', false, null);
}

そしてあなたのボタンは次のようになります：

<button onClick="bold(); output.value=input.innerHTML;">Bold</button>

コードが修正されたjsFiddleの例：http：//jsfiddle.net/Bv2Ek/1/

于 2011-08-07T11:40:31.753 に答える
0

もし...それはjQueryを使っているIFです。

execコマンドの後：

$('b').contents().unwrap().wrap('<strong/>');
于 2014-06-10T19:49:22.997 に答える