Question

目标是能够突出显示任何内容，然后单击按钮以向其添加CSS样式以进行快速编辑。

我当前的单击代码，将选定的文本括起来。在为2个格式选项添加2个按钮后，我发现它们只要不重叠就可以正常工作。当我同时突出显示这两种格式样式并单击以重新包装所选文本时，代码只是不执行任何操作。我知道这是行不通的，因为我正在应用的跨度正在跨越前两个边界。

我正在使用sel.removeAllRanges，但我认为它无法正常工作。我知道问题出在哪里，但不太确定如何连贯地解释或解决它。任何帮助将不胜感激。

我的HTML代码是：

<input type="button" onclick="surroundSelection()" value="Surround">
<input type="button" onclick="surroundSelection1()" value="Surround1">
<div contenteditable="true">test test test test test</div>

我的JavaScript代码是：

function surroundSelection() {
  var span = document.createElement("span");
  span.style.fontWeight = "bold";
  span.style.color = "green";
  if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.rangeCount) {
      var range = sel.getRangeAt(0).cloneRange();
      if (surroundSelection) {
        range.surroundContents(span);
        sel.removeAllRanges();
        sel.addRange(range);
      }}}}

我有第二个几乎相同的函数，只是span.style.color不同。

如何让我的代码删除所选文本中的所有现有格式？ removeAllRanges似乎不起作用。

这是我的JSFiddle：http://jsfiddle.net/ueLt51gb/2/

如何完全删除所选文本的所有现有格式？

0 个答案: