可编辑div问题总结（光标，显示等）

背景：需要编写一个简单的文本输入框，要求可以添加超链接，并且超链接可以修改内容，超链接在文本框中只显示标题（类似在html中显示a标签一样）
目前的基于vue框架：

html:

<div 
ref="myeditor" 
contenteditable="true" 
class="myeditor" 
v-html="text.textarea" 
@click="editlink($event)" 
@input="myeditorChange"
@keypress.enter="myeditorenter($event)"  // 监听回车
@blur="myeditorblur">
</div>

contenteditable属性可以把div变成可编辑状态，这是开发文本编辑框的基础。添加该属性后基本是满足一般文本输入。

1.换车键问题：
在可编辑div回车会在文本框中添加div标签（也可能是p标签），所以需要在div中监控回车事件并取消默认事件

 myeditorenter(e) {
            e.preventDefault();
            RangeUtil.insertHtmlAtCaret('<br/>')  // 在当前光标插入文本
            // this.$refs.myeditor.innerHTML = this.$refs.myeditor.innerHTML+'<br/>'
        },

2.获取div的内容
需要使用this.$refs.myeditor.innerHTML来获取，text.textarea虽然绑定了值但实际是获取不到的，除非有进行手动赋值。

3.添加超链接
这里主要讲讲添加的方式，具体可根据需求来。
因为我这里是点击一个按钮打开弹框的方式来添加超链接，所以：

• 首先可以调用保存光标位置的方法保存失焦前的光标位置saveRange
• 在弹框中填写完所需要的内容后，调用基于之前保存光标插入内容的方法insertContent

这样能确保超链接是添加在你之前光标定位的地方，不然就会出现超链接只能添加在文本尾部的情况。

涉及光标的方法：

// 光标类方法
export const RangeUtil = {
    // 当前光标位置插入文本
    insertHtmlAtCaret: (html) => {
        let sel, range;
        if (window.getSelection) {
            // IE9 and non-IE
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                // Range.createContextualFragment() would be useful here but is
                // non-standard and not supported in all browsers (IE9, for one)
                let el = document.createElement("div");
                el.innerHTML = html;
                let frag = document.createDocumentFragment(), node, lastNode;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);
                // Preserve the selection
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE < 9
            document.selection.createRange().pasteHTML(html);
        }
    },
    // 保存光标位置
    saveRange: () => {
        let selection = window.getSelection ? window.getSelection() : document.selection;
        if (!selection.rangeCount) return;
        let range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
        window._range = range;
    },
    // 基于保存的光标插入内容
    insertContent(str) {
        let selection, range = window._range;
        if (!window.getSelection) {
            range.pasteHTML(str);
            range.collapse(false);
            range.select();
        } else {
            selection = window.getSelection ? window.getSelection() : document.selection;
            range.collapse(false);
            let hasR = range.createContextualFragment(str);
            let hasR_lastChild = hasR.lastChild;
            while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
                let e = hasR_lastChild;
                hasR_lastChild = hasR_lastChild.previousSibling;
                hasR.removeChild(e);
            }
            range.insertNode(hasR);
            if (hasR_lastChild) {
                range.setEndAfter(hasR_lastChild);
                range.setStartAfter(hasR_lastChild);
            }
            selection.removeAllRanges();
            selection.addRange(range);
        }  
    },