上一篇: javascript – 反应 – 在表单上... 下一篇:javascript – 懒惰的Highcharts...

javascript – 可信的文本编辑器和光标位置

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – 可信的文本编辑器和光标位置，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我怎么能(使用 jquery或其他)在我的contenteditable div的光标/插入位置插入html：

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

例如,如果光标/插入符号位于“Hello”和“world”之间,则用户单击按钮,例如“插入图像”,然后使用javascript,类似于< img src = etc etc>等.将插入“你好”和“世界”之间.我希望我已经明确表示= s.

非常感谢示例代码,非常感谢！

解决方法

以下函数将在所有主流桌面浏览器的光标位置插入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,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);
    }
}