在空节点(如文本节点）中添加文本/html

Add text / html in a empty node like text node

本文关键字：节点 文本 添加 html      更新时间：2023-09-26

>我有这个函数，我从富文本编辑器调用以在选择中添加内容。

问题是，如果我使用 html 标签传递，它无法正常工作<center>some</center>

它不是制作内容中心，而是输出 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拍摄的富文本编辑器内部HTML的示例内容

<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包装我的 html文本，我可能会遇到 UI 对齐问题

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

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

未测试，但我认为您可以将 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);
  }

}

相关文章：