contenteditable 默认样式答案

【问题标题】：contenteditable default stylingcontenteditable 默认样式
【发布时间】：2018-01-22 13:57:15
【问题描述】：

我有以下 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>');
});

【问题讨论】：

标签： javascript jquery contenteditable

【解决方案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>

【讨论】：