chrome 下iframe编辑器换行

最新推荐文章于 2017-10-18 16:10:09 发布

wjlotus

最新推荐文章于 2017-10-18 16:10:09 发布

阅读量509

点赞数

CC 4.0 BY-SA版权

分类专栏： js积累

本文链接：https://blog.youkuaiyun.com/wjlotus/article/details/50465795

js积累专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种利用JavaScript在HTML文档中精确插入元素的方法，包括如何创建新的节点、删除选区内容并替换为新元素，同时保持光标位置不变。此方法适用于富文本编辑器等场景。

function insertElements(nodes, isSlient) {
        // 获取选区
        var selection = editorWin.getSelection();
        var range = selection.getRangeAt(0);
        // 删除选区内容
        range.deleteContents();
        // 插入内容
        range.insertNode(nodes);
        // 这个参数如果插入表情等使用，默认无
        if (!isSlient) {
            range = document.createRange();
            range.setStartAfter(nodes);
            range.collapse(true);
            selection.removeAllRanges();
            selection.addRange(range);
        }
        return;
    }

               // 定义第一个br用来换行
                            var node = document.createElement('br');
                            insertElements(node);
                            node = node.nextSibling;
                            while (node && node.nodeType == 3 && !node.nodeValue) {
                                node = node.nextSibling;
                            }
                            // 插入两个br，再次输入内容后，br会被内容代替
                            if (!node) {
                               insertElements(document.createElement('br'));
                            }