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

Question

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

Answer 1

经过进一步研究，我发现jWysiwyg中的getInternalRange（）函数有效地返回了document.createRange（）生成的对象。在查看文档后，我能够找到满足我需求的surroundContents（）方法。下面提供一个例子。我正在使用jQuery，所以我还将演示如何使用jQuery为你生成html元素：

var range = document.createRange();

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

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