Question

请看一下这个链接。因为它清除它会发生在插入符号处插入一个span节点。问题是，插入后节点，如果我按任何字符，其颜色也是绿色。因为它也是在span元素内部。那么我怎么能把插入符号在跨度之后，以便下一个插入节点的颜色保持正常。

我试图找到所选节点（基于插入位置），在元素后面设置范围并使用折叠（false）。但我无法获得所需的输出。

查找节点的代码：

  function findNode(event)
  {
    if (event.type == 'click')
    par = event.target;

    else if (event.type == 'keyup'){        
        if (document.selection)
        par = document.selection.createRange().parentElement();
    else if (window.getSelection){
        var range = window.getSelection().getRangeAt(0);
        par = range.commonAncestorContainer.parentNode;
    }
  }

然后我使用setEndAfter（）ant collapse（false）设置边界。我是这个领域的新手，所以我不确定我是对的。所以任何建议都非常值得注意。提前致谢。

Answer 1

快速浏览此页面上的“相关”部分，可以获得所需信息的链接。总之，浏览器（除非它的Firefox）阻止它，最简单的解决方法是在插入的U+200B元素后插入零宽度空格字符（Unicode <span>）。除了是一个非常丑陋的黑客之外，这确实存在一旦不再需要就跟踪和移除这些零宽度空间的问题。

我已经更新了你的jsFiddle以使用这种方法但没有任何代码来删除零宽度空间：

http://jsfiddle.net/VzbYJ/87/

有关背景信息，请参阅以下相关问题/答案列表：

我需要一个股票答案，它经常出现......

Answer 2

这是一篇旧帖子，这是解决问题的一部分。还有更复杂的方法我还没有完成，但简单总是好的。

const editor = document.querySelector('[contenteditable="true"]');
const spans = document.querySelectorAll('span[contenteditable="false"]');

Array.prototype.slice.call(spans).map(span => {
  const empty = document.createTextNode( '\uFEFF' );
  const parentEl = span.parentElement;
  const allchildnodes = editor.childNodes;
  const lastsib = allchildnodes[allchildnodes.length - 1];
  const ended = lastsib.wholeText === '\n';
  const prevsib = ended ? lastsib.previousSibling === span : false;
  if (prevsib) {
    parentEl.appendChild(empty);
  }
});

https://codepen.io/augur/pen/MvaKJO

contenteditable把插入外插入插入符号

2 个答案: