3

WYSIWYGエディターを使用していて、テキストを選択して、たとえば太字で適用すると、ブラウザーは選択範囲を<span style="font-weight:bold">タグでラップします（呼び出したdocument.execCommand("useCSS", false)および/またはdocument.execCommand("styleWithCSS", true)）。ここで、そのサブセットを選択して再度太字を適用すると、元の太字タグが次のようなものに分割されます。

<span style="font-weight:bold">Something</span>
Not selected 
<span style="font-weight:bold">Selected</span>

私が取り組んでいる製品では、execCommandで直接サポートされていない機能（フォントファミリとフォントサイズの両方を適用するためのテキストのレベル（クラス）の追加など）を含む、さまざまなWYSIWYG機能をサポートしています。ネストされたタグで問題が発生しています。スタイリングから現在の範囲を削除し、基本的に前のタグを閉じて、コンテンツの後に新しいタグを開くようにブラウザーに指示する方法はありますか？

execCommandリファレンスにすぐに何かが表示されません。

rangy 1.2.3を使用してある程度の成功を収めていますが、欠落しているコマンドがあるかどうかはわかりません。

上記の例に太字と斜体を追加すると、これはより複雑になります。次に、真ん中の太字を削除すると、3つのスパンが生成され、2つは太字と斜体のテキストで、真ん中は斜体だけです。

現時点では、エディターの使用をChromeに制限しています。

4

1 に答える 1

0

問題が正しく表示される乱雑な出力である場合は、エディターに依存しない角度からアプローチする必要があります。これは、すべての HTML に影響を与えますが、特に範囲の広いコードやその他の WYSIWYG エディター/ユーザー形式のコードに影響を与えるためです。

混乱を軽減する最も簡単な方法は、ユーザーが使用できるマークアップ オプションを制限することです。

  • 多くのコードを含む書体またはその他のスタイル/要素を制限する (無効にしない場合)
  • BBCode や Markdown 構文など、このジレンマのために正確に設計されたソリューションを検討してください

クライアントが MS Word の赤/青のテキストを必要としているためにエディタを交換できない場合は、MS Office の HTML エクスポートも処理できるPHP Tidyで十分です。構成された次の関数merge-spansは、トリックを行う必要があります。

function tidyHTML($input){
    $tidy = new tidy();
    $config = array(
        'ascii-chars' => true,
        'bare' => true,
        'clean' => true,
        'drop-empty-paras' => true,
        'drop-proprietary-attributes' => true,
        'hide-endtags' => true,
        'indent' => true,
        'logical-emphasis' => true,
        'merge-spans' => true,
        'show-body-only' => true,
        'word-2000' => true,
        'wrap' => false
    );
    return $tidy->repairString($input, $config);
}
echo tidyHTML($wysiwyg_output);

オプションのドキュメントは、ここにあります。

于 2013-01-04T15:12:28.610 に答える