javascript - css contenteditableを使用したWebkitスタイルが機能しない?

Question

contenteditable と styleWithCss を使用しようとしています。

Webkit では動作しないようです。

do execCommand を使用するたびに、<b>期待したスパンではなく が生成されます。

ここにデモがあります： http://jsbin.com/izomo/2/edit

テキストの一部を選択し、太字のボタンをクリックして、html 出力を確認します。

これはバグですか、それとも何か間違っていますか。

どうもありがとうございました。

Answer 1

ここの両方の回答のコマンドでこれを機能させることができませんでした。この問題にまだ頭を悩ませている人のために、これを機能させる方法を示します。

execCommand に 3 つの値を渡すことができます

document.execCommand( command, uiElement, value ) 

クリストファーの優れた回答の詳細として、「styleWithCSS」の値はデフォルトで false に設定されています。

alert(document.queryCommandState("styleWithCss"));

true に設定するには、3 番目の引数「値」を true として渡す必要があります。このような：

document.execCommand("styleWithCSS", null, true);

これは Firefox と Chrome の両方で動作します

Answer 2

すべてが意図したとおりに機能しているようです。WebKitBugZillaのバグ13490を参照してください。

編集： 2009年2月3日に、 styleWithCSSのサポートがチェンジセット40560のWebKitのソースに追加されました。

とはいえ、それ以来、何があってstyleWithCSSも常にに設定されているように見えfalseますが、変更前は、スタイルコマンドは常にCSSでstyleWithCSS存在しているかのように適用されていましたが、常にに設定されていましたtrue。

Mozillaのドキュメントdocument.execCommandに従って、次のように行を書き直してみました。

document.execCommand("styleWithCSS", true, null);
document.execCommand("bold", false, null);

これらの変更されたコマンドはFirefoxでも機能しますが、Chrome5またはSafari5（Windowsと現在インストールされているものの両方）では機能しません。

したがって、これはWebKitのバグのように思われます。

Answer 3

document.execCommand("styleWithCSS", true, null);
document.execCommand("bold", false, null);