javascript - HTML 富文本编辑：围绕选择包装自定义 html

Question

我正在通过 jWysiwyg 库使用 html 5 富文本编辑。我希望能够用自定义 HTML 包围文档的选定部分，就像人们如何突出显示文档上的文本并将其标记为粗体一样。关于这个主题的信息非常有限，我什至不确定这是否可能。我还尝试获取页面的原始 html 选择，但到目前为止，我只能获得屏幕上突出显示的任何内容的纯文本版本。任何建议将不胜感激。

Answer 1

经过进一步研究，我发现jWysiwyg中的getInternalRange()函数有效地返回了document.createRange()生成的对象。在查看文档后，我能够找到符合我需要的环绕内容（）方法。下面提供了一个示例。我正在使用 jQuery，因此我还将演示如何使用 jQuery 为您生成 html 元素：

var range = document.createRange();

range.surroundContents($('<span style="background-color: red;" />').get(0));

此特定示例以红色突出显示所选文本，但是可以轻松推广此示例以允许开发人员使用任意数量的 html 元素围绕选择。