问题标签 [contenteditable]

我正在编写一些代码来在 contenteditable div 中查找用户选择，我从这篇 quirksmode 文章中获取我的代码。

我正在 Chrome 和 Firefox 中对其进行测试，如果我alert(userSelection)在函数内执行操作或在函数外执行 alert(findSelection();)，它会返回function getSelection() {[native code]}. 如果我这样做console.log(findSelection();)，它会给我getSelection()。是不是我做错了什么？

我只想有一个可编辑的 div，它的作用就像一个文本区域，专注于页面加载（即闪烁的光标可见，并且在 div 中显示键入，而无需用鼠标选择 div）。我试过在可编辑的 div 上调用 focus() ，但这不起作用。

我已经阅读了一些关于定位插入符号的帖子，但似乎没有一个回答我的特定问题。

1. 我有 2 个 div（div1和div2）
2. div1 = 不可编辑的 div
3. div2 = 内容可编辑的 div
4. 两个 div 包含完全相同的内容
5. 当用户点击div1时，它会被隐藏，并且div2会出现在确切的位置并且用户可以编辑

问题：我希望插入符号出现在 div2 上的确切位置作为 div1

所以，我需要一些方法来读取用户单击 div1 的位置，然后当 div2 出现时将光标/插入符号放在同一位置，因此getCaretLocation(in_div_id)和setCaretLocation(in_div_id)函数集。

有什么办法吗？

谢谢 -

我创建了一个可编辑的 div，我想用笑脸图像替换笑脸标志。

但是，每当我用 dom 元素（<img> 或 <span> 或其他...）替换字符串时，div 将停止可编辑（即，当我单击文本时可以看到插入符号，但不能向其中添加任何字符） .

这是怎么回事？（我在 Safari 中这样做）

这是我的代码：

我在我的 Web 应用程序中使用 contenteditable div 元素，我试图想出一个解决方案来限制该区域中允许的字符数量，一旦达到限制，尝试输入字符就什么也不做。这是我到目前为止所拥有的：

这确实将字符数限制为“max”指定的数量，但是一旦 jquery .text() 函数设置了区域的文本，光标就会将自身重置到区域的开头。因此，如果用户继续输入，新输入的字符将被插入到文本的开头，而文本的最后一个字符将被删除。所以真的，我只需要一些方法将光标保持在 contenteditable 区域文本的末尾。

问题的旧版本如下，经过更多研究，我决定改写这个问题。和以前一样的问题是，我需要在不突出显示文本的情况下聚焦一个 contenteditable div，直接向上聚焦会突出显示 Chrome 中的文本。

我意识到人们通过重置文本区域中的插入符号位置解决了文本区域中的这个问题。如何使用 contenteditable 元素做到这一点？我尝试过的所有插件都只适用于 textareas。谢谢。

问题的旧措辞：

我有一个我想要关注的 contenteditable 元素，但仅限于将光标放在元素的前面，而不是选择所有内容。

elem.trigger('focus');使用 jquery 选择 chrome 中整个元素中的所有文本。Firefox 行为正确，将插入符号设置在文本的前面。我怎样才能让 Chrome 以我想要的方式行事，或者可能不是我想要的焦点。

谢谢大家。

我有一个 contenteditable div，我需要在插入符号位置插入文本，

这可以通过 IE 在 IE 中轻松完成 document.selection.createRange().text = "banana"

在 Firefox/Chrome 中是否有类似的实现方式？

（我知道这里有一个解决方案，但它不能用于 contenteditable div，而且看起来很笨拙）

谢谢！

我如何（使用 jquery 或其他）在我的 contenteditable div 的光标/插入符号位置插入 html：

例如，如果光标/插入符号在“hello”和“world”之间，然后用户单击了一个按钮，例如“插入图像”，那么使用 javascript，<img src=etc etc>将在“hello”和“world”之间插入类似的东西。我希望我已经说清楚了=S

示例代码将不胜感激，非常感谢！

我正在 Firefox 中开发 Javascript WYSIWYG 编辑器。我正在使用将 contenteditable 属性设置为 true 的 div 来完成此操作（我不能为这个特定项目使用 contenteditable iframe）。此 contenteditable div 嵌套在另一个不可 contenteditable 的 div 中。我在使用 execCommand 应用格式时遇到以下两个问题，包括字体样式和大小，以及粗体、斜体和下划线：

• 当 div 中的所有文本都被选中时，execCommand 根本不起作用。execCommand 在仅选择部分文本时工作正常，但在选择所有文本时不执行任何操作。
• 在未选择文本的情况下应用格式会产生意想不到的结果。例如，在没有选择文本的情况下调用 execCommand('bold') 然后键入会导致键入粗体文本，直到插入空格键，此时粗体格式丢失（直到插入另一个空格，有趣的是；然后文本再次变为粗体）。

要明白我的意思，请尝试在 Firefox 3 中运行以下 HTML 代码：

请尝试以下方法：

• 仅选择“一些”一词。单击粗体按钮。正如预期的那样，这将使文本变为粗体。
• 选择整个短语“一些可编辑的文本”（手动或使用 CTRL-A）。单击粗体按钮。什么都没发生。这演示了上面显示的第一个错误。
• 按退格键清除 div。单击粗体按钮并开始输入。键入几个带空格的单词。这将演示第二个错误。

任何关于可能导致这些问题的原因以及如何解决这些问题的想法将不胜感激！

我<p contenteditable="true"></p>在一个页面上有多个元素。我正在寻找一种解决方案来使用箭头键在那些不相交的元素之间导航，就好像它们是一个可编辑的元素一样。

例如，如果插入符号位于第 1 段最后一行的第 10 个字符并且用户按下向下箭头键，则插入符号应该跳转到第 2 段并将插入符号放在第 10 个字符（如果有的话）在它的第一行。

感谢任何评论。