js編輯器--主要實現（獲得光標位置）（獲得選中文本）

1.判斷光標是否選中文本

// 獲取選中文本
        getSelectedText() {
            if (window.getSelection) {
                return window.getSelection().toString();
            } else if (document.selection) {
                //ie瀏覽器兼容
                return document.selection.createRange().text;
            }
            return '';
        },

2.獲得富文本框中光標的位置

//我項目中這么寫的
this.range = window.getSelection().getRangeAt(0);

//網上搜的兼容寫法
function getCursortPosition(element) {
    var doc = element.ownerDocument || element.document; var win = doc.defaultView || doc.parentWindow; var sel; if (typeof win.getSelection != "undefined") { sel = win.getSelection(); if (sel.rangeCount > 0) { var range = win.getSelection().getRangeAt(0); console.log(range); } } return range; }

//element為富文本掛載的dom元素,返回的range為光標對應的位置

**如果調用range的insertNode方法，可以在光標對應的位置插入想要的dom元素，但是這里要注意的是，insertNode方法會把你插入的dom元素，里面父子關系的節點元素循環成兄弟節點插入到光標位置。
//https://www.cnblogs.com/xzhwill19900525/p/8608996.html

 3.項目編輯器主要插入實現：

 insertMethod(clickEvent) {
            if (window.getSelection().type == 'None') {
                console.log('頁面編輯器中沒有光標的時候', window.getSelection().type);
                return;
            }if (this.clickArea <= 0) {
                console.log('光標不在富文本中，不做處理');
                return;
            }if (document.querySelector('#insertBlock')) return;
　　　　　　　　//獲取光標位置，存在range中
            this.range = window.getSelection().getRangeAt(0);

            if (this.getSelectedText().trim()) {
                console.log('此時有選中文本，划選插入');
                var cloneCotext = this.range.cloneContents().children;
                var newArr = [];
                var childrenNodes = [];
                if (cloneCotext.length) {
                    for (var i in cloneCotext) {
                        newArr.push(cloneCotext[i]);
                        if (cloneCotext[i].childNodes?.length) {
                            console.log(cloneCotext[i].childNodes);
                            Object.assign(childrenNodes, cloneCotext[i].childNodes);
                        }
                    }
                }
                let re = newArr.some(item => {
                    return item.tagName == 'ACTION';
                });
                let rechild = childrenNodes.some(item => {
                    return item.tagName == 'ACTION';
                });
                if (re || rechild) {
                    this.$message.error('划選內容非法，請重新選擇');
                    return false;
                }
                document.getElementById('editorContainer').focus();
　　　　　　　　　　//選中文本存在selectedText中
                this.selectedText = this.getSelectedText().trim();

                let domB = document.createElement('b');
                domB.setAttribute('id', 'insertBlock');
                domB.setAttribute('style', 'background:green;width:5px;height: 1.75em;display: inline-block;');
                let domSpan = document.createElement('i');
                domSpan.setAttribute('id', 'inertSelect');
                domSpan.appendChild(this.range.extractContents());
                this.range.insertNode(domB);
                this.range.insertNode(domSpan);
                insertContClick.style.zIndex = -1;
　　　　　　　　　　//顯示划選選擇框
                this.setSelectStyle(clickEvent.clientX, clickEvent.clientY);
            } else {
                document.getElementById('editorContainer').focus();
                console.log('沒有選擇文本，是點插入', this.range.startContainer);

                let domB = document.createElement('b');
                domB.setAttribute('id', 'insertBlock');
                domB.setAttribute('style', 'background:green;width:5px;height: 1.75em;display: inline-block;');
                this.range.insertNode(domB);

                insertContSelect.style.zIndex = -1;
　　　　　　　　　　//顯示點選擇框
                this.setClickStyle(clickEvent.clientX, clickEvent.clientY);
            }
        },

 參考文獻：

　　1.js 獲取選中內容中含有的html標簽   https://www.jianshu.com/p/1eb037b300e8

　　2.getSelection、range 對象屬性，方法理解，解釋  

　　3.一步步教你實現富本文編輯器（第一部分）