修改开放文档页面位置

2020-06-15 22:41:11 +08:00
parent 61f4c316d8
commit 74d1c06561
36 changed files with 454 additions and 103 deletions
--- a/zyplayer-doc-ui/wiki-ui/src/components/editor2/MgEditor.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/components/editor2/MgEditor.vue
@@ -91,7 +91,11 @@
 			this.userInput.addEventListener('keydown', e => {
 				if (e.which == 13) {
 					e.preventDefault();
-					this.editDom.keyEnter(this.editorDom, this.editorRange, this.undoRedo);
+					this.editDom = this.editDom.keyEnter(this.editorDom, this.editorRange, this.undoRedo);
+					// 修改光标位置为下一行的开始
+					this.editorRange.startDomIndex = 0;
+					this.editorRange.endDomIndex = 0;
+					this.$forceUpdate();
 				} else if (e.keyCode == 90 && e.ctrlKey) {
 					e.preventDefault();
 					this.undoRedo.undo();
@@ -164,7 +168,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), '');
+					this.undoRedo.execute(2, this.editorDom.length - 1, lastDom, '');
 				}
 				setTimeout(() => event.target.lastChild.click(), 100);
 			},
@@ -200,11 +204,13 @@
 				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) {
@@ -212,7 +218,8 @@
 				}
 				this.editorRange.startOffset = startOffset;
 				this.editorRange.endOffset = endOffset;
-				console.log(startOffset, endOffset);
+				// console.log(startOffset, endOffset);
+				// 如果没有选中内容，隐藏工具栏，输入框获取焦点
 				if (startOffset == endOffset) {
 					this.hideToolbar();
 					setTimeout(() => this.userInput.focus(), 50);
@@ -228,12 +235,11 @@
 					domNew = new Dom('locate', 'locate');
 					this.editorDom.push(domNew);
 				}
-				let beforeJson = JSON.stringify(this.editDom);
+				let beforeDom = this.editDom.clone();
 				let oldText = this.editDom.text || '';
 				// 如果文字的中间位置点击，则把内容放到指定位置
 				let startOffset = this.editorRange.startOffset;
 				this.editDom.addText(startOffset, this.userInputData);
-				let afterJson = JSON.stringify(this.editDom);
 				if (startOffset < oldText.length) {
 					this.editorRange.startOffset = this.editorRange.endOffset = (startOffset + this.userInputData.length);
 				} else {
@@ -244,12 +250,15 @@
 				// let letterSpacing = this.userInputData.length * 0.52;
 				// this.editorCursorStyle.left = (parseInt(this.editorCursorStyle.left) + (parseInt(fontSize) * newLength) + letterSpacing) + 'px';
 				this.userInputData = '';
+				// 增加撤销重做记录
 				let editDomNode = toolbarCommon.getRootDom(this.editDom.target);
-				let editIndex = parseInt(editDomNode.getAttribute("index"));
-				this.undoRedo.execute(1, editIndex, beforeJson, afterJson);
+				if (editDomNode != null) {
+					let editIndex = parseInt(editDomNode.getAttribute("index"));
+					this.undoRedo.execute(1, editIndex, beforeDom, this.editDom);
+				}
 				// 如果在最后一个div里面输入，则改为非最后一个，然后在最后再加一行
 				if (!!domNew) {
-					this.undoRedo.execute(2, this.editorDom.length - 1, JSON.stringify(domNew), '');
+					this.undoRedo.execute(2, this.editorDom.length - 1, domNew, '');
 				}
 			},
 			handleToolbarBold() {
--- a/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/dom.js
+++ b/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/dom.js
@@ -11,9 +11,11 @@ function Dom(type = 'text', cls = '', text = '', styleRange = []) {
 	this.startOffset = -1;
 	this.endOffset = -1;
 	this.dom = [];
-	this.textStyle = [];
 	// 一个范围的样式，例：{start: 1, end: 2, class: 'xx xxx'}
-	this.styleRange = styleRange;
+	this.styleRange = [];
+	styleRange.forEach(item => {
+		this.styleRange.push(new StyleRange(item.start, item.end, this.styleRange.cls));
+	});
 }

 // 原型
@@ -128,22 +130,26 @@ Dom.prototype = {
 			this.dom.push(new Dom('', '', this.text.substring(lastStart, this.text.length)));
 		}
 	},
