Question

我有这个功能，我从富文本编辑器调用，在选择中添加内容。

问题是，如果我传递了像<center>some</center>

这样的html标签，它就无法正常工作

不是制作内容中心，而是输出HTML也是文本

function addTextAtCursorPostion(text) {
var sel, range, html;
if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();
        range.insertNode(document.createTextNode(text));
    }
}

此document.createTextNode仅包含文字。有没有办法可以处理文本和HTML？

或 我们是否有可以在其中放置html的虚拟/空节点？

使用Firebug

获取的富文本编辑器innerHTML的示例内容

<div contenteditable="true" id="editor">
      <font face="Comic Sans MS">Go ahead</font>…
       <a href="www.stackoverflow.com"><b><i>Welcome User</i>
  **ADD HTML FORMATTED STRING HERE OR POSITION AT CURSOR**
 </b></a><br>
</div>

如果我用span/div/p包装我的htmlText，我可能会遇到UI对齐问题

Answer 1

我认为您不能使用文本节点呈现HTML。您需要创建一个元素并使用innerHTML来插入代码。

var el = document.createElement('span');
el.innerHTML = text;

Answer 2

未经测试，但我认为您可以将HTML字符串插入自定义HTML元素（除了全局添加的样式之外不会带来任何继承样式），然后将其插入范围。

function addTextAtCursorPostion(text) {
 var sel, range, html;
 if (window.getSelection) {
   sel = window.getSelection();
   if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      range.insertNode(document.createElement("range").innerHTML=text);
  }

}

在文本节点之类的空节点中添加text / html

2 个答案: