问题标签 [contenteditable]

我想创建一个文本输入，如 Facebook 状态更新发布者。基本上，可以使用某个键（例如：@）激活标记/自动完成功能的输入，创建在文本输入中充当单个字符的标签（可以使用单个退格键删除），但仍接受常规文本输入. 与 Facebook 不同，我只想接受一个这样的“标签”，并且只在输入的开头接受它。

似乎最可行的选择（使用 jQuery）是一个 contenteditable div。但是，我不知道从那里如何处理 jQuery。任何人都可以帮助我开始吗？谢谢。

可编辑的状态

所见即所得编辑器生成的标记非常糟糕。它充满了样式属性，通常甚至不是有效的 HTML（缺少结束标签、重叠样式等）。是否有任何既定的解决方案来解决由 引入的问题contenteditable？如果没有，我该如何创建一个？

无效的 HTML

例如，在一个流行的富文本编辑器中输入一个无序列表和一行文本后，我会看到以下 HTML：

div标签是从哪里来的？为什么不关门？为什么不是一个段落——当然是正确关闭的？这可以预防吗？

非语义 HTML

另一位编辑制作了以下内容：

这是有效的标记，但它在语义上很糟糕！编辑器插入了文字项目符号而不是样式化的无序列表。作为开发人员，我不知道如何处理生成的标记contenteditable。就造型而言，它完全没用。

换人

直到最近，我一直在使用 Markdown 作为从用户那里生成语义正确的 HTML 的工具。但是，Markdown 缺少我的用户所要求的某些功能（非技术人员的易用性、图像定位等）。在寻找了一个所见即所得的编辑器，它可以在几周内产生有效的语义标记，我发现这contenteditable使得这变得不可能。有人在谈论这些问题的解决方案吗？我怎么能参与进来。

[更新] 澄清

我想我之前并没有完全清楚。我不是在寻求解决contenteditable问题的方法。我找到了很多，包括下面提到的大部分。我试图找到的是这些问题的根本原因。为什么contenteditable这么破？是因为技术问题还是遗留代码问题？此外，正在采取什么措施来修复它，这项工作在哪里完成？

[更新]谷歌文档

上面第二个示例中的 HTML 来自 Google 文档编辑器。但是，正如AlfonsoML在下面指出的那样，Google Docs 并没有contenteditable在他们的编辑器中使用。他们的技术在这里解释。

我contentEditable在我的网站上使用 div 标签，并且在使用 Firefox 时发现了一个奇怪的问题。

这是示例源代码：

以下是重现的步骤。

1. contentEditable有焦点，光标在 div 中闪烁，但 div 中没有文本
2. 用户点击contentEditable div
3. div 仍然显示焦点，但现在没有闪烁的光标，用户无法在 div 中输入输入

我用 Ubuntu 上的 Firefox 3.6.3 和 Windows XP 上的 Firefox 3.5 重现了这个错误。Chrome不会发生这种情况。

关于为什么会发生这种情况以及如何解决它的任何想法？

编辑：一种可能的解决方法可能是手动设置光标所在的位置。有谁知道如何做到这一点？我一直在网上搜索，但似乎没有任何 W3 支持。

谢谢！

我有这个简单的 HTML：

它显示了两个输入框。当我在第二个输入框中输入一些内容，然后在行的最开头（按 Home 键），然后按 Backspace，文本会在第一个输入框的末尾跳转……我运行最新的 Firefox。

为什么文本没有按预期保留在其框中？

我想知道如何识别在可编辑的 div 上插入的字符...我想查看用户是否键入了单引号或双引号，并将此引号的特定类赋予引号后的文本...我认为这是一个关键的财产或回报......我不知道......

有人有小费吗？

我有一个 div 设置contentEditable并使用“”设置样式，white-space:pre因此它保留了换行符之类的东西。在 Safari、FF 和 IE 中，div 的外观和工作方式几乎相同。一切都很好。我想要做的是从这个 div 中提取文本，但不会丢失格式——特别是换行符。

