内容可编辑与输入替换答案

【问题标题】：Contenteditable vs input replacement内容可编辑与输入替换
【发布时间】：2012-05-31 01:12:47
【问题描述】：

我正在开发一个应用程序，该应用程序将列出您之前保存的数据。如果您有错字、最初没有输入所有数据点等，您将有机会编辑数据块。

现在我有 javascript 获取给定块中每个元素的值（通过 php 中的 foreach 循环使用来自服务器的数据创建），将其保存到一个对象，然后将这些元素 (<p>) 替换为textarea 输入然后用之前抓取它的 js 对象中的数据填充它。

对于一个我在从动态内容中转义引号时遇到问题，但感觉这可能不是最优雅的解决方案。

内容可编辑。

基本上：我应该走那条路，只在点击“编辑”按钮时使数据块中的每个元素 contenteditable='true' 还是浏览器支持太可疑？

我目前的课程是一个可靠的计划吗？

或者是否有第三个（第四个、第五个等）选项？

谢谢！

【问题讨论】：

【解决方案1】：

除非您特别需要用户编辑 HTML 内容（或进行复杂的语法高亮等），否则请使用 input/textarea 解决方案。更清洁，更轻巧，更容易做。 Contenteditable 很快就会变得复杂，使用 tinyMCE 或类似的东西可能会有点过头了。

【讨论】：

我不需要像 tinyMCE 这样强大的东西。基本上，当用户点击“编辑”按钮时，他们需要能够编辑文本——简单的文本；没有 html，没有样式等——此时 contenteditable 可能不会变得太复杂。我目前的解决方案感觉很复杂，而且肯定看起来或感觉不轻。
输入元素还有 3 个优点。它在移动浏览器中受支持，它在视觉上更容易被识别为可编辑元素，您不必手动处理用户粘贴/拖放内容来剥离 HTML，输入元素会自动执行，但 contenteditable 不会。最后一个是用于 UX，因为如果用户从某个地方将 h1 标题复制到其中，您可能会得到一个无法使用的 contenteditable div/p。
contenteditable 的特点是它在新行上插入 html 标签。不同的浏览器插入不同的标签（例如'
'、'
'、'

'）查看详情here

【解决方案2】：

如果您使用过 JSfiddle，您就会知道 contentedible 的效果如何。这就是他们使用的。如果需要，可以使用 jQuery 插件来突出显示语法（Snippet、jquery-syntaxhighlighter）。

【讨论】：