用于繁重的HTML DOM处理的JS库

Question

我正在使用html，css和Javascript构建一个小便笺应用程序。这些便签的内容不仅仅是纯文本。他们可以有内部标签，如<p>, <span>, <img>等......

因此，当用户选择便签的DIV中的某些内容（设置为contenteditable = true），并单击按钮时，请说“Make text bold”，所选内容应更改为粗体文本。

我正在使用JavaScript的Range对象进行选择。但问题是用新格式化的节点替换现有节点和内容是非常复杂的。说scneraio ......

示例html：

<p>
This is some paragraph <b> in bold </b>
<span>This is some span</span>
</p>

然后让用户选择

<p>
This is <SELECTION-START>some paragraph <b> in bold </b>
<span>This is some<SELECTION-END> span</span>
</p>

因此，选择开始从<p>标记的一半开始，它完全具有<b>标记。并在<span>标记的中途结束。使用Range JS对象并操纵DOM中的节点似乎很难实现这一点。

我的问题是，

• 是否有任何现有的库将格式和其他内容应用于HTML dom选择？
• 如果没有，请指出一些实现此功能的代码。

谢谢..

注意：我不想要任何HTML编辑器或插件。只是一个'DOM编辑lib'或'易于DOM处理的代码'

Answer 1

我的Rangy库可以做到这一点。例如，请参阅class applier module。

虽然您无法完全控制它产生的标记，但还有对粗体等样式的内置浏览器支持。您需要的方法是document.execCommand()。要切换大胆，请使用

document.execCommand("Bold", false, null);