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

wiki编辑器升级，api接口文档开发

Browse Source
This commit is contained in:
暮光：城中城
2022-01-30 10:24:03 +08:00
parent 24f7eb10d0
commit c13fb2cae4
45 changed files with 8010 additions and 28058 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
zyplayer-doc-ui/wiki-ui/src/components/layouts/GlobalLayout.vue
View File

@@ -174,7 +174,8 @@
}
},
changeWikiPageExpandedKeys(pageId) {
this.wikiPageExpandedKeys = [pageId];
// 展开没有触发子节点的加载，如果去加载子节点有还找不到当前的node，暂不展开
// this.wikiPageExpandedKeys = [pageId];
},
searchByKeywords() {
this.$refs.wikiPageTree.filter(this.searchKeywords);
@@ -187,6 +188,7 @@
console.log("点击节点：", data);
this.nowPageId = data.id;
this.$router.push({path: '/page/show', query: {pageId: data.id}});
this.handleNodeExpand(data);
},
handleNodeExpand(node) {
if (node.children.length > 0 && node.children[0].needLoad) {
@@ -304,28 +306,32 @@
},
doGetPageList(parentId, node) {
let param = {spaceId: this.choiceSpace, parentId: parentId || 0};
if (this.nowSpaceShow.treeLazyLoad == 0) {
if (this.nowSpaceShow.treeLazyLoad === 0) {
param.parentId = null;
}
pageApi.pageList(param).then(json => {
let result = json.data || [];
let pathIndex = [];
if (this.nowSpaceShow.treeLazyLoad == 0) {
pathIndex = result;
let treeData = [];
if (this.nowSpaceShow.treeLazyLoad === 0) {
treeData = result;
} else {
for (let i = 0; i < result.length; i++) {
let item = result[i];
item.parentId = item.parentId || 0;
item.children = [{label: '', needLoad: true}];// 初始化一个对象，点击展开时重新查询加载
pathIndex.push(item);
item.children = [{name: '加载中...', needLoad: true}];// 初始化一个对象，点击展开时重新查询加载
treeData.push(item);
}
}
if (parentId > 0) {
node.children = pathIndex;
node.children = treeData;
} else {
this.wikiPageList = pathIndex;
this.wikiPageList = treeData;
}
});
}).catch(() => {
if (parentId > 0) {
node.children = [];
}
});
},
userSettingDropdown(command) {
console.log("command:" + command);

115
zyplayer-doc-ui/wiki-ui/src/views/page/Edit.vue
View File

@@ -1,51 +1,58 @@
<template>
<div style="height: 100%;" class="page-edit-vue">
<el-row type="border-card" style="height: 100%;overflow: auto;padding: 20px;box-sizing: border-box;">
<el-row :gutter="20">
<el-col :span="16">
<template v-if="pageId">
<span>编辑方式：</span>
<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId">
<el-option label="Markdown" :value="2"></el-option>
<el-option label="HTML" :value="1"></el-option>
</el-select>
</template>
<template v-else>
<span style="margin-right: 20px;">父级：{{parentWikiPage.name || '/'}}</span>
<el-tooltip class="item" content="在根目录创建文档" v-if="parentId">
<el-button type="text" @click="changeToRootPath" style="padding: 0 10px;">根目录</el-button>
</el-tooltip>
<span style="margin-left: 50px;">编辑方式：</span>
<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId">
<el-option label="Markdown" :value="2"></el-option>
<el-option label="HTML" :value="1"></el-option>
</el-select>
</template>
</el-col>
<el-col :span="8" style="text-align: right;">
<el-button type="primary" v-on:click="createWikiSave(1)" icon="el-icon-document-checked">保存并查看</el-button>
<el-button type="success" v-on:click="createWikiSave(0)" icon="el-icon-check">仅保存</el-button>
<el-button v-on:click="createWikiCancel" icon="el-icon-back">取消</el-button>
</el-col>
</el-row>
<el-input v-model="wikiPageEdit.pageTitle" placeholder="请输入标题" class="page-title-input"></el-input>
<mavon-editor v-show="wikiPageEdit.editorType===2" ref="mavonEditor" v-model="markdownContent" :toolbars="toolbars"
:externalLink="false"
@save="createWikiSave(0)" @imgAdd="addMarkdownImage"
placeholder="请录入文档内容" class="page-content-editor wang-editor-body"/>
<div v-show="wikiPageEdit.editorType===1" id="newPageContentDiv" class="page-content-editor" style="height: calc(100vh - 250px);"></div>
</el-row>
<div style="box-sizing: border-box;background: #f5f5f5;overflow: hidden;">
<div style="padding: 8px;font-size: 14px;background: #fff;">
<el-row>
<el-col :span="16">
<template v-if="pageId">
<span>编辑方式：</span>
<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId" size="mini">
<el-option label="Markdown" :value="2"></el-option>
<el-option label="HTML" :value="1"></el-option>
</el-select>
</template>
<template v-else>
<span style="margin-right: 20px;">父级：{{parentWikiPage.name || '/'}}</span>
<el-tooltip class="item" content="在根目录创建文档" v-if="parentId">
<el-button type="text" @click="changeToRootPath" size="mini" style="padding: 0 10px;">根目录</el-button>
</el-tooltip>
<span style="margin-left: 50px;">编辑方式：</span>
<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId" size="mini">
<el-option label="Markdown" :value="2"></el-option>
<el-option label="HTML" :value="1"></el-option>
</el-select>
</template>
</el-col>
<el-col :span="8" style="text-align: right;">
<el-button type="primary" v-on:click="createWikiSave(1)" size="mini" icon="el-icon-document-checked">保存并查看</el-button>
<el-button type="success" v-on:click="createWikiSave(0)" size="mini" icon="el-icon-check">仅保存</el-button>
<el-button v-on:click="createWikiCancel" size="mini" icon="el-icon-back">取消</el-button>
</el-col>
</el-row>
</div>
<div v-show="wikiPageEdit.editorType===2" style="padding: 0 10px 10px 10px;background: #fff;">
<el-input v-model="wikiPageEdit.pageTitle" placeholder="请输入标题" class="page-title-input"></el-input>
<mavon-editor ref="mavonEditor" v-model="markdownContent" :toolbars="toolbars"
:externalLink="false"
style="height: calc(100vh - 165px);"
@save="createWikiSave(0)" @imgAdd="addMarkdownImage"
placeholder="请录入文档内容" class="page-content-editor wang-editor-body"/>
</div>
<div v-show="wikiPageEdit.editorType===1">
<WangEditor ref="wangEditor"></WangEditor>
</div>
<!-- <div v-show="wikiPageEdit.editorType===1" id="newPageContentDiv" class="page-content-editor" style="height: calc(100vh - 250px);"></div>-->
</div>
</div>
</template>
<script>
import WangEditor from 'wangeditor'
import pageApi from '../../common/api/page'
import {mavonEditor, markdownIt} from 'mavon-editor'
import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
import "../../common/lib/wangEditor.css";
import axios from 'axios'
import WangEditor from './editor/WangEditor.vue'
export default {
props: ['spaceId'],
@@ -102,7 +109,7 @@
};
},
components: {
'mavon-editor': mavonEditor
WangEditor, mavonEditor,
},
destroyed: function () {
this.unlockPage();
@@ -156,8 +163,10 @@
content = this.markdownContent;
preview = this.markdownContent;
} else {
content = this.editor.txt.html();
preview = this.editor.txt.text();
let pageData = this.$refs.wangEditor.getPageData();
content = pageData.html;
preview = pageData.text;
this.wikiPageEdit.pageTitle = pageData.title;
}
// 修改内容时强制不能修改父路径，只能在目录上拖动修改
let parentId = (this.pageId > 0) ? '' : this.parentId;
@@ -193,7 +202,11 @@
if (this.wikiPageEdit.editorType === 2) {
this.markdownContent = this.pageContent.content || "";
} else {
this.editor.txt.html(this.pageContent.content || "");
// this.editor.txt.html(this.pageContent.content || "");
setTimeout(() => {
this.$refs.wangEditor.setTitle(this.wikiPage.name || "");
this.$refs.wangEditor.setHtml(this.pageContent.content || "");
}, 0);
}
});
},
@@ -254,14 +267,14 @@
});
},
initEditor() {
this.editor = new WangEditor('#newPageContentDiv');
this.editor.customConfig.uploadImgServer = process.env.VUE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload';
this.editor.customConfig.zIndex = 100;
this.editor.customConfig.uploadFileName = 'files';
this.editor.customConfig.uploadImgMaxLength = 1;
this.editor.customConfig.pasteFilterStyle = false;
this.editor.customConfig.withCredentials = true;
this.editor.create();
// this.editor = new WangEditor('#newPageContentDiv');
// this.editor.customConfig.uploadImgServer = process.env.VUE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload';
// this.editor.customConfig.zIndex = 100;
// this.editor.customConfig.uploadFileName = 'files';
// this.editor.customConfig.uploadImgMaxLength = 1;
// this.editor.customConfig.pasteFilterStyle = false;
// this.editor.customConfig.withCredentials = true;
// this.editor.create();
},
}
}
@@ -288,7 +301,7 @@
padding: 10px 0;
}
.page-edit-vue .page-title-input{
padding: 10px 0;
padding-bottom: 10px;
}
</style>

8
zyplayer-doc-ui/wiki-ui/src/views/page/Show.vue
View File

@@ -30,10 +30,10 @@
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="showPageHistory" icon="el-icon-time">查看历史版本</el-dropdown-item>
<el-dropdown-item command="deletePage" v-if="wikiPageAuth.canDelete==1" icon="el-icon-delete">删除</el-dropdown-item>
<el-dropdown-item command="editAuth" v-if="wikiPageAuth.canConfigAuth==1" icon="el-icon-s-check">权限设置</el-dropdown-item>
<el-dropdown-item command="showOpenPage" v-if="spaceInfo.openDoc == 1" icon="el-icon-share">查看开放文档</el-dropdown-item>
<el-dropdown-item command="showMobileView" v-if="spaceInfo.openDoc == 1" icon="el-icon-mobile-phone">手机端查看</el-dropdown-item>
<el-dropdown-item command="deletePage" v-if="wikiPageAuth.canDelete==1" icon="el-icon-delete">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
@@ -196,7 +196,7 @@ import htmlUtil from '../../common/lib/HtmlUtil.js'
import pageApi from '../../common/api/page'
import userApi from '../../common/api/user'
import Navigation from './components/Navigation.vue'
import {markdownIt, mavonEditor} from 'mavon-editor'
import {mavonEditor} from 'mavon-editor'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
@@ -463,7 +463,7 @@ var page = {
history.loading = 2;
history.content = json.data || '--';
if (this.wikiPage.editorType === 2) {
history.content = markdownIt.render(history.content);
history.content = mavonEditor.getMarkdownIt().render(history.content);
}
this.pageHistoryDetail = history.content;
this.pageShowDetail = history.content;
@@ -505,7 +505,7 @@ var page = {
canConfigAuth: result.canConfigAuth,
};
if (this.wikiPage.editorType === 2) {
this.pageContent.content = markdownIt.render(this.pageContent.content);
this.pageContent.content = mavonEditor.getMarkdownIt().render(this.pageContent.content);
}
this.pageShowDetail = this.pageContent.content;
// 修改标题

163
zyplayer-doc-ui/wiki-ui/src/views/page/editor/WangEditor.vue Normal file
View File

@@ -0,0 +1,163 @@
<template>
<div class="wang-editor-box">
<div class="editor-toolbar-box fix-top">
<Toolbar class="editor-toolbar"
:editorId="editorId"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
</div>
<div class="wang-editor-content">
<div class="editor-container">
<div class="title-container">
<input v-model="pageTitle" placeholder="请输入标题">
</div>
<Editor ref="editorTextArea" class="editor-text-area"
:editorId="editorId"
:defaultConfig="editorConfig"
:mode="mode"
/>
</div>
</div>
</div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
export default {
props: ['spaceId'],
data() {
return {
editorId: `w-e-${Math.random().toString().slice(-5)}`,
toolbarConfig: {
excludeKeys: [
"fullScreen", "undo" , "redo"
],
},
editorConfig: {
placeholder: '请输入文档内容',
scroll: false,
MENU_CONF: {
uploadImage: {
server: process.env.VUE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload',
fieldName: 'files',
// 最大支持50M图片上传
maxFileSize: 50 * 1024 * 1024,
withCredentials: true,
}
}
},
mode: 'default', // or 'simple'
defaultHtml: '',
editor: {},
pageTitle: '',
};
},
components: {
Editor, Toolbar,
},
beforeDestroy() {
let editor = getEditor(this.editorId);
if (editor == null) return;
editor.destroy();
removeEditor(this.editorId);
},
mounted: function () {
setTimeout(() => {
this.initEditor();
}, 0);
},
methods: {
initEditor() {
// 点击空白处 focus 编辑器
let editorTextArea = this.$refs.editorTextArea.$el;
editorTextArea.addEventListener('click', e => {
if (e.target.className === 'editor-text-area') {
let editor = getEditor(this.editorId);
editor.blur();
editor.focus(true); // focus 到末尾
}
});
},
getPageData() {
let editor = getEditor(this.editorId);
return {
title: this.pageTitle,
html: editor.getHtml(),
text: editor.getText(),
};
},
setTitle(title) {
this.pageTitle = title;
},
setHtml(content) {
let editor = getEditor(this.editorId);
editor.select([]);
editor.deleteFragment();
editor.dangerouslyInsertHtml(content);
},
}
}
</script>
<style>
.wang-editor-box {
background-color: #f5f5f5;
}
.wang-editor-box .top-container {
border-bottom: 1px solid #e8e8e8;
padding-left: 30px;
}
.wang-editor-box .editor-toolbar {
width: 1200px;
background-color: #FCFCFC;
margin: 0 auto;
}
.wang-editor-box .editor-toolbar-box {
border-bottom: 1px solid #e8e8e8;
background-color: #FCFCFC;
}
.wang-editor-box .editor-toolbar-box.fix-top {
/*position: fixed;*/
/*top: 40px;*/
/*z-index: 1;*/
/*text-align: center;*/
/*background: #fff;*/
/*width: 100%;*/
}
.wang-editor-box .wang-editor-content {
padding: 20px 0;
overflow: auto;
height: calc(100vh - 170px);
}
.wang-editor-box .editor-container {
width: 850px;
margin: 0 auto;
background-color: #fff;
padding: 20px 50px 50px 50px;
border: 1px solid #e8e8e8;
box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}
.wang-editor-box .title-container {
padding: 20px 0;
border-bottom: 1px solid #e8e8e8;
}
.wang-editor-box .title-container input {
font-size: 30px;
border: 0;
outline: none;
width: 100%;
line-height: 1;
}
.wang-editor-box .editor-text-area {
margin-top: 20px;
min-height: 600px;
}
</style>

4
zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/View.vue
View File

@@ -34,7 +34,7 @@
<script>
import pageApi from '../../../../common/api/page'
import {mavonEditor, markdownIt} from 'mavon-editor'
import {mavonEditor} from 'mavon-editor'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { ImagePreview } from 'vant';
import 'mavon-editor/dist/markdown/github-markdown.min.css'
@@ -75,7 +75,7 @@
let pageContent = json.data.pageContent || {};
this.pageFileList = json.data.fileList || [];
if (this.wikiPage.editorType === 2) {
pageContent.content = markdownIt.render(pageContent.content);
pageContent.content = mavonEditor.getMarkdownIt().render(pageContent.content);
}
this.pageShowDetail = pageContent.content;
document.title = wikiPage.name || 'WIKI-内容展示';

4
zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue
View File

@@ -42,7 +42,7 @@
<script>
import pageApi from '../../../../common/api/page'
import {mavonEditor, markdownIt} from 'mavon-editor'
import {mavonEditor} from 'mavon-editor'
import unitUtil from '../../../../common/lib/UnitUtil.js'
import htmlUtil from '../../../../common/lib/HtmlUtil.js'
import Navigation from '../../components/Navigation.vue'
@@ -84,7 +84,7 @@
let pageContent = json.data.pageContent || {};
this.pageFileList = json.data.fileList || [];
if (this.wikiPage.editorType === 2) {
pageContent.content = markdownIt.render(pageContent.content);
pageContent.content = mavonEditor.getMarkdownIt().render(pageContent.content);
}
this.pageShowDetail = pageContent.content;
let wikiTile = wikiPage.name || 'WIKI-内容展示';