添加链接元素时段落分隔符为 2

Paragraph breaks in 2 when adding link element

本文关键字：分隔符 段落 链接 元素 添加      更新时间：2023-09-26

我只在 Firefox 中遇到这个棘手的问题：当我向 contentEditable 段落添加链接元素时，有时会将段落分成 2 或 3 个。这不会显示任何错误，有时需要几秒钟。代码如下：

function changeSelectedText(type,text) {
  var selObj = window.getSelection();
  var selRange = selObj.getRangeAt(0);
  var newElement = document.createElement(type);
  if(type == "a") {
    newElement.setAttribute('href', text.toLowerCase());
    newElement.setAttribute('target', "_blank");
  } else if(type == "span"){
    newElement.setAttribute('class', "big");
  }
  var documentFragment = selRange.extractContents();
  newElement.appendChild(documentFragment);
  selRange.insertNode(newElement);
  var range = document.createRange();
  range.selectNodeContents(newElement);
  selObj.removeAllRanges();
  selObj.addRange(range);
}

添加跨度效果很好，但对于链接，它有时会导致这种奇怪的行为。知道为什么吗？

这是迈克建议的jsfiddle链接：JSFIDDLE 链接

发现它:)问题是我用来添加链接的按钮（jsfiddle 的 #linkdiv）有时会被选中（只有 FF）。我认为鼠标按下功能应该防止这种情况发生，但事实并非如此。所以，我所做的是我添加了js以防止选择该按钮：

 <div id="#link" onselectstart="return false;" ondragstart="return false;">Add Link</div>

如果有人有更好的解决方案，请告诉我;)

相关文章：