尊重可编辑DIV内的HTML标签

Respect HTML tags inside an editable DIV

本文关键字：内的 HTML 标签 DIV 编辑      更新时间：2023-09-26

我想实现一个非常简单的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中标记/高亮一些文本，然后点击加粗按钮。所选文本将以标签。

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

这是一个带有bold<词。>

代替:

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

任何想法?

你太努力了;)

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

例如，"Make it Bold"只需要调用document.execCommand('bold')。你可以查看Mozilla的execCommand文档了解更多细节。

对于一个非常小的例子，看看wysiwyg的演示，然后看看index.js的一些想法，或者只是使用自己的库。

相关文章：