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

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

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

感谢任何帮助..谢谢!

Answer 1

不幸的是，Rangy 的 CSS 类应用程序不允许您这样做。根本问题是它依赖于 CSS 类来决定包围哪些元素和文本节点或从中添加/删除类。与更一般的检测风格(如粗体)相比，检测类的存在要简单得多。

我去年做了一些工作，开发了一个更雄心勃勃、更通用的 execCommand 模块，它可以满足您的需求。它达到了 working demo但我陷入了棘手的边缘案例，并停止了研究。我确实打算回去，但可能需要几个月的时间才能准备好。