单击工具提示时无法选择文本 bold/underlined

Question

我有一些内容可编辑的段落，我希望能够在双击时使某些单词加粗下划线。当我双击一个词时，它被选中并显示一个包含 3 个选项的工具提示。但是，单击工具提示选项后，选择消失了，文本也没有发生任何变化。

问题是： 1) 如何将选中的文字加粗？

（问题2不重要也没有必要。） 2) 如何保持选中受影响的文本？

解决方案在 javascript 中比 jQuery 更受欢迎。

代码如下：

var allpara = document.querySelectorAll('p');
[].forEach.call(allpara, function(para) {
  para.addEventListener('click', showTooltip, false);
});

var tooltip = document.getElementById('tooltip');

function showTooltip(e) {
  tooltip.style.display = 'block';
}

var tooltipOptions = document.querySelectorAll('.tooltip-option');
[].forEach.call(tooltipOptions, function(options) {
  options.addEventListener('click', function(e) {
    console.log(e.target.id);
    document.execCommand('bold');
  }, false);
});

body {
  position: relative;
}
#tooltip {
  display: none;
  position: fixed;
  background: black;
  color: white;
  width: 120px;
  font-size: 2em;
  border-radius: 4px;
  top: 10px;
  right: 150px;
}
.tooltip-option {
  width: 35px;
  margin-left: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="notepad">
    <p class="notepad-paragraph" contenteditable="true">This is my text-ed</p>
    <p class="notepad-paragraph" contenteditable="true">itor. This is what I have</p>
    <p class="notepad-paragraph" contenteditable="true">built till no</p>
    <p class="notepad-paragraph" contenteditable="true">w. Now I am building it fur</p>
    <p class="notepad-paragraph" contenteditable="true">ther. This is fun.</p>
  </div>

  <div id="tooltip">
    <span id="tooltip-bold" class="tooltip-option">B</span>
    <span id="tooltip-und" class="tooltip-option">U</span>
    <span id="tooltip-red" class="tooltip-option">R</span>
  </div>
</body>

Answer 1

如果您将 'tooltip' 中的 <span> 更改为 <button>，您的解决方案已经开始工作了！

只要您的编辑器样式按钮是输入类型元素，所选文本就会保持选中状态。

无论如何都更改了您的代码段 - ID 现在已经包含 execCmd 所需的命令 - 因此下划线和斜体也可以使用。在 js 部分，您只需将 execCMD 行更改为：document.execCommand(this.id);

var allpara = document.querySelectorAll('p');
[].forEach.call(allpara, function(para) {
  para.addEventListener('click', showTooltip, false);
});

var tooltip = document.getElementById('tooltip');

function showTooltip(e) {
  tooltip.style.display = 'block';
}

var tooltipOptions = document.querySelectorAll('.tooltip-option');
[].forEach.call(tooltipOptions, function(options) {
  options.addEventListener('click', function(e) {
    console.log(e.target.id);
    document.execCommand(this.id);
  }, false);
});

body {
  position: relative;
}
#tooltip {
  display: none;
  position: fixed;
  background: black;
  color: white;
  width: 120px;
  font-size: 2em;
  border-radius: 4px;
  top: 10px;
  right: 150px;
}
.tooltip-option {
  margin-left: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="notepad">
    <p class="notepad-paragraph" contenteditable="true">This is my text-ed</p>
    <p class="notepad-paragraph" contenteditable="true">itor. This is what I have</p>
    <p class="notepad-paragraph" contenteditable="true">built till no</p>
    <p class="notepad-paragraph" contenteditable="true">w. Now I am building it fur</p>
    <p class="notepad-paragraph" contenteditable="true">ther. This is fun.</p>
  </div>

  <div id="tooltip">
    <button id="bold" class="tooltip-option">bold</button>
    <button id="underline" class="tooltip-option">underline</button>
    <button id="italic" class="tooltip-option">italic</button>
    <button id="undo" class="tooltip-option">undo</button>
  </div>
</body>

Answer 2

Javascript 更改 select 编辑文本

有趣的问题。我们必须将 selected 文本转换为 span 元素，否则我们无法为我们 select.

的文本设置样式

几个小时后，我得到了这个有问题的代码 XD

目前粗体特征是硬编码的....

跨多行选择不起作用。

双向选择都有效，但不能跨多行选择。

document.addEventListener('DOMContentLoaded', function() {
  //Function for setting togglable buttons
  var buttons = document.getElementById("tools");
  var bold = false;
  var underline = false;

  buttons.addEventListener('click', function(e) {
    elem = e.target;
    if (elem.dataset.active == "active") {
      elem.dataset.active = "";
      switchTool(elem, false);
    } else {
      elem.setAttribute("data-active", "active");
      switchTool(elem, true);
    }


  });
  //Function for chaning what tool we are using.
  function switchTool(element, bool) {
    if (element.id == "bold") {
      bold = bool;
    } else if (element.id == "underline") {
      underline = bool;
    }
    console.log(element.id + " " + bool.toString());
  }

  function replace(s, start, end, replace) {
    return s.substr(0, start) + replace + s.substr(end, s.length);
  }

  function selectText(e) {
    var elem = e.target;

    if (window.getSelection) {
      var selObject = window.getSelection();

      var anchorOffset = selObject.anchorOffset;
      var focusOffset = selObject.focusOffset;
      var elemHtml = elem.innerHTML;

      var selectText = '<span class="bold">' + selObject.toString() + "</span>";
      if (anchorOffset > focusOffset) {
        elem.innerHTML = replace(elemHtml, focusOffset, anchorOffset, selectText);
      } else {
        elem.innerHTML = replace(elemHtml, anchorOffset, focusOffset, selectText);
      }

    }
  }


  document.getElementById("Select-Text").addEventListener("mouseup", selectText);


});

.butt {
  border: 2px solid black;
  background-color: white;
  font-size: 20px;
  border-radius: 5px;
  box-shadow: 2px 2px 1px 0px gray;
  margin-left: 5px;
  cursor: pointer;
}
.bold {
  font-weight: bold;
  font-size: 1.2em;
}
.underline {
  text-decoration: underline;
}
.butt[data-active="active"] {
  box-shadow: inset 1px 1px 1px black;
}

<pre id="Select-Text">This is a lot of text 
  Lorem ipsum dolar si amet Lorem ipsum dolar si 
  amet Lorem ipsum dolar si amet Lorem ipsum dolar
  si amet Lorem ipsum dolar si amet Lorem ipsum
  dolar si amet Lorem ipsum dolar si
  amet Lorem ipsum dolar si amet 
  Lorem ipsum dolar si
  amet Lorem ipsum 
  dolar si amet</pre>
<h3>Togglable tools:</h3>
<div id="tools">
  <button class="butt" id="bold">Bold</button>
  <!--button class="butt" id="underline">Underline</button-->
</div>

单击工具提示时无法选择文本 bold/underlined

Unable to make selected text bold/underlined on clicking on tooltip

html

javascript

jquery

contenteditable

Javascript 更改 select 编辑文本