javascript - Contenteditable 中的 HTML 元素？

Question

我有一个 contenteditable 标签，我希望我的用户能够在其中输入代码。但是，当我输入 contenteditable 标签时，我的代码显示为文本而不是实际元素。有没有办法让用户在内容可编辑的框中创建一个完整的、有效的 HTML 元素？我知道客户端可以使用 javascript 插入代码，但是无法访问 javascript 的用户怎么办？用户如何在内容可编辑的框中获取代码(例如按钮)？

<p contenteditable="true">Try typing code in here as user, code will only be text...</p>

有没有不用 JQUERY 的 javascript 方法来完成这个？

编辑

我花了很长时间在 Google 上搜索答案，但一无所获。我此时得到的最佳解决方案是@Dekel 对 CKEditor 的评论。如果有另一种解决方案，我想听听。如果没有，我会坚持使用 CKEditor。我没有太多时间，所以我需要快速解决方案。

更多编辑 =D

我最近通过查看@Brandon 的 .replace 答案(它只适用于客户端编码，不适用于用户编码)并修改它以使用用户编码来开发我自己的问题答案。

Answer 1

这不是很漂亮，但如果您只想添加 HTML，您可以让它工作。否则内联编辑器可能效果最好。

var el = document.querySelector('p')
el.addEventListener('blur', function() {
  var map = {amp: '&', lt: '<', gt: '>', quot: '"', '#039': "'"}
  var html = this.innerHTML.replace(/&([^;]+);/g, (m, c) => map[c]);
  this.innerHTML = html;
});

<p contenteditable="true">Try typing <b>code</b> in here as user, code will only be text...</p>