html 富文本编辑器相关--向编辑器内部插入文字图片等各种dom元素通用方法

最新推荐文章于 2022-03-27 03:12:08 发布

annuobin1120

最新推荐文章于 2022-03-27 03:12:08 发布

阅读量522

点赞数

原文链接：http://www.cnblogs.com/WhiteHorseIsNotHorse/p/6705428.html

版权

有问题的插入方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>#edit{height:500px;width:500px;border:1px solid red;}</style>
</head>
<body>
<div id="edit" contenteditable></div>
<input type="text" id="emojiInput">
<button id="sendEmoji">发送表情</button>

<script>
    var sendEmoji = document.getElementById('sendEmoji')

    // 定义最后光标对象
    var lastEditRange;

    // 编辑框点击事件
    document.getElementById('edit').onclick = function() {
        // 获取选定对象
        var selection = getSelection()
        // 设置最后光标对象
        lastEditRange = selection.getRangeAt(0)
    }

    // 编辑框按键弹起事件
    document.getElementById('edit').onkeyup = function() {
        // 获取选定对象
        var selection = getSelection()
        // 设置最后光标对象
        lastEditRange = selection.getRangeAt(0)
    }

    // 表情点击事件
    document.getElementById('sendEmoji').onclick = function() {
        // 获取编辑框对象
        var edit = document.getElementById('edit')
        // 获取输入框对象
        var emojiInput = document.getElementById('emojiInput')
        // 编辑框设置焦点
        edit.focus()
        // 获取选定对象
        var selection = getSelection()
        // 判断是否有最后光标对象存在
        if (lastEditRange) {
            // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
            selection.removeAllRanges()
            selection.addRange(lastEditRange)
        }
        // 判断选定对象范围是编辑框还是文本节点
        if (selection.anchorNode.nodeName != '#text') {
            // 如果是编辑框范围。则创建表情文本节点进行插入
            var emojiText = document.createTextNode(emojiInput.value)

            if (edit.childNodes.length > 0) {
                // 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点
                for (var i = 0; i < edit.childNodes.length; i++) {
                    if (i == selection.anchorOffset) {
                        edit.insertBefore(emojiText, edit.childNodes[i])
                    }
                }
            } else {
                // 否则直接插入一个表情元素
                edit.appendChild(emojiText)
            }
            // 创建新的光标对象
            var range = document.createRange()
            // 光标对象的范围界定为新建的表情节点
            range.selectNodeContents(emojiText)
            // 光标位置定位在表情节点的最大长度
            range.setStart(emojiText, emojiText.length)
            // 使光标开始和光标结束重叠
            range.collapse(true)
            // 清除选定对象的所有光标对象
            selection.removeAllRanges()
            // 插入新的光标对象
            selection.addRange(range)
        } else {
            //debugger;
            // 如果是文本节点则先获取光标对象
            var range = selection.getRangeAt(0)
            // 获取光标对象的范围界定对象，一般就是textNode对象
            var textNode = range.startContainer;
            // 获取光标位置
            var rangeStartOffset = range.startOffset;
            // 文本节点在光标位置处插入新的表情内容
            textNode.insertData(rangeStartOffset, emojiInput.value)
            // 光标移动到到原来的位置加上新内容的长度
            range.setStart(textNode, rangeStartOffset + emojiInput.value.length)
            // 光标开始和光标结束重叠
            range.collapse(true)
            // 清除选定对象的所有光标对象
            selection.removeAllRanges()
            // 插入新的光标对象
            selection.addRange(range)
        }
        // 无论如何都要记录最后光标对象
        lastEditRange = selection.getRangeAt(0)
    }
</script>
</body>
</html>

View Code

插入时应该考虑的问题，

第一原来容器内有文本内容，现在在文本内容中间插入dom元素，以上方法未解决，

第二插入后定位到新插入的元素的位置

另附：上面方法最有价值的地方在于定义全局唯一range 和selection 对象，在每次变化时候记录下最新的range和selection

　　 变化的时候包括

　　　　　　1） blur 事件 2） onclick 事件 3） onkeyup 事件 --这些事件都有可能会改变光标位置

　　　　　　4）代码触发时候  比如 用代码向输入框内插入一些节点时候 这时候应该也要记录最新的selection 和range

ok的方案

/**
 * 在输入区插入各种东东通用
 * @param html
 */
function insertImg(html) {
    var dthis = $("#input-content")[0];
    var sel = getSelection();
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var el = document.createElement('div');
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node);
            }

            range.insertNode(frag);
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();

                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != 'Control') {
        $(dthis).focus(); // 在非标准浏览器中 要先让你需要插入html的div 获得焦点
        ierange = document.selection.createRange();// 获取光标位置
        ierange.pasteHTML(html); // 在光标位置插入html 如果只是插入text 则就是fus.text="..."
        $(dthis).focus();
    }
}

转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6705428.html

annuobin1120

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html 富文本编辑器相关--向编辑器内部插入文字图片等各种dom元素通用方法

有问题的插入方案<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style>#edit{height:500px;width:500px;bo...
复制链接

扫一扫