javascript - 如何允许用户编辑 HTML 标签内的格式化文本？

Question

我正在构建一个应用程序，我希望用户能够查看<p></p>元素中的现有字符串，mouseover在文本上对其进行编辑，并在mouseout.

现在我正在用 Javascript<p>替换<textarea>. <textarea>我通过将其设置innerHTML为<p>元素来填充。除了文本显示为 HTML 而不是格式化文本之外，这很好用。

因此，例如，用户可能输入了以下内容：

"An old silent pond...
A frog jumps into the pond,
splash! Silence again."

然后到了编辑文本的时候，它会显示为：

"An old silent pond...<br>A frog jumps into the pond,<br>splash! Silence again."

有没有办法确保显示的编辑内容是解释的 HTML / 格式化文本而不是原始 HTML？我确实需要解释格式 - 我不想只是去掉 HTML 标签。

PS：我认为这textarea是创建一个窗口来编辑一些文本的正确方法，但我不喜欢它。

score 3 · Accepted Answer

听起来您希望能够在查看和保留格式的同时编辑文本？这不是可以简单地完成的事情<textarea>——你可能想看看所见即所得的编辑器，比如TinyMCE或CKEditor

另一种可能性是 HTML5 contenteditable属性，以及支持 HTML5 之前的浏览器的 javascript polyfill。

有关保存部分中所做更改的基本建议，请参阅存储更改contenteditable，或在网络上搜索save contenteditable changes有关该主题的许多文章。

此外，使用 HTML5 属性“contenteditable”创建 WYSIWYG 将逐步构建一个简单的编辑器（现在使用普通丑陋的按钮！）

score 1 · Accepted Answer

如果可用，设置textContent而不是innerHTML.

textarea.textContent = p.innerHTML;

如果您需要支持 IE8，请使用innerTextif textContentis not there。

编辑：正如@RobG 所指出的，使用.value代替以.textContent获得更好的兼容性。

score 0 · Accepted Answer

textarea 元素的内容不会被解析为 HTML。有许多基于 HTML 的编辑器可用，Google 是您的朋友。

textarea 元素的内容就是它的值。HTML 规范没有为 textarea 元素定义 innerHTML、textContent 或 innerText 属性，因此您应该使用 value 属性来访问该值。

3 回答 3