javascript - contenteditable 默认样式

Question

我有以下 JSFiddle:https://jsfiddle.net/ta05jk3d/ .

它包含一个内容可编辑的 div 和一个按钮。如果您在 div 中输入一些文本，它是普通文本(不是粗体或下划线或任何其他文本)。如果单击该按钮，文本“test”将以粗体添加到 div。

问题是什么？如果您单击该按钮，文本“test”将以粗体显示(没关系)，但如果您在粗体文本之后输入一些文本，所有其他文本也将以粗体显示。

像这样:

一些文本... 测试我在“测试”之后输入的其他文本现在也是粗体

我希望能够添加粗体文本，但前提是我单击按钮。我之后输入的文本可能是粗体，但只是普通文本，如下所示:

文本...测试一些其他文本...

$('.button').on('click',function(e){
    var content = $('.msg').html();
    $('.msg').html(content+'<strong>test</strong>');
});

Answer 1

您需要在<strong> 之后放置一个元素或节点。以便浏览器在焦点放回 contenteditable 时识别出光标应该位于粗体内容之外元素:

$('.button').on('click', function(e) {
  var content = $('.msg').html();
  $('.msg').html(content + '<strong>test</strong>&nbsp;'); // note '&nbsp;'
});

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

<div class="msg" style="border: 1px solid red; padding:10px;" contenteditable></div>
<button class="button">Add some text</button>