diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor2/MgEditor.vue b/zyplayer-doc-ui/wiki-ui/src/components/editor2/MgEditor.vue index f9a4db02..2fafa044 100644 --- a/zyplayer-doc-ui/wiki-ui/src/components/editor2/MgEditor.vue +++ b/zyplayer-doc-ui/wiki-ui/src/components/editor2/MgEditor.vue @@ -89,52 +89,42 @@ let selectionRange = window.getSelection().getRangeAt(0); let selectText = selectionRange.toString(); if (!!selectText) { - let isOneDom = selectionRange.startContainer == selectionRange.endContainer; let startNode = toolbarCommon.getRootDom(selectionRange.startContainer); - let index = startNode.getAttribute("index"); - if (index >= 0) { + let endNode = toolbarCommon.getRootDom(selectionRange.endContainer); + let startIndex = parseInt(startNode.getAttribute("index")); + let endIndex = parseInt(endNode.getAttribute("index")); + let isOneDom = startIndex == endIndex; + if (startIndex >= 0) { let startOffset = selectionRange.startOffset; let previousSibling = toolbarCommon.getRealElem(selectionRange.startContainer).previousSibling; for (; previousSibling;) { startOffset += previousSibling.innerText.length; previousSibling = previousSibling.previousSibling; } - let domTemp = this.editorDom[index]; + let domTemp = this.editorDom[startIndex]; let endOffset = isOneDom ? selectionRange.endOffset : domTemp.text.length; + let endPreviousSibling = toolbarCommon.getRealElem(selectionRange.endContainer).previousSibling; + for (; endPreviousSibling;) { + endOffset += endPreviousSibling.innerText.length; + endPreviousSibling = endPreviousSibling.previousSibling; + } domTemp.setOffset(startOffset, endOffset); } if (!isOneDom) { + for (let i = startIndex + 1; i < endIndex; i++) { + this.editorDom[i].setOffsetAll(); + } let endOffset = selectionRange.endOffset; let previousSibling = toolbarCommon.getRealElem(selectionRange.endContainer).previousSibling; for (; previousSibling;) { endOffset += previousSibling.innerText.length; previousSibling = previousSibling.previousSibling; } - let endNode = toolbarCommon.getRootDom(selectionRange.endContainer); - let index = endNode.getAttribute("index"); - if (index >= 0) { - let domTemp = this.editorDom[index]; + if (endIndex >= 0) { + let domTemp = this.editorDom[endIndex]; domTemp.setOffset(0, endOffset); } } - // let documentFragment = selectionRange.cloneContents(); - // let childNodesLen = documentFragment.childNodes.length; - // if (childNodesLen > 2) { - // for (let i = 1; i < childNodesLen - 1; i++) { - // let childNode = documentFragment.childNodes[i]; - // let index = childNode.getAttribute("index"); - // if (index >= 0) { - // let domTemp = this.editorDom[index]; - // if (i == 0) { - // domTemp.setOffset(selectionRange.startOffset, domTemp.text.length); - // } else if (i == childNodesLen - 1) { - // domTemp.setOffset(0, selectionRange.endOffset); - // } else { - // domTemp.setOffsetAll(); - // } - // } - // } - // } this.editorToolbarStyle.display = 'block'; } // console.log("mouseup", selectText, e); @@ -166,12 +156,28 @@ this.editorCursorStyle.height = computedStyle.fontSize; this.editorCursorStyle.display = 'block'; // 设置光标所在对象的位置 - let range = window.getSelection().getRangeAt(0); - this.editorRange.startOffset = range.startOffset; - this.editorRange.endOffset = range.endOffset; - // 没展示出来时不能获取焦点 - let selectText = window.getSelection().getRangeAt(0).toString(); - if (!selectText) { + let selectionRange = window.getSelection().getRangeAt(0); + let startNode = toolbarCommon.getRootDom(selectionRange.startContainer); + let endNode = toolbarCommon.getRootDom(selectionRange.endContainer); + let startIndex = startNode.getAttribute("index"); + let endIndex = endNode.getAttribute("index"); + if (startIndex != endIndex) { + return; + } + let startOffset = selectionRange.startOffset; + let previousSibling = toolbarCommon.getRealElem(selectionRange.startContainer).previousSibling; + for (; previousSibling; previousSibling = previousSibling.previousSibling) { + startOffset += previousSibling.innerText.length; + } + let endOffset = selectionRange.endOffset; + let endPreviousSibling = toolbarCommon.getRealElem(selectionRange.endContainer).previousSibling; + for (; endPreviousSibling; endPreviousSibling = endPreviousSibling.previousSibling) { + endOffset += endPreviousSibling.innerText.length; + } + this.editorRange.startOffset = startOffset; + this.editorRange.endOffset = endOffset; + console.log(startOffset, endOffset); + if (startOffset == endOffset) { setTimeout(() => this.userInput.focus(), 50); } }, diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/dom.js b/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/dom.js index a847a0e9..83605fe5 100644 --- a/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/dom.js +++ b/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/dom.js @@ -62,55 +62,41 @@ Dom.prototype = { if (this.startOffset < 0 || this.endOffset < 0 || this.startOffset == this.endOffset) { return; } - let styleRangeNew = []; - // 拆分 - for (let i = 0; i < this.styleRange.length; i++) { - let item = this.styleRange[i]; - // 全选 前面 中间 后面 全包含 - if (this.startOffset == item.start && this.endOffset == item.end) { - item.addClass(cls); - styleRangeNew.push(item); - } else if (this.startOffset == item.start && this.endOffset < item.end) { - styleRangeNew.push(new StyleRange(this.startOffset, this.endOffset, item.cls + ' ' + cls)); - styleRangeNew.push(new StyleRange(this.endOffset, item.end, item.cls)); - } else if (this.startOffset > item.start && this.endOffset < item.end) { - styleRangeNew.push(new StyleRange(item.start, this.startOffset, item.cls)); - styleRangeNew.push(new StyleRange(this.startOffset, this.endOffset, item.cls + ' ' + cls)); - styleRangeNew.push(new StyleRange(this.endOffset, item.end, item.cls)); - } else if (this.startOffset > item.start && this.endOffset >= item.end) { - styleRangeNew.push(new StyleRange(0, this.startOffset, item.cls)); - styleRangeNew.push(new StyleRange(this.startOffset, item.end, item.cls + ' ' + cls)); - } else if (this.startOffset <= item.start && this.endOffset >= item.end) { - if (this.startOffset < item.start) { - styleRangeNew.push(new StyleRange(this.startOffset, item.start, cls)); - } - item.addClass(cls); - styleRangeNew.push(item); - if (this.endOffset > item.end) { - styleRangeNew.push(new StyleRange(item.end, this.endOffset, cls)); - } - } else { - styleRangeNew.push(item); - } + // 添加新的分区 + let styleRangeNew = [].concat(this.styleRange); + styleRangeNew.push(new StyleRange(this.startOffset, this.endOffset, cls)); + let textStyleArr = []; + let textLen = this.text.length; + for (let i = 0; i < textLen; i++) { + textStyleArr[i] = ''; } - if (styleRangeNew.length <= 0) { - styleRangeNew.push(new StyleRange(this.startOffset, this.endOffset, cls)); - } - styleRangeNew.sort((val1, val2) => val1.start - val2.start); - // 合并同一个范围内样式表重叠的 - let styleRangeLast = []; - let len = styleRangeNew.length; - for (let i = 0; i < len; i++) { + // 所有范围值拆分到每个字 + let rangeLen = styleRangeNew.length; + for (let i = 0; i < rangeLen; i++) { let item = styleRangeNew[i]; - for (let j = i + 1; j < len; j++, i++) { - let itemNext = styleRangeNew[j]; - if (!item.classSameAll(itemNext)) break; - item.start = Math.min(item.start, itemNext.start); - item.end = Math.max(item.end, itemNext.end); + for (let j = item.start; j < item.end && j < textLen; j++) { + textStyleArr[j] += ' ' + item.cls; } - styleRangeLast.push(item); } - this.styleRange = styleRangeLast; + // 去重再排序,获取排序后的字符串 + for (let i = 0; i < textLen; i++) { + if (!!textStyleArr[i]) { + let clsSet = new Set(textStyleArr[i].split(" ")); + textStyleArr[i] = Array.from(clsSet).sort((val1, val2) => val1 - val2).join(" "); + } + } + // 合并同一个范围内样式表重叠的 + let styleRangeMerged = []; + for (let i = 0; i < textLen; i++) { + if (!!textStyleArr[i]) { + let start = i; + for (let j = i + 1; j < textLen; j++, i++) { + if (textStyleArr[i] !== textStyleArr[j]) break; + } + styleRangeMerged.push(new StyleRange(start, i + 1, textStyleArr[i])); + } + } + this.styleRange = styleRangeMerged; this.startOffset = this.endOffset = -1; this.computerStyleRangeToDom(); }, diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/styleRange.js b/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/styleRange.js index 988cf7b5..7e3eadef 100644 --- a/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/styleRange.js +++ b/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/styleRange.js @@ -27,6 +27,9 @@ StyleRange.prototype = { this.clsSet.add(cls); this.cls = Array.from(this.clsSet).join(" "); }, + getSortClass() { + return Array.from(this.clsSet).sort((val1, val2) => val1 - val2).join(" "); + }, classSameAll(compare) { if (compare.clsSet.size != this.clsSet.size) return false; let values = Array.from(compare.clsSet);