2

私は選択範囲についてRangy.jsで遊んでいますが、これまでのところ本当に気に入っています。選択範囲のテキストノードを特定のタグ内でラップし、ボタンをクリックするとこれを切り替えることを検討しています。私はcssClassApplierModuleを使用してうまく機能していますが、それを除いて（そして名前のために意味があります）、dom要素にそれ自体に適用するクラスも与える必要があります。

したがって、現在、範囲を選択して、たとえば強力なタグを適用すると、最終結果は次のようになります。

Text text text <strong class="test"> selected text </strong> text text text

そして、私はそれをしたいです：

Text text text <strong> selected text </strong> text text text

私がこれまでに持っているコードは次のとおりです。

function gEBI(id) {
                return document.getElementById(id);
            }

            var action;

            function toggleAction() {
                action.toggleSelection();
            }

            rangy.init();

            // Enable buttons
            var cssClassApplierModule = rangy.modules.CssClassApplier;

            // Next line is pure paranoia: it will only return false if the browser has no support for ranges,
            // selections or TextRanges. Even IE 5 would pass this test.
            if (rangy.supported && cssClassApplierModule && cssClassApplierModule.supported) {
                action = rangy.createCssClassApplier("test", {
                    elementTagName: "strong",
                    elementProperties: { }
                });
                var toggleActionButton = gEBI(nsID);
                toggleActionButton.disabled = false;
                toggleActionButton.ontouchstart = toggleActionButton.onmousedown = function () {
                    toggleAction();
                    return false;
                };
            }

渡されるcssクラスとして「text」の代わりに「」とnullを試しましたが、トグルしますが、トグルオフではなくなり、明らかに正しい解決策ではありません。

助けていただければ幸いです。ありがとう！

4

1 に答える 1

3

残念ながら、Rangy の CSS クラス アプライヤーでは、これを行うことはできません。基本的な問題は、CSS クラスに依存して、どの要素とテキスト ノードを囲むか、クラスを追加/削除するかを決定することです。クラスの存在を検出する方が、大胆さなどのスタイルを検出するより一般的なケースよりもはるかに簡単です。

私は昨年、あなたが望むことを行う、より野心的で汎用的な execCommand モジュールについていくつかの作業を行いました。動作するデモまではできましたが、トリッキーなエッジケースに行き詰まり、作業をやめました。私はそれに戻るつもりですが、準備が整うまでには数か月かかる可能性があります.

于 2012-07-25T08:33:20.670 に答える