卡住'contenteditable'

Question

我正在使用 JavaScript 开发一个富文本框。通过阅读 Mozilla 中的一些优秀参考资料，我开发了内容可编辑 div 来制作文本粗体、斜体、下划线和一些更基本的效果。但是当我将效果应用于整个文本时，之后我无法将光标（克拉）放在标签的一侧。就像当我输入某些内容时，我的 Div (contenteditable = "true") 变得可编辑。我输入“ABC”。然后我选择“ABC”并按下粗体按钮。我得到了粗体文本，但之后我无法在没有“BOLD”标签的情况下输入我的 div。有人可以给我解决方案。通过观察以下代码和输出，我希望我能解决我的问题。提前谢谢你。

$(function(){           
    $("#btn_bold").click(function () {
    document.execCommand("bold",true,"");
  });
});

HTML 代码。

  <div class="container">
      <div id="myEditTextBox" contenteditable="true">
      </div>
       <button id="btn_bold" type="button" class="btn btn-default" title="Bold" >B</button>

所以当我输入 ABC 并选择它时，我得到了“ABC”，这很好。现在，当我单击 div 以将其聚焦并键入它时，它会附加到“<b> </b>”而不是“<div>”中，所以在“ABC”之后，如果我写 D，则输出是“ABCD”，但我想要“ABCD”。谢谢你。

Answer 1

您可以再次单击按钮或添加 onBlur 以再次切换粗体

编辑：

我在想这样的事情：

$(function() {

    var itsBold = false;

    var toggleBold = function() {
        document.execCommand("bold", true, "");
        itsBold = !itsBold;
    };

    var onBlur = function() {
        if(itsBold) toggleBold();
    };

    $("#btn_bold").click(toggleBold);
    $("#myEditTextBox").blur(onBlur);

});