manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

编辑器2.0开发

Browse Source
This commit is contained in:
暮光：城中城
2020-06-13 22:51:29 +08:00
parent 61938a840f
commit fad50328b6
3 changed files with 72 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
zyplayer-doc-ui/wiki-ui/src/components/editor2/MgEditor.vue
View File

@@ -89,52 +89,42 @@
let selectionRange = window.getSelection().getRangeAt(0); let selectionRange = window.getSelection().getRangeAt(0);
let selectText = selectionRange.toString(); let selectText = selectionRange.toString();
if (!!selectText) { if (!!selectText) {
let isOneDom = selectionRange.startContainer == selectionRange.endContainer;
let startNode = toolbarCommon.getRootDom(selectionRange.startContainer); let startNode = toolbarCommon.getRootDom(selectionRange.startContainer);
let index = startNode.getAttribute("index"); let endNode = toolbarCommon.getRootDom(selectionRange.endContainer);
if (index >= 0) { let startIndex = parseInt(startNode.getAttribute("index"));
let endIndex = parseInt(endNode.getAttribute("index"));
let isOneDom = startIndex == endIndex;
if (startIndex >= 0) {
let startOffset = selectionRange.startOffset; let startOffset = selectionRange.startOffset;
let previousSibling = toolbarCommon.getRealElem(selectionRange.startContainer).previousSibling; let previousSibling = toolbarCommon.getRealElem(selectionRange.startContainer).previousSibling;
for (; previousSibling;) { for (; previousSibling;) {
startOffset += previousSibling.innerText.length; startOffset += previousSibling.innerText.length;
previousSibling = previousSibling.previousSibling; previousSibling = previousSibling.previousSibling;
} }
let domTemp = this.editorDom[index]; let domTemp = this.editorDom[startIndex];
let endOffset = isOneDom ? selectionRange.endOffset : domTemp.text.length; 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); domTemp.setOffset(startOffset, endOffset);
} }
if (!isOneDom) { if (!isOneDom) {
for (let i = startIndex + 1; i < endIndex; i++) {
this.editorDom[i].setOffsetAll();
}
let endOffset = selectionRange.endOffset; let endOffset = selectionRange.endOffset;
let previousSibling = toolbarCommon.getRealElem(selectionRange.endContainer).previousSibling; let previousSibling = toolbarCommon.getRealElem(selectionRange.endContainer).previousSibling;
for (; previousSibling;) { for (; previousSibling;) {
endOffset += previousSibling.innerText.length; endOffset += previousSibling.innerText.length;
previousSibling = previousSibling.previousSibling; previousSibling = previousSibling.previousSibling;
} }
let endNode = toolbarCommon.getRootDom(selectionRange.endContainer); if (endIndex >= 0) {
let index = endNode.getAttribute("index"); let domTemp = this.editorDom[endIndex];
if (index >= 0) {
let domTemp = this.editorDom[index];
domTemp.setOffset(0, endOffset); 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'; this.editorToolbarStyle.display = 'block';
} }
// console.log("mouseup", selectText, e); // console.log("mouseup", selectText, e);
@@ -166,12 +156,28 @@
this.editorCursorStyle.height = computedStyle.fontSize; this.editorCursorStyle.height = computedStyle.fontSize;
this.editorCursorStyle.display = 'block'; this.editorCursorStyle.display = 'block';
// 设置光标所在对象的位置 // 设置光标所在对象的位置
let range = window.getSelection().getRangeAt(0); let selectionRange = window.getSelection().getRangeAt(0);
this.editorRange.startOffset = range.startOffset; let startNode = toolbarCommon.getRootDom(selectionRange.startContainer);
this.editorRange.endOffset = range.endOffset; let endNode = toolbarCommon.getRootDom(selectionRange.endContainer);
// 没展示出来时不能获取焦点 let startIndex = startNode.getAttribute("index");
let selectText = window.getSelection().getRangeAt(0).toString(); let endIndex = endNode.getAttribute("index");
if (!selectText) { 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); setTimeout(() => this.userInput.focus(), 50);
} }
}, },

76
zyplayer-doc-ui/wiki-ui/src/components/editor2/util/dom.js
View File

@@ -62,55 +62,41 @@ Dom.prototype = {
if (this.startOffset < 0 || this.endOffset < 0 || this.startOffset == this.endOffset) { if (this.startOffset < 0 || this.endOffset < 0 || this.startOffset == this.endOffset) {
return; return;
} }
let styleRangeNew = []; // 添加新的分区
// 拆分 let styleRangeNew = [].concat(this.styleRange);
for (let i = 0; i < this.styleRange.length; i++) { styleRangeNew.push(new StyleRange(this.startOffset, this.endOffset, cls));
let item = this.styleRange[i]; let textStyleArr = [];
// 全选 前面 中间 后面 全包含 let textLen = this.text.length;
if (this.startOffset == item.start && this.endOffset == item.end) { for (let i = 0; i < textLen; i++) {
item.addClass(cls); textStyleArr[i] = '';
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);
}
} }
if (styleRangeNew.length <= 0) { // 所有范围值拆分到每个字
styleRangeNew.push(new StyleRange(this.startOffset, this.endOffset, cls)); let rangeLen = styleRangeNew.length;
} for (let i = 0; i < rangeLen; i++) {
styleRangeNew.sort((val1, val2) => val1.start - val2.start);
// 合并同一个范围内样式表重叠的
let styleRangeLast = [];
let len = styleRangeNew.length;
for (let i = 0; i < len; i++) {
let item = styleRangeNew[i]; let item = styleRangeNew[i];
for (let j = i + 1; j < len; j++, i++) { for (let j = item.start; j < item.end && j < textLen; j++) {
let itemNext = styleRangeNew[j]; textStyleArr[j] += ' ' + item.cls;
if (!item.classSameAll(itemNext)) break;
item.start = Math.min(item.start, itemNext.start);
item.end = Math.max(item.end, itemNext.end);
} }
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.startOffset = this.endOffset = -1;
this.computerStyleRangeToDom(); this.computerStyleRangeToDom();
}, },

3
zyplayer-doc-ui/wiki-ui/src/components/editor2/util/styleRange.js
View File

@@ -27,6 +27,9 @@ StyleRange.prototype = {
this.clsSet.add(cls); this.clsSet.add(cls);
this.cls = Array.from(this.clsSet).join(" "); this.cls = Array.from(this.clsSet).join(" ");
}, },
getSortClass() {
return Array.from(this.clsSet).sort((val1, val2) => val1 - val2).join(" ");
},
classSameAll(compare) { classSameAll(compare) {
if (compare.clsSet.size != this.clsSet.size) return false; if (compare.clsSet.size != this.clsSet.size) return false;
let values = Array.from(compare.clsSet); let values = Array.from(compare.clsSet);