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

我一直在玩Rangy.js的选择范围，到目前为止真的很喜欢它。我正在寻找将选择范围的文本节点包装在某个标签中，并在点击按钮时进行切换。我使用cssClassApplierModule工作得很好，除了（并且由于名称有意义），我还需要为dom元素提供一个它应用于自身的类。如何在没有class属性的情况下使用Rangy.js创建标签？

所以现在当我选择一个范围和应用，例如强大的标签，我的最终结果是：

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类被传递，它会切换，但不再切换，显然不是正确的解决方案。

任何帮助表示感谢..谢谢！

来源

2012-07-25 Andrew Eddy

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

去年，我做了一些工作，开发了一个更加雄心勃勃的通用execCommand模块，它可以做你想做的事情。它有一个working demo，但我陷入了棘手的边缘案件，并停止对它的工作。我打算回到它上面，但可能需要几个月时间才能做好准备。

来源

2012-07-25 08:33:20

公平和不错的POC（感谢您的快速回复）。你有什么可能总结你的感受还没有准备好/完整吗？看起来它对我来说工作得很好，但我更多地了解DOM选择的复杂程度。 – 2012-07-25 18:25:55

@AndrewEddy：我处理了
元素和空白文本节点，因此可能会出现问题或不一致之处。除此之外，欢迎您使用代码，但它没有像我通常会给它的测试那样的东西，我不确定架构或API，并且我没有认为它在点I停止。此外，如果有错误，我不太可能修复它们，因为当我恢复工作时，我可能会重新开始并根据需要复制旧代码的各个位。 – 2012-07-25 18:38:07

恩，这是一个很好的开始，我感谢你的时间和帮助的意愿。 – 2012-07-25 19:31:34

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

回答

相关问题