Question

我有一个contenteditable div（id为'editor1'），允许用户输入文本。然后有一个功能，允许他们为任何突出显示的文本着色。我的js使用window.getSelection().getRangeAt(0)，但问题在于它们可以突出显示div之外的单词，它们的颜色也会发生变化。至今;我试过了：

        function red(){
    {       
        var getText = document.getElementById("editor1").innerHTML;
        var selection = getText.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        var span = document.createElement("span");
        span.style.color = "red";
        span.appendChild(selectedText);
        selection.insertNode(span);
    }
    }

小提琴：https://jsfiddle.net/xacqzhvq/

正如你所看到的，如果我强调“这也会变成红色”，我也可以用这个按钮来制作那个红色。我怎样才能仅在editor1 div中为突出显示的文本着色？

Answer 1

您可以使用.baseNode从选择中获取节点元素。从那里你可以获得父节点并将其用于比较。

function red(){
    // If it's not the element with an id of "foo" stop the function and return
    if(window.getSelection().baseNode.parentNode.id != "foo") return;
    ...
    // Highlight if it is our div.
}

在下面的例子中，我让div有一个id您可以检查以确定它是该元素：

Demo

当 @ z0mBi3 注意到时，这将是第一次使用。但可能不适用于许多亮点（如果它们碰巧被清除）。 <span>内的div元素创建了一个层次结构，其中div是许多span元素的父元素。对此的解决方案是遍历节点的祖先，直到找到id为"foo"的那个。

幸运的是，您可以使用jQuery使用.closest()方法为您执行此操作：

if($(window.getSelection().baseNode).closest("#foo").attr("id") != "foo") return;

Here is an answer with a native JS implemented method of .closest()

Answer 2

你在找这个，

  //html
  <body>
     <p id='editor1'>asdf</p>
     <button onclick='red()'>
     RED
     </button>
  </body>

  //JavaScript

    window.red = function(){
        //var getText = document.getElementById("editor1").innerHTML;
        var selection = window.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        var span = document.createElement("span");
        span.style.color = "red";
        span.appendChild(selectedText);
        selection.insertNode(span);
    }

Plunker：https://plnkr.co/edit/FSFBADoh83Pp93z1JI3g?p=preview

Answer 3

试试这个代码：

function addBold(){
 
if(window.getSelection().focusNode.parentElement.closest("#editor").id != "editor") return;

 





  const selection = window.getSelection().getRangeAt(0);
  
  let selectedParent = selection.commonAncestorContainer.parentElement;
  

  let mainParent = selectedParent;
  
  if(selectedParent.closest("b"))
  {
  //Unbold
    var text = document.createTextNode(selectedParent.textContent);
    mainParent = selectedParent.parentElement;
    mainParent.insertBefore(text, selectedParent);
    mainParent.removeChild(selectedParent);
    mainParent.normalize();
  }
  else
  {
    const span = document.createElement("b");
    span.appendChild(selection.extractContents());
    selection.insertNode(span);
    mainParent.normalize();
  }
  

  if (window.getSelection) {
    if (window.getSelection().empty) {  // Chrome
      window.getSelection().empty();
    } else if (window.getSelection().removeAllRanges) {  // Firefox
      window.getSelection().removeAllRanges();
    }
  } else if (document.selection) {  // IE?
    document.selection.empty();
  }




};

<div id="editor" contenteditable="true">

You are the programmers of the future 

</div>


<button onclick="addBold()">Bold</button>

我得到了代码并从以下答案中添加了我的编辑：

Bold/unbold selected text using Window.getSelection()

getSelection().focusNode inside a specific id doesn't work

如何在特定div中获取getSelection（）？

3 个答案: