Question

我正在构建一个应用，我希望用户能够查看<p></p>元素中的现有字符串，mouseover对文本进行编辑，并查看编辑后的版本{ {1}}。

现在，我正在Javascript中使用mouseout替换<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是创建编辑某些文本的窗口的正确方法，但我并没有嫁给它。

Answer 1

听起来您希望能够在查看和保留格式的同时编辑文本？这不是可以在普通<textarea>中完成的事情 - 您可能希望查看所见即所得的编辑，例如TinyMCE或CKEditor

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

有关保存contenteditable部分所做更改的基本建议，请参阅Storing the Changes，或在网页上搜索有关此主题的许多文章的save contenteditable changes。

此外，Using the HTML5 attribute "contenteditable" to create a WYSIWYG逐步构建了一个简单的编辑器（现在使用简单丑陋的按钮！）

Answer 2

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

textarea.textContent = p.innerHTML;

如果您需要支持IE8，请在innerText不存在的情况下使用textContent。

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

Answer 3

textarea element的内容未解析为HTML。有很多基于HTML的编辑器，谷歌是你的朋友。

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