From 61f4c316d81f56b732758185108f3139d2966777 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9A=AE=E5=85=89=EF=BC=9A=E5=9F=8E=E4=B8=AD=E5=9F=8E?=
<806783409@qq.com>
Date: Sun, 14 Jun 2020 22:24:35 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E5=A2=9E=E5=8A=A0?=
=?UTF-8?q?=E6=92=A4=E9=94=80=E3=80=81=E9=87=8D=E5=81=9A=E5=8A=9F=E8=83=BD?=
=?UTF-8?q?=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/editor2/MgEditor.vue | 13 ++++++--
.../src/components/editor2/util/dom.js | 16 +++++-----
.../src/components/editor2/util/undoRedo.js | 30 +++++++++++--------
3 files changed, 36 insertions(+), 23 deletions(-)
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 108b3b5f..bab26b0a 100644
--- a/zyplayer-doc-ui/wiki-ui/src/components/editor2/MgEditor.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/components/editor2/MgEditor.vue
@@ -16,7 +16,7 @@
{{item.text}}
-
+
@@ -91,7 +91,7 @@
this.userInput.addEventListener('keydown', e => {
if (e.which == 13) {
e.preventDefault();
- this.editDom.keyEnter(this.editorDom, this.editorRange);
+ this.editDom.keyEnter(this.editorDom, this.editorRange, this.undoRedo);
} else if (e.keyCode == 90 && e.ctrlKey) {
e.preventDefault();
this.undoRedo.undo();
@@ -164,6 +164,7 @@
if (lastDom.type != 'locate') {
lastDom = new Dom('locate', 'locate');
this.editorDom.push(lastDom);
+ this.undoRedo.execute(2, this.editorDom.length - 1, JSON.stringify(lastDom), '');
}
setTimeout(() => event.target.lastChild.click(), 100);
},
@@ -220,10 +221,12 @@
userInputDataChange() {
if (!this.userInputData) return;
// 如果在最后一个div里面输入,则改为非最后一个,然后在最后再加一行
+ let domNew;
if (this.editDom.type == 'locate') {
this.editDom.type = 'text';
this.editDom.removeClass('locate');
- this.editorDom.push(new Dom('locate', 'locate'));
+ domNew = new Dom('locate', 'locate');
+ this.editorDom.push(domNew);
}
let beforeJson = JSON.stringify(this.editDom);
let oldText = this.editDom.text || '';
@@ -244,6 +247,10 @@
let editDomNode = toolbarCommon.getRootDom(this.editDom.target);
let editIndex = parseInt(editDomNode.getAttribute("index"));
this.undoRedo.execute(1, editIndex, beforeJson, afterJson);
+ // 如果在最后一个div里面输入,则改为非最后一个,然后在最后再加一行
+ if (!!domNew) {
+ this.undoRedo.execute(2, this.editorDom.length - 1, JSON.stringify(domNew), '');
+ }
},
handleToolbarBold() {
for (let i = this.editorRange.startDomIndex; i < this.editorRange.endDomIndex; i++) {
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 2baf08ef..21b724b5 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
@@ -1,5 +1,6 @@
// 构造函数
import StyleRange from "./styleRange";
+import toolbarCommon from "../../editor/toolbar/common";
function Dom(type = 'text', cls = '', text = '', styleRange = []) {
this.type = type;
@@ -128,20 +129,21 @@ Dom.prototype = {
}
},
// 回车事件处理
- keyEnter(editorDom, editorRange) {
+ keyEnter(editorDom, editorRange, undoRedo) {
let nextText = '';
let oldText = this.text || '';
// 如果文字的中间位置点击,则把内容分割到两行
if (editorRange.startOffset < oldText.length) {
+ let beforeJson = JSON.stringify(this);
this.text = oldText.substring(0, editorRange.startOffset);
+ undoRedo.execute(1, editIndex, beforeJson, JSON.stringify(this));
nextText = oldText.substring(editorRange.startOffset, oldText.length);
}
- for (let i = 0; i < editorDom.length; i++) {
- if (this == editorDom[i]) {
- editorDom.splice(i + 1, 0, new Dom('text', this.cls, nextText));
- break;
- }
- }
+ let editDomNode = toolbarCommon.getRootDom(this.target);
+ let editIndex = parseInt(editDomNode.getAttribute("index"));
+ let domNew = new Dom('text', this.cls, nextText);
+ editorDom.splice(editIndex + 1, 0, domNew);
+ undoRedo.execute(2, editIndex + 1, JSON.stringify(domNew), '');
},
};
diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/undoRedo.js b/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/undoRedo.js
index 2b4a5785..a98063fc 100644
--- a/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/undoRedo.js
+++ b/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/undoRedo.js
@@ -2,6 +2,7 @@
import UndoInfo from "./undoInfo";
import Dom from "./dom";
+import vue from '../../../main'
function UndoRedo(editorDom) {
this.editorDom = editorDom;
@@ -13,15 +14,19 @@ function UndoRedo(editorDom) {
UndoRedo.prototype = {
constructor: UndoRedo,
execute(type, index, before, after) {
- // 最多保留20步
- if (this.undoRedoList.length >= 20) {
+ // 忽略后面的操作步骤
+ if (this.undoRedoIndex >= 0 && this.undoRedoIndex < this.undoRedoList.length - 1) {
+ this.undoRedoList.splice(this.undoRedoIndex, this.undoRedoList.length - this.undoRedoIndex);
+ }
+ // 最多保留50步
+ if (this.undoRedoList.length >= 50) {
this.undoRedoList.splice(0, 1);
}
this.undoRedoList.push(new UndoInfo(type, index, before, after));
this.undoRedoIndex = this.undoRedoList.length - 1;
},
undo() {
- if (this.undoRedoIndex < 0 || this.undoRedoIndex >= this.undoRedoList.length) {
+ if (this.undoRedoIndex >= this.undoRedoList.length) {
this.undoRedoIndex = this.undoRedoList.length - 1;
}
if (this.undoRedoIndex < 0) {
@@ -36,7 +41,7 @@ UndoRedo.prototype = {
} else {
this.undoObjDomToEditor(undoInfo, changeContent);
}
- this.undoRedoIndex = Math.max(this.undoRedoIndex - 1, 0);
+ this.undoRedoIndex = Math.max(this.undoRedoIndex - 1, -1);
},
redo() {
this.undoRedoIndex++;
@@ -45,7 +50,8 @@ UndoRedo.prototype = {
return;
}
let undoInfo = this.undoRedoList[this.undoRedoIndex];
- let changeContent = JSON.parse(undoInfo.after);
+ let actionText = (undoInfo.type == 1) ? undoInfo.after : undoInfo.before;
+ let changeContent = JSON.parse(actionText);
if (changeContent instanceof Array) {
changeContent.forEach(item => {
this.redoObjDomToEditor(undoInfo, item);
@@ -59,16 +65,14 @@ UndoRedo.prototype = {
if (undoInfo.type == 1) {
// 1=修改 2=添加 3=删除
if (this.editorDom.length > undoInfo.index) {
- this.editorDom[undoInfo.index] = dom;
+ vue.$set(this.editorDom, undoInfo.index, dom);
}
} else if (undoInfo.type == 2) {
// 1=修改 2=添加 3=删除
- if (this.editorDom.length > undoInfo.index) {
- if (this.editorDom.length == undoInfo.index) {
- this.editorDom.push(dom);
- } else if (this.editorDom.length > undoInfo.index) {
- this.editorDom.splice(undoInfo.index, 0, dom);
- }
+ if (this.editorDom.length == undoInfo.index) {
+ this.editorDom.push(dom);
+ } else if (this.editorDom.length > undoInfo.index) {
+ this.editorDom.splice(undoInfo.index, 0, dom);
}
} else if (undoInfo.type == 3) {
// 1=修改 2=添加 3=删除
@@ -82,7 +86,7 @@ UndoRedo.prototype = {
if (undoInfo.type == 1) {
// 1=修改 2=添加 3=删除
if (this.editorDom.length > undoInfo.index) {
- this.editorDom[undoInfo.index] = dom;
+ vue.$set(this.editorDom, undoInfo.index, dom);
}
} else if (undoInfo.type == 2) {
// 1=修改 2=添加 3=删除