将所选文本设为粗体/非粗体

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演示

我可能对这个请求感到贪婪,但我选择的部分文本已经包含在span标签中,但不是全部,我想在选择开始时关闭原始标签,打开一个之后的新标签,然后在选择结束时关闭新标签并在此之后打开一个新标签.

Answer 1

当您可以使用内置功能时,为什么要尝试手动加粗文本.现代浏览器实现execCommand了允许在文本上加粗,加下划线等的功能.你可以写:

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

选定的文本将变为粗体,如果它已经是粗体,则将删除文本样式.

可在此处找到命令列表和一些小文档.(更多关于浏览器支持的信息).

$(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>