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;
                };
            }

我尝试使用 "" 和 null 而不是 "text" 作为传递的 css 类，它会切换，但不再关闭，显然不是正确的解决方案。

任何帮助表示赞赏.. 谢谢！

4

1 回答 1

3

不幸的是，Rangy 的 CSS 类应用程序不会让您这样做。根本问题是它依赖于 CSS 类来决定要包围或添加/删除类的元素和文本节点。检测一个类的存在要比检测一种风格的更一般的情况（例如粗体）要简单得多。

去年，我在一个更雄心勃勃的通用 execCommand 模块上做了一些工作，该模块可以满足您的需求。它达到了一个工作演示，但我陷入了棘手的边缘情况并停止了工作。我确实打算回到它，但可能需要几个月的时间才能准备好。

于 2012-07-25T08:33:20.670 回答