我们使用的是 jQuery，它的text()功能基本上是进行预排序 DFS，并将 DOM 分支中的所有内容粘合到一个块中。这会丢失格式。

我查看了该函数，但似乎所有三个浏览器都使用在我的divhtml()幕后生成的实际 HTML 执行不同的操作。contentEditable假设我在我的 div 中输入这个：

这些是结果：

野生动物园 4：

火狐 3.6：

即 8：

啊。这里没有什么非常一致的。令人惊讶的是，MSIE 看起来最理智！（大写的 P 标签和所有）

div 将具有使用 CSS 完成的动态设置样式（字体、颜色、大小和对齐方式），所以我不确定是否可以使用pre标签（在我使用 Google 找到的某些页面上提到过）。

有谁知道任何 JavaScript 代码和/或 jQuery 插件或可以从 contentEditable div 中提取文本以保留换行符的东西？如果不需要的话，我宁愿不要重新发明解析轮。

更新：我抄袭了getTextjQuery 1.4.2 中的函数并对其进行了修改，以将其提取为几乎完整的空白（我只更改了添加换行符的一行）；

我调用此函数并使用其输出将其分配给带有 jQ​​uery 的 XML 节点，例如：

生成的 XML 最终通过 AJAX 调用发送到服务器。

这在 Safari 和 Firefox 中运行良好。

在 IE 上，似乎只有第一个 '\n' 以某种方式被保留。仔细研究一下，看起来 jQuery 正在像这样设置文本（jQuery-1.4.2.js 的第 4004 行）：

继续阅读createTextNode，看来 IE 的实现可能会混搭空白。这是真的还是我做错了什么？

我正在使用具有 contentEditable 属性的 div 来满足我作为扩展文本字段的简单、跨浏览器解决方案的需求，但我遇到了一个有趣的问题。

这是 div ：

这是我在 jquery 中抓取它的地方：

在大多数情况下，这会返回用户在 div 中输入的任何内容，但是当他们开始在 div 中粘贴内容时会发生奇怪的事情。

例如，当您从 Word 粘贴时，它会在浏览器中正确显示文本，但会在 div 中添加额外的 html 代码。当我从 word 中粘贴诸如“bob@aol.com”之类的电子邮件地址时，这是它真正插入到 html 中的代码：

这在尝试获取用户粘贴的简单文本时会产生问题，因为它还会抓取 html 代码，从而难以正确解析。

有没有办法限制用户可以粘贴到 div 中的内容？或者只是让它只能插入简单的文本？

我意识到浏览器检测通常不是一个好主意，但是由于每个浏览器都有不同的 contenteditable 实现，我需要一种方法来为每个浏览器分离出我的修复程序。

具体来说：

gecko 和 webkit 要求<br />在空段落的末尾插入 a，否则它们会被自动删除。

ie 和 opera 将其<br />视为普通<br />并插入换行符。

我需要一种方法来判断要使用哪个浏览器或至少要使用哪个实现。

请你能帮我找到一个方法吗？

谢谢，尼科

当我在启用了“contentEditable”标志的任何元素中粘贴任何文本时，IE 会自动找到超链接或电子邮件地址并将其替换为

如何在 IE 中禁用带有“contentEditable”标志的元素（例如 div、span 等）的自动 url 检测，或者至少获取粘贴在 div 中的实际文本。

最好的问候，
凯沙夫

我的一些 css/javascript 似乎有问题。我似乎无法让 contentEditable 在我的 web 应用程序中工作。这篇文章的答案启发了我尝试这种方法。

我在这里测试了我的浏览器，它工作正常。

是否有任何我应该注意的可能导致它不起作用的 CSS 规则？我可以选择对象（它突出显示 div），但我不能编辑/附加/删除对象中的任何文本。

我也确保document.designMode = "on"

不幸的是，它是一个内部应用程序，所以我无法获得每个人都可以尝试的链接。

--EDIT--
按要求截取代码

部分 CSS 参数是由 chrome 报告的：