+	clone() {
+		return new Dom(this.type, this.cls, this.text, this.styleRange);
+	},
 	// 回车事件处理
 	keyEnter(editorDom, editorRange, undoRedo) {
 		let nextText = '';
 		let oldText = this.text || '';
 		// 如果文字的中间位置点击，则把内容分割到两行
 		if (editorRange.startOffset < oldText.length) {
-			let beforeJson = JSON.stringify(this);
+			let beforeDom = this.clone();
 			this.text = oldText.substring(0, editorRange.startOffset);
-			undoRedo.execute(1, editIndex, beforeJson, JSON.stringify(this));
+			undoRedo.execute(1, editIndex, beforeDom, this);
 			nextText = oldText.substring(editorRange.startOffset, oldText.length);
 		}
 		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), '');
+		undoRedo.execute(2, editIndex + 1, domNew, '');
+		return domNew;
 	},
 };

--- a/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/undoRedo.js
+++ b/zyplayer-doc-ui/wiki-ui/src/components/editor2/util/undoRedo.js
@@ -22,9 +22,24 @@ UndoRedo.prototype = {
 		if (this.undoRedoList.length >= 50) {
 			this.undoRedoList.splice(0, 1);
 		}
+		// 处理下，只保留有用的字段
+		before = this.handleDomColumn(before);
+		after = this.handleDomColumn(after);
 		this.undoRedoList.push(new UndoInfo(type, index, before, after));
 		this.undoRedoIndex = this.undoRedoList.length - 1;
 	},
+	handleDomColumn(content) {
+		if (!content) return '';
+		let beforeObj = [];
+		if (content instanceof Array) {
+			content.forEach(item => {
+				beforeObj.push({type: item.type, cls: item.cls, text: item.text, styleRange: item.styleRange});
+			});
+		} else {
+			beforeObj.push({type: content.type, cls: content.cls, text: content.text, styleRange: content.styleRange});
+		}
+		return JSON.stringify(beforeObj);
+	},
 	undo() {
 		if (this.undoRedoIndex >= this.undoRedoList.length) {
 			this.undoRedoIndex = this.undoRedoList.length - 1;
@@ -34,13 +49,11 @@ UndoRedo.prototype = {
 		}
 		let undoInfo = this.undoRedoList[this.undoRedoIndex];
 		let changeContent = JSON.parse(undoInfo.before);
-		if (changeContent instanceof Array) {
-			changeContent.forEach(item => {
-				this.undoObjDomToEditor(undoInfo, item);
-			});
-		} else {
-			this.undoObjDomToEditor(undoInfo, changeContent);
-		}
+		let undoIndex = undoInfo.index;
+		changeContent.forEach(item => {
+			this.undoObjDomToEditor(undoInfo, undoIndex, item);
+			undoIndex--;
+		});
 		this.undoRedoIndex = Math.max(this.undoRedoIndex - 1, -1);
 	},
 	redo() {
@@ -52,53 +65,51 @@ UndoRedo.prototype = {
 		let undoInfo = this.undoRedoList[this.undoRedoIndex];
 		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);
-			});
-		} else {
-			this.redoObjDomToEditor(undoInfo, changeContent);
-		}
+		let undoIndex = undoInfo.index;
+		changeContent.forEach(item => {
+			this.redoObjDomToEditor(undoInfo, item);
+			undoIndex++;
+		});
 	},
