javascript - 使选定的文本加粗/不加粗

Question

当您单击按钮时，我将选定的文本包装在 span 标记中。如果我随后选择另一段文本并单击按钮，该文本也会被包裹在标签中。但是，当我选择一段已经包含在 span 标签中的文本时，我想删除这些标签以取消对文本的加粗，而不是将这些标签包含在更多标签中。

HTML

<div contenteditable="true" class="textEditor">Some random text.</div>

<a href="#" class="embolden">Bold</a>

JS

$('.embolden').click(function(){
    var highlight = window.getSelection();  
    var span = '<span class="bold">' + highlight + '</span>';
    var text = $('.textEditor').html();
    $('.textEditor').html(text.replace(highlight, span));
});

JSFiddle Demo

我可能对这个请求有点贪心，但我只选择了一段已经包含在 span 标签中的文本的一部分，而不是全部，我想在选择开始时关闭原始标签, 之后立即打开一个新标签，然后在选择结束时关闭新标签，然后打开一个新标签。

Answer 1

当您可以使用内置功能时，为什么要尝试手动将文本加粗。现代浏览器实现了 execCommand 函数，允许在文本上加粗、加下划线等。你可以这样写:

$('.embolden').click(function(){
    document.execCommand('bold');
});

并且所选文本将变为粗体，如果它已经是粗体，文本样式将被删除。

可以找到一个命令列表和一个小文档 here . (有关浏览器支持的更多信息 here)。

$(document).ready(function() {
  $('#jBold').click(function() {
    document.execCommand('bold');
  });
});

#fake_textarea {
  width: 100%;
  height: 200px;
  border: 1px solid red;
}

button {
  font-weigth: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="jBold"><b>B</b></button>
<div id='fake_textarea' contenteditable>
  Select some text and click the button to make it bold...
  <br>Or write your own text
</div>