将带有多个引号的html代码插入textarea

Question

我在这里检查了所有相关问题，但没有找到可以解决我的问题的东西。

我有一个文本区域输入元素，用于电子邮件消息。我需要一个按钮，这样当你点击它时，它会从数据库中插入一个模板（页眉/页脚有很多 html 标签，如 body、table、div 等）。因此，它应该在单击按钮后呈现此 html 代码，以便用户可以立即看到模板应用的结果（图像、格式等）。

首先，当我尝试通过 innerHTML 放置它时，它不会更改 textarea 本身（它保持为空）。当我尝试通过 value 属性插入它时，它会按原样插入代码（即不渲染）。 其次，我这段html代码中有很多不同的引号，无法提前知道具体的位置等等。那么如何正确插入这样一段html代码呢？

有人可以帮我完成这项任务吗？

Answer 1

听起来像是contenteditable 的工作：

document.querySelector('button').addEventListener('click', function() {
  document.querySelector("div[contenteditable]").innerHTML += `<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">`;
})

div {
  border: 1px solid;
}

<div contenteditable="true">

</div>
<br/>
<button>Insert template</button>