-	redoObjDomToEditor(undoInfo, domObj) {
+	redoObjDomToEditor(undoInfo, undoIndex, domObj) {
 		let dom = new Dom(domObj.type, domObj.cls, domObj.text, domObj.styleRange);
 		if (undoInfo.type == 1) {
 			// 1=修改 2=添加 3=删除
-			if (this.editorDom.length > undoInfo.index) {
-				vue.$set(this.editorDom, undoInfo.index, dom);
+			if (this.editorDom.length > undoIndex) {
+				vue.$set(this.editorDom, undoIndex, dom);
 			}
 		} else if (undoInfo.type == 2) {
 			// 1=修改 2=添加 3=删除
-			if (this.editorDom.length == undoInfo.index) {
+			if (this.editorDom.length == undoIndex) {
 				this.editorDom.push(dom);
-			} else if (this.editorDom.length > undoInfo.index) {
-				this.editorDom.splice(undoInfo.index, 0, dom);
+			} else if (this.editorDom.length > undoIndex) {
+				this.editorDom.splice(undoIndex, 0, dom);
 			}
 		} else if (undoInfo.type == 3) {
 			// 1=修改 2=添加 3=删除
-			if (this.editorDom.length > undoInfo.index) {
-				this.editorDom.splice(undoInfo.index, 1);
+			if (this.editorDom.length > undoIndex) {
+				this.editorDom.splice(undoIndex, 1);
 			}
 		}
 	},
-	undoObjDomToEditor(undoInfo, domObj) {
+	undoObjDomToEditor(undoInfo, undoIndex, domObj) {
 		let dom = new Dom(domObj.type, domObj.cls, domObj.text, domObj.styleRange);
 		if (undoInfo.type == 1) {
 			// 1=修改 2=添加 3=删除
-			if (this.editorDom.length > undoInfo.index) {
-				vue.$set(this.editorDom, undoInfo.index, dom);
+			if (this.editorDom.length > undoIndex) {
+				vue.$set(this.editorDom, undoIndex, dom);
 			}
 		} else if (undoInfo.type == 2) {
 			// 1=修改 2=添加 3=删除
-			if (this.editorDom.length > undoInfo.index) {
-				this.editorDom.splice(undoInfo.index, 1);
+			if (this.editorDom.length > undoIndex) {
+				this.editorDom.splice(undoIndex, 1);
 			}
 		} else if (undoInfo.type == 3) {
 			// 1=修改 2=添加 3=删除
-			if (this.editorDom.length == undoInfo.index) {
+			if (this.editorDom.length == undoIndex) {
 				this.editorDom.push(dom);
-			} else if (this.editorDom.length > undoInfo.index) {
-				this.editorDom.splice(undoInfo.index, 0, dom);
+			} else if (this.editorDom.length > undoIndex) {
+				this.editorDom.splice(undoIndex, 0, dom);
 			}
 		}
 	},
--- a/zyplayer-doc-ui/wiki-ui/src/components/layouts/GlobalLayout.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/components/layouts/GlobalLayout.vue
@@ -98,7 +98,7 @@
                <el-table-column prop="spaceExplain" label="说明"></el-table-column>
                <el-table-column label="开放地址">
                    <template slot-scope="scope">
-                        <a target="_blank" :href="'open-wiki.html?space='+scope.row.uuid" v-if="scope.row.openDoc == 1">{{scope.row.name}}</a>
+						<el-button type="text" @click="showOpenSpace(scope.row.uuid)" v-if="scope.row.openDoc == 1">{{scope.row.name}}</el-button>
                        <span v-else>暂未开放</span>
                    </template>
                </el-table-column>
@@ -247,6 +247,10 @@
            filterPageNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
+            },
+			showOpenSpace(space) {
+				let routeUrl = this.$router.resolve({path: '/page/openView', query: {space: space}});
+				window.open(routeUrl.href, '_blank');
            },
            editSpaceInfo(row) {
 				this.newSpaceForm = {
--- a/zyplayer-doc-ui/wiki-ui/src/components/layouts/OpenLayout.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/components/layouts/OpenLayout.vue
@@ -0,0 +1,244 @@
+<template>
+	<div>
+		<el-container style="height: 100%;">
+			<el-aside width="280px" style="height: 100%;background-color: #fafafa;" v-show="leftCollapse">
+				<div class="logo">{{nowSpaceShow.name}}</div>
+				<div style="padding: 0 10px 50px 10px;">
+					<el-input v-model="searchKeywords" @keyup.enter.native="searchByKeywords" placeholder="搜索文档" style="margin: 10px 0;">
+						<el-button slot="append" icon="el-icon-search" v-on:click="searchByKeywords"></el-button>
+					</el-input>
+					<el-tree :props="defaultProps" :data="wikiPageList" @node-click="handleNodeClick"
+							 ref="wikiPageTree" :filter-node-method="filterPageNode" highlight-current
+							 :expand-on-click-node="false" :default-expanded-keys="wikiPageExpandedKeys"
+							 node-key="id"
+							 style="background-color: #fafafa;">
+					</el-tree>
+					<!--请手下留情，别删我(╥╯^╰╥)，给我一个露脸的机会，我长的不碍眼的-->
+					<div class="build-info">本文档使用<span @click="aboutDialogVisible = true">zyplayer-doc</span>构建</div>
+				</div>
+			</el-aside>
+			<el-container>
+				<el-main class="doc-body-box">
+					<el-row type="border-card" v-show="rightContentType == 0">
+						<div style="margin-top: 30px;color: #666; text-align: center; font-size: 30px;">欢迎使用在线文档</div>
+						<div style="margin-top: 30px;color: #666; text-align: center;">
+							{{nowSpaceShow.name}}
+							<span v-show="nowSpaceShow.spaceExplain && nowSpaceShow.spaceExplain.length > 0"> · {{nowSpaceShow.spaceExplain}}</span>
+						</div>
+					</el-row>
+					<el-row type="border-card" v-show="rightContentType == 1">
+						<i class="el-icon-menu icon-collapse" @click="leftCollapse = !leftCollapse"></i>
+						<div style="max-width: 950px;margin: 0 auto;">
+							<div class="wiki-title">{{wikiPage.name}}</div>
+							<div class="wiki-author">
+								<span v-show="!wikiPage.updateTime">创建时间：{{wikiPage.createTime}}</span>
+								<span v-show="wikiPage.updateTime">最后修改：{{wikiPage.updateTime}}</span>
+							</div>
+							<div class="wiki-files">
+								<el-table v-show="pageFileList.length > 0" :data="pageFileList" border style="width: 100%; margin-bottom: 5px;">
+									<el-table-column label="文件名">
+										<template slot-scope="scope">
+											<a target="_blank" :href="scope.row.fileUrl">{{scope.row.fileName}}</a>
+										</template>
+									</el-table-column>
+									<el-table-column prop="createTime" label="创建时间" width="180px"></el-table-column>
+									<el-table-column prop="downloadNum" label="下载次数" width="80px"></el-table-column>
+								</el-table>
+							</div>
+							<div class="wiki-content w-e-text">
+								<div v-html="pageContent.content"></div>
+							</div>
+						</div>
+					</el-row>
+				</el-main>
+			</el-container>
+		</el-container>
+		<!--关于弹窗-->
+		<el-dialog title="关于zyplayer-doc-wiki" :visible.sync="aboutDialogVisible" width="600px">
+			<el-form>
+				<el-form-item label="项目地址：">
+					<a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc">zyplayer-doc</a>
+				</el-form-item>
+				<el-form-item label="开发人员：">
+					<a target="_blank" href="http://zyplayer.com">暮光：城中城</a>
+				</el-form-item>
+				<el-form-item label="">
+					欢迎加群讨论，QQ群号：466363173，欢迎提交需求，欢迎使用和加入开发！
+				</el-form-item>
+			</el-form>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	import pageApi from '../../common/api/page'
+
+	export default {
+		data() {
+			return {
+				leftCollapse: true,
+				aboutDialogVisible: false,
+				rightContentLoading: false,
+				rightContentType: 0,// 右侧显示类型，0=欢迎页 1=文章内容 2=编辑或新增文章
+				pathIndex: [],
+				defaultProps: {
+					children: 'children',
+					label: 'name'
+				},
+				// 空间搜索相关
+				nowSpaceShow: {},
+				// 搜索的输入内容
+				searchKeywords: "",
+				lastClickNode: {},
+				// 页面展示相关
+				wikiPageList:[],
+				wikiPage: {},
+				wikiPageExpandedKeys: [],
+				pageContent: {},
+				pageFileList: [],
+				// 页面跳转相关
+				parentPath: {},
+			}
+		},
+		beforeRouteUpdate(to, from, next) {
+			this.initQueryParam(to);
+			next();
+		},
+		mounted: function () {
+			this.initQueryParam(this.$route);
+			this.getSpaceInfo();
+			this.doGetPageList(null);
+		},
+		methods: {
+			filterPageNode(value, data) {
+				if (!value) return true;
+				return data.name.indexOf(value) !== -1;
+			},
+			handleNodeClick(data) {
+				this.rightContentType = 1;
+				if (this.lastClickNode.id == data.id) {
+					return;
+				}
+				console.log("点击节点：", data);
+				this.lastClickNode = data;
+				this.nowClickPath = {pageId: this.lastClickNode.id, space: this.parentPath.space};
+				this.$router.push({path: '/page/openView', query: this.nowClickPath});
+			},
+			loadPageDetail(pageId) {
+				this.rightContentType = 1;
+				let param = {pageId: pageId, space: this.parentPath.space};
+				pageApi.openPageDetail(param).then(json => {
+					let wikiPage = json.data.wikiPage || {};
+					wikiPage.selfZan = json.data.selfZan || 0;
+					this.wikiPage = wikiPage;
+					this.pageContent = json.data.pageContent || {};
+					this.pageFileList = json.data.fileList || [];
+				});
+			},
+			searchByKeywords() {
+				this.$refs.wikiPageTree.filter(this.searchKeywords);
+			},
+			doGetPageList() {
+				let nodePath = "/";
+				let param = {space: this.parentPath.space};
+				pageApi.openPageList(param).then(json => {
+					let pathIndex = json.data || [];
+					this.createNodePath(pathIndex, nodePath);
+					this.wikiPageList = pathIndex;
+					this.lastClickNode = {};
+				});
+			},
+			getSpaceInfo() {
+				let param = {space: this.parentPath.space};
+				pageApi.openSpaceInfo(param).then(json => {
+					this.nowSpaceShow = json.data;
+				});
+			},
+			createNodePath(node, nodePath) {
+				if (!nodePath.endsWith("/")) {
+					nodePath += "/";
+				}
+				for (let i = 0; i < node.length; i++) {
+					let item = node[i];
+					item.nodePath = nodePath + item.name;
+					if (!!item.children && item.children.length > 0) {
+						this.createNodePath(item.children, item.nodePath);
+					}
+				}
+			},
+			initQueryParam(to) {
+				this.parentPath = {space: to.query.space, pageId: to.query.pageId};
+				if (!!this.parentPath.pageId) {
+					this.loadPageDetail(this.parentPath.pageId);
+				}
+			},
+		}
+	};
+</script>
+
+<style scoped>
+	html,body,#app {margin: 0; padding: 0; height: 100%;}
+	pre{margin: 0;white-space: pre-wrap;font-size: 14px; font-family: auto;}
+	.el-menu {box-sizing: border-box;border-right: 0;margin-right: 3px;}
+	.el-header {background-color: #409EFF; color: #333; line-height: 40px; text-align: right;height: 40px !important;}
+	.doc-body-box{
+		overflow-x: hidden;overflow-y: auto;width: 100%;
+		padding: 10px;border-left: 1px solid #f1f1f1; box-sizing: border-box;
+	}
+	.el-tree{margin-right: 3px;}
+	.logo{
+		/*background: #409EFF; cursor: pointer;*/
+		border-bottom: 1px solid #f1f1f1;
+		overflow: hidden;white-space: nowrap;text-overflow: ellipsis; padding: 5px 10px;
+		width: 260px; height:40px;line-height:40px;font-size: 25px;color: #666;text-align: center;
+	}
+	.icon-collapse{float: left;font-size: 25px;color: #aaa;cursor: pointer;position: fixed;}
+	.icon-collapse:hover{color: #ccc;}
+	.wiki-title{font-size: 20px;text-align: center;}
+	.wiki-author{font-size: 14px;color: #888;padding: 20px 0;height: 40px;line-height: 40px;}
+	.wiki-content{font-size: 14px;}
+	.wiki-content.w-e-text{overflow-y: auto;}
+
+	.upload-page-file .el-upload-list{display: none;}
+	.is-link{color: #1e88e5;cursor: pointer;}
+	/*编辑框高度*/
+	#newPageContentDiv .w-e-text-container{height: 600px !important;}
+	/*评论*/
+	.comment-box .head{
+		float: left;background-color: #ccc;border-radius: 50%;margin-right: 10px;
+		width: 45px; height: 45px; line-height: 45px;text-align: center;color: #fff;
+	}
+	.build-info{
+		position: fixed;bottom: 0;left: 0;background: #fafafa;width: 280px;text-align: center;
+		padding: 5px 0;color: #aaa;font-size: 12px;
+	}
+	.build-info span{color: #4183c4;cursor: pointer;}
+	/* S-JSON展示的样式 */
+	pre.json {
+		display: block;
+		padding: 9.5px;
+		margin: 0 0 0 10px;
+		font-size: 12px;
+		line-height: 1.38461538;
+		color: #333;
+		word-break: break-all;
+		word-wrap: break-word;
+		background-color: #f5f5f5;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+	}
+	pre.json .canvas{font:10pt georgia;background-color:#ececec;color:#000000;border:1px solid #cecece;}
+	pre.json .object-brace{color:#00aa00;font-weight:bold;}
+	pre.json .array-brace{color:#0033ff;font-weight:bold;}
+	pre.json .property-name{color:#cc0000;font-weight:bold;}
+	pre.json .string{color:#007777;}
+	pre.json .number{color:#aa00aa;}
+	pre.json .boolean{color:#0000ff;}
+	pre.json .function{color:#aa6633;text-decoration:initial;}
+	pre.json .null{color:#0000ff;}
+	pre.json .comma{color:#000000;font-weight:bold;}
+	pre.json .annotation{color:#aaa;}
+	pre img{cursor: pointer;}
+	/* E-JSON展示的样式 */
+</style>
+