Question

我一直在玩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;
                };
            }

我尝试使用“”而不是“text”作为传递的css类，它将切换，但不再切换，显然不是正确的解决方案。

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

Answer 1

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

我去年做了一些更有野心和通用的execCommand模块，可以做你想做的事。它到达了working demo，但我陷入了棘手的边缘情况并停止了它。我打算回到它，但可能需要几个月才能做好准备。

如何在没有类属性的情况下使用Rangy.js创建标签？

1 个答案: