Question

我有一个contentEditable部门。

问题是当我输入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中

1 个答案: