Question

我正在尝试实现一种非常简单的wysiwyg 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中标记/突出显示某些文本并点击Make it Bold - Button。所选文本将包含在＆lt; b /＆gt;中。标签

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

这是一个示例文本，其中＆lt; b＆gt;粗体＆lt; b /＆gt;字。

而不是：

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

有什么想法吗？

Answer 1

你太努力了;）

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

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

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

尊重可编辑DIV中的HTML标记

1 个答案: