8

contentEditable 要素内での編集中にユーザーが設定した書式設定を使用するように、リストのスタイルを設定する方法を探しています。<li>具体的には、残りのコンテンツと同じ方法で数字/箇条書きのスタイルを設定できるようにしたいと考えています。

私が行ったテストから、ブラウザーは <li>タグを直接スタイル設定することはありません (実際には番号/箇条書きのスタイルを制御します) が、常に<font>タグ (または<span>if StyleWithCSS) を最初の子ノードとして配置し、それを書式設定に使用します。これを回避するために、すでにいくつかのアイデアを試しましたが、成功していません。

<li>1.プログラムでスタイルを適用する

ここで 'DOMNodeInserted' をリッスンしようとしました。<li>タグが DOM に挿入されたときに、現在のfontName、fontSize、およびforeColorコマンドを照会し、. にインライン スタイルとして適用しました<li>。

textarea.addEventListener('DOMNodeInserted', function (evt) {
    if (evt.target.nodeName === 'LI') {
        evt.target.style.color = queryCommandValue('foreColor');
        evt.target.style.fontFamily = queryCommandValue('fontName');
        evt.target.style.fontSize = queryCommandValue('fontSize');
    }
}, false);

これを行っている場合でも、リスト項目の入力を開始するとすぐに、ブラウザーは「スマート」になろうとし、 からスタイルを削除して(または) タグ<li>に配置します。:(<font><span>

2. StyleSheet に挿入するスタイルのルールを作成する

上記の試みに基づいて、スタイルをインラインで記述する代わりに、それらのルールを作成し、<li>ノードに ID を与え、そのルールをスタイルシートに挿入しました。これで、ルールが のスタイルを管理し<li>、CSSOM を使用して特定<li>の のスタイルを継続的に更新できるようになりました。

これは非常にうまく機能しているように見えましたが (いくつかのバグを解決する必要があります)、contentEditable の undo スタックを完全に壊してしまいました。元に戻すコマンドはtextContentおよびその他の書式設定コマンドにのみ関連付けられているため、スタイルシートで設定しているスタイルを「元に戻す」方法はありません。(少なくともあまり直感的ではありませんが、これがどのように行われるかを考えました...)

3.<li>の属性の変更を監視し、保持する

この試みのために、DOM レベル 4 で利用可能な、新しく利用可能になった MutationObserver http://www.w3.org/TR/dom/#mutationobserverを利用しました。このオブザーバーは、渡されるノードの属性の変更を監視できます。 MutationRecord に戻します。値を含む以前の属性値を保持することもできるため、style削除されたものを見つけて再適用することができました。

var observer = new WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.target.nodeName === 'LI') {
            ...
        }
    })
});

observer.observe(document, {
    attributes: true,
    subtree: true,
    attributeOldValue: true
});

これは、元に戻すのサポートがないことにまだ悩まされています。他の書式設定の変更を元に戻しますが、<li>のスタイルは維持されます。

そこに斬新なアイデアはありますか？最新のブラウザーのみのソリューションも歓迎されます。リストに使用する独自の HTML をフォーマットできることは承知していますが、実際のリスト タグを使用する標準insertOrderedListおよびコマンドを使用してこれを実行できるかどうかを確認しようとしています。insertUnorderedList

** 2012 年 11 月 7 日更新 **

誰もまだこれを解決していないようです。ここに、私が説明していることを確認するための JSFiddle の例を示します: http://jsfiddle.net/8LyZR/。箇条書きまたは番号付きリストのスタイルを変更してみてください。

私が取り組んでいるプロジェクトでは、WebKit の独自のビルドを使用しているため、ネイティブの変更でこれを修正できましたが、HTML/ CSS/JS。

4

1 に答える 1

1

興味深い CSS トリックをいくつか紹介します。http://jsfiddle.net/GZ3cv/

基本的には:before、インライン タグに疑似要素を配置し (スタイルを継承します)、元のリストの箇条書き/番号の上に配置しようとすることに依存しています。

ネストされた/インライン タグ (font、u、b、span、i) のすべての異なる組み合わせで非現実的になる可能性があるため、これを解決策と呼ぶかどうかはわかりません。

しかし、フォント、サイズ、色、およびリストタイプのコントロールをいじってみると、明らかな徹底的な微調整を行うことで、探しているものを模倣できるように思えます。

このテクニックがもっともらしいのか、それとも単にばかげているのか、私は興味があります:)ただそれをそこに放り込んでください..

于 2012-11-14T09:41:30.637 に答える