2

私は Firefox で Javascript WYSIWYG エディターに取り組んでいます。これを実現するために、contenteditable 属性を true に設定した div を使用しています (この特定のプロジェクトでは contenteditable iframe を使用できません)。この contenteditable div は、contenteditable ではない別の div にネストされています。execCommand を使用してフォント スタイルとサイズ、太字、斜体、下線などの書式を適用すると、次の 2 つの問題が発生します。

  • div 内のすべてのテキストが選択されている場合、execCommand は機能しません。execCommand は、テキストの一部のみが選択されている場合は正常に機能しますが、すべてのテキストが選択されている場合は何もしません。
  • テキストを選択せず​​に書式を適用すると、予期しない結果が生じます。たとえば、テキストを選択せず​​に execCommand('bold') を呼び出してから入力すると、スペースバーが挿入されるまで太字のテキストが入力され、その時点で太字の書式設定は失われます (興味深いことに、別のスペースが挿入されるまで; その後、テキストは再び太字になります）。

言いたいことを理解するには、Firefox 3 で次の HTML コードを実行してみてください。

<html>
<head><title></title></head>
<body>
<button onClick="execCommand('bold', false, null);">Bold</button>
<div style="width: 300px; border: 1px solid #000000;">
<div contenteditable="true">Some editable text</div>
</div>
</body>
</html>

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

  • 「いくつか」という単語のみを選択します。太字ボタンをクリックします。これにより、予想どおり、テキストが太字になります。
  • 「Some editable text」という語句全体を (手動または CTRL-A を使用して) 選択します。太字ボタンをクリックします。何も起こりません。これは、上記の最初のバグを示しています。
  • バックスペース キーを押して、div をクリアします。太字ボタンをクリックして、入力を開始します。スペースを入れていくつかの単語を入力します。これにより、2 番目のバグが示されます。

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

4

1 に答える 1

2

面白い。Firefox 3.6.3 では、最初の問題を再現できません。編集可能なテキストをすべて選択してボタンを押すと、予想どおり太字に切り替わります。しかし、私が見る他の2つの問題。それらは、Mozilla の実装のバグになりますcontenteditable。

designMode興味深いことに、.ではなく.を使用すると、代替単語太字の問題は発生しませんcontenteditable。他の問題も解決すると思います。これには、ドキュメント内の要素だけでなく、ドキュメント全体を編集可能にすることが含まれます。

window.onload = function() {
    document.designMode = "on";
};

これがオプションではなく、contenteditable提供される細かい制御が必要な場合は、DOM 操作と範囲を使用して独自のバージョンの太字コマンドを実装する必要があります。これは、IE および非 IE ブラウザーで作業するためにかなり複雑になります。

于 2010-06-01T23:55:19.917 に答える