将 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()，它可以为您提供更多功能。