Javascript 将HTML标记插入contentEditable div

我有一个

contentEditable

div

问题是，当我键入HTML标记时，比如说，

，那么尖括号就会被DOM中的实体名

和

替换

我如何防止这种情况发生

我希望插入实际的标记，而不是HTML实体

---

这里有一个jsFiddle来描述这个问题：

这就是预期会发生的情况。否则，用户很容易弄乱页面的HTML

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

var-editable=$（“#editableDiv”）；
可编辑。打开（“键控”，功能（事件）{
//TODO:最好检查事件键是否为“”
//避免不必要的额外处理。
可编辑的.html(
可编辑的.html（）
.替换（“，”）
);
});

另一方面，如果您只想将该内容作为未扫描的HTML读取（而不是呈现），那么您可以在读取过程中进行相同的替换

---

提示：在后端，您可能有一些库函数，如PHP中的库函数，它可以为您提供更多功能。

您不能。。。这是富文本编辑器。还有其他方法可以做到这一点吗@Praveen你可以用一个普通的文本框来获取html并将其转换为富文本。正如所说的那样工作，但是，光标有一个奇怪的移动。。。我错过了那个细节（我是否说过这是一个未经测试的例子？；-））。但我认为您可以通过读取光标位置来克服它，并在更改后修复它。我不知道你到底遇到了什么问题，但我可以想象：一方面，根据浏览器的不同，替换内容可以从根本上改变光标位置（因此需要保存以前的位置），另一方面，你删除了一堆字符以添加单个字符。所以你也应该在计算中修正这个差距。。。检查事件参数以查找您需要的信息。我想我可以这样做。。我会的。感谢您的支持。：-）

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;", ">")
    );
});