尊重可编辑 DIV 中的 HTML 标签答案

【问题标题】：Respect HTML tags inside an editable DIV尊重可编辑 DIV 中的 HTML 标签
【发布时间】：2013-05-13 15:01:57
【问题描述】：

我正在尝试实现一种非常简单的所见即所得的 JavaScript 编辑器。

我有什么：我知道，当前的 Javascript 不能通过点击按钮来工作……

   wrapText = function(replacementText) {
          var range, sel;
          if (window.getSelection) {
            sel = window.getSelection();
            if (sel.rangeCount) {
              range = sel.getRangeAt(0);
              range.deleteContents();
              return range.insertNode(document.createTextNode(replacementText));
            } else if (document.selection && document.selection.createRange) {
              range = document.selection.createRange();
              return range.text = replacementText;
            }
          }
        };

<a id="bold-btn">Make it Bold!</a>
<div id="editit" contenteditable="true"></div>

现在，如果您在可编辑的 div 中标记/突出显示某些文本并点击使其加粗 - 按钮。选定的文本将被包裹在标记中。

问题是输出看起来像这样：

这是一个带有粗体字的示例文本。

代替：

这是一个带有粗体字样的文本。

有什么想法吗？

【问题讨论】：

加粗的代码在哪里？我们怎么知道问题出在哪里！
你的javascript代码是什么样的？
如果您不知道已经为您的问题提供了解决方案ckeditor.com
我认为你需要使用 innerHtml 而不是 innerText 如果你这样做的话。
抱歉，我认为 Javascript 部分不是问题所在。我会编辑问题。

标签： javascript jquery html contenteditable

【解决方案1】：

你太努力了；）

您的代码正在做的是创建一个文本节点，这意味着内容将是文本而不是被视为 html。您可以使用 execCommand 代替。

例如，“Make it Bold”只需调用document.execCommand('bold')。您可以查看 Mozilla 的 execCommand 文档了解更多详细信息。

对于一个非常小的示例，请查看 wysiwyg 的演示，然后查看 index.js 以获得一些想法，或者自己使用该库。

【讨论】：