Contenteditable 文本编辑器和光标位置答案

【问题标题】：Contenteditable text editor and cursor positionContenteditable 文本编辑器和光标位置
【发布时间】：2011-02-25 15:34:40
【问题描述】：

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

<div contenteditable="true">Hello world</div>

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

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

【问题讨论】：

标签： javascript jquery html contenteditable

【解决方案1】：

以下函数将在所有主流桌面浏览器的光标位置插入一个DOM节点（元素或文本节点）：

function insertNodeAtCursor(node) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            sel.getRangeAt(0).insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

如果您更愿意插入 HTML 字符串：

function insertHtmlAtCursor(html) {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            node = range.createContextualFragment(html);
            range.insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(html);
    }
}

我已经根据我对类似问题的回答改编了这个：How to find cursor position in a contenteditable DIV?

【讨论】：

【解决方案2】：

对于contenteditable，您应该使用execCommand。

试试document.execCommand('insertImage', false, 'image.jpg') 或document.execCommand('insertHTML', false, '<img src="image.jpg" alt="" />')。第二个在旧版 IE 中不起作用。

【讨论】：

谢谢 - 在 Chrome 中效果很好。我必须使用 insertHTML 才能将 alt 标签添加到图像中；插入图片失败。
@Znarkus，这不适用于 iOS 应用程序的 Safari。它不会在光标位置插入包含图像标签或附件的 html 字符串。你能提出一些解决方案吗？

【解决方案3】：

在这段代码中，我只是将 html 代码替换为 (") 到 (')

使用这个语法：

$("div.second").html("your html code and replace with (")to(')  ");

【讨论】：

【解决方案4】：

我会推荐使用jquery插件a-tools

这个插件有七个功能：

* getSelection – return start, end position, length of the selected text and the selected text. return start=end=caret position if text is not selected;
* replaceSelection – replace selected text with a given string;
* setSelection – select text in a given range (startPosition and endPosition);
* countCharacters – count amount of all characters;
* insertAtCaretPos – insert text at current caret position;
* setCaretPos – set cursor at caret position (1 = beginning, -1 = end);
* setMaxLength – set maximum length of input field. Also provides callback function if limit is reached. Note: The function has to have a number as input. Positive value for setting of limit and negative number for removing of limit.

您需要的是 insertAtCaretPos：

$("#textarea").insertAtCaretPos("<img src=etc etc>");

可能有一个缺点：此插件仅适用于 textarea en input:text 元素，因此可能与 contenteditable 发生冲突。

【讨论】：

“可能有一个缺点：此插件仅适用于 textarea en input:text 元素，因此可能与 contenteditable 发生冲突。” 你说得对。它根本不起作用。