将 HTML 标签插入 contentEditable div

Question

我有一个 contentEditable div.

问题是当我输入 HTML 标签时，例如 <h1> 然后尖括号被它们的实体名称 < 和 > 替换 DOM。

如何防止这种情况发生？

我想要插入实际标签而不是 HTML 实体。

这是描述问题的 jsFiddle：https://jsfiddle.net/m0xbd2j9/28/

Answer 1

这是预料之中的事情。否则，用户很容易弄乱您的页面 HTML。

如果您真的想这样做（我不建议您在生产中这样做），您可以拦截 keyup 事件并对元素内容执行替换。类似的东西（为了简洁起见，使用 jquery 的未经测试的示例）：

var editable = $("#editableDiv");
editable.on("keyup", function(event) {
    // TODO: Better check if event key is either "<" or ">"
    // to avoid extra processing if not necessary.
    editable.html(
        editable.html()
            .replace("&lt;", "<")
            .replace("&gt;", ">")
    );
});

另一方面，如果您只是想读取未转义的内容（而不是渲染它）HTML，您可以简单地在读取过程中进行相同的替换。

提示： 在后端，您可能有一些库函数，例如 PHP 中的 html_entity_decode()，它可以为您做更多的事情。

将 HTML 标签插入 contentEditable div

Insert HTML tags into a contentEditable div

html

javascript

contenteditable