308 lines
10 KiB
Vue
308 lines
10 KiB
Vue
<template>
|
||
<div style="height: 100%;" class="page-edit-vue">
|
||
<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 pageApi from '../../common/api/page'
|
||
import {mavonEditor} from 'mavon-editor'
|
||
import 'mavon-editor/dist/markdown/github-markdown.min.css'
|
||
import 'mavon-editor/dist/css/index.css'
|
||
import axios from 'axios'
|
||
import WangEditor from './editor/WangEditor.vue'
|
||
|
||
export default {
|
||
props: ['spaceId'],
|
||
data() {
|
||
return {
|
||
editor: {},
|
||
// 编辑相关
|
||
wikiPageEdit: {
|
||
editorType: 2,
|
||
pageTitle: "",
|
||
},
|
||
wikiPage: {},
|
||
parentWikiPage: {},
|
||
isUnlock: false,
|
||
// 页面ID，有值代表编辑
|
||
pageId: '',
|
||
// 父级，有值代表在此父级新建文档
|
||
parentId: '',
|
||
markdownContent: '',
|
||
toolbars: {
|
||
bold: true, // 粗体
|
||
italic: true, // 斜体
|
||
header: true, // 标题
|
||
underline: true, // 下划线
|
||
strikethrough: true, // 中划线
|
||
mark: true, // 标记
|
||
superscript: true, // 上角标
|
||
subscript: true, // 下角标
|
||
quote: true, // 引用
|
||
ol: true, // 有序列表
|
||
ul: true, // 无序列表
|
||
link: true, // 链接
|
||
imagelink: true, // 图片链接
|
||
code: true, // code
|
||
table: true, // 表格
|
||
fullscreen: true, // 全屏编辑
|
||
readmodel: true, // 沉浸式阅读
|
||
/* 1.3.5 */
|
||
undo: true, // 上一步
|
||
redo: true, // 下一步
|
||
trash: true, // 清空
|
||
save: true, // 保存（触发events中的save事件）
|
||
/* 1.4.2 */
|
||
navigation: true, // 导航目录
|
||
/* 2.1.8 */
|
||
alignleft: true, // 左对齐
|
||
aligncenter: true, // 居中
|
||
alignright: true, // 右对齐
|
||
/* 2.2.1 */
|
||
subfield: true, // 单双栏模式
|
||
preview: true, // 预览
|
||
},
|
||
fileUploadUrl: process.env.VUE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload',
|
||
};
|
||
},
|
||
components: {
|
||
WangEditor, mavonEditor,
|
||
},
|
||
destroyed: function () {
|
||
this.unlockPage();
|
||
},
|
||
beforeRouteUpdate(to, from, next) {
|
||
this.initQueryParam(to);
|
||
next();
|
||
},
|
||
mounted: function () {
|
||
this.initEditor();
|
||
this.initQueryParam(this.$route);
|
||
let that = this;
|
||
window.onunload = function () {
|
||
that.unlockPage();
|
||
};
|
||
window.onbeforeunload = function () {
|
||
that.unlockPage();
|
||
};
|
||
},
|
||
methods: {
|
||
changeToRootPath() {
|
||
// 没有父级，就是在根目录创建
|
||
this.parentId = '';
|
||
this.parentWikiPage = {};
|
||
},
|
||
editorTypeChange() {
|
||
},
|
||
unlockPage() {
|
||
// 防止各种事件重复调这个接口，只需要调一次就好了
|
||
if (this.isUnlock) return;
|
||
this.isUnlock = true;
|
||
pageApi.pageUnlock({pageId: this.pageId});
|
||
},
|
||
createWikiCancel() {
|
||
this.$confirm('确定要取消编辑吗？您编辑的内容将不会被保存哦~', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '继续编辑',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.unlockPage();
|
||
this.$router.back();
|
||
});
|
||
},
|
||
createWikiSave(saveAfter) {
|
||
if (!this.wikiPageEdit.pageTitle) {
|
||
this.$message.warning("标题不能为空");
|
||
return;
|
||
}
|
||
let content = '', preview = '';
|
||
if (this.wikiPageEdit.editorType === 2) {
|
||
content = this.markdownContent;
|
||
preview = this.markdownContent;
|
||
} else {
|
||
let pageData = this.$refs.wangEditor.getPageData();
|
||
content = pageData.html;
|
||
preview = pageData.text;
|
||
this.wikiPageEdit.pageTitle = pageData.title;
|
||
}
|
||
// 修改内容时强制不能修改父路径，只能在目录上拖动修改
|
||
let parentId = (this.pageId > 0) ? '' : this.parentId;
|
||
let param = {
|
||
spaceId: this.spaceId,
|
||
parentId: parentId,
|
||
id: this.wikiPage.id,
|
||
name: this.wikiPageEdit.pageTitle,
|
||
editorType: this.wikiPageEdit.editorType,
|
||
content: content,
|
||
preview: preview,
|
||
};
|
||
pageApi.updatePage(param).then(json => {
|
||
this.$message.success("保存成功！");
|
||
// 重新加载左侧列表，跳转到展示页面
|
||
this.$emit('loadPageList');
|
||
this.pageId = json.data.id;
|
||
if (saveAfter == 1) {
|
||
this.$router.push({path: '/page/show', query: {pageId: this.pageId}});
|
||
} else {
|
||
this.loadPageDetail(this.pageId);
|
||
}
|
||
});
|
||
},
|
||
loadPageDetail(pageId) {
|
||
pageApi.pageDetail({id: pageId}).then(json => {
|
||
this.wikiPage = json.data.wikiPage || {};
|
||
this.pageContent = json.data.pageContent || {};
|
||
this.pageFileList = json.data.fileList || [];
|
||
// 内容
|
||
this.wikiPageEdit.pageTitle = this.wikiPage.name;
|
||
this.wikiPageEdit.editorType = this.wikiPage.editorType;
|
||
if (this.wikiPageEdit.editorType === 2) {
|
||
this.markdownContent = this.pageContent.content || "";
|
||
} else {
|
||
// this.editor.txt.html(this.pageContent.content || "");
|
||
setTimeout(() => {
|
||
this.$refs.wangEditor.setTitle(this.wikiPage.name || "");
|
||
this.$refs.wangEditor.setHtml(this.pageContent.content || "");
|
||
}, 0);
|
||
}
|
||
});
|
||
},
|
||
loadParentPageDetail(pageId) {
|
||
if (!pageId) return;
|
||
pageApi.pageDetail({id: pageId}).then(json => {
|
||
this.parentWikiPage = json.data.wikiPage || {};
|
||
});
|
||
},
|
||
cleanPage() {
|
||
this.wikiPage = {};
|
||
this.pageContent = {};
|
||
this.pageFileList = [];
|
||
this.wikiPageEdit.pageTitle = "";
|
||
if (!!this.editor.txt) {
|
||
this.editor.txt.html("");
|
||
}
|
||
},
|
||
initQueryParam(to) {
|
||
// pageId和parentId二选一，传了pageId代表编辑页面，否则代表新建页面
|
||
this.pageId = to.query.pageId;
|
||
this.parentId = to.query.parentId;
|
||
if (!!this.pageId) {
|
||
this.loadPageDetail(this.pageId);
|
||
pageApi.pageLock({pageId: this.pageId}).catch(json => {
|
||
let that = this;
|
||
this.$alert(json.errMsg || '未知错误', '错误', {
|
||
confirmButtonText: '确定',
|
||
callback: () => {
|
||
that.$router.back();
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
this.loadParentPageDetail(this.parentId);
|
||
this.cleanPage();
|
||
}
|
||
},
|
||
addMarkdownImage(pos, file) {
|
||
let formData = new FormData();
|
||
formData.append('files', file);
|
||
axios({
|
||
url: this.fileUploadUrl,
|
||
method: 'post',
|
||
data: formData,
|
||
headers: {'Content-Type': 'multipart/form-data'},
|
||
timeout: 10000,
|
||
withCredentials: true
|
||
}).then(res => {
|
||
let urlArr = res.data.data || [];
|
||
if (urlArr.length > 0) {
|
||
this.$refs.mavonEditor.$img2Url(pos, urlArr[0]);
|
||
} else {
|
||
this.$message.warning("上传失败，返回数据为空");
|
||
}
|
||
}).catch(e => {
|
||
this.$message.warning("上传失败：" + e.message);
|
||
});
|
||
},
|
||
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();
|
||
},
|
||
}
|
||
}
|
||
|
||
</script>
|
||
<style>
|
||
.page-edit-vue .icon-collapse{float: left;font-size: 25px;color: #aaa;margin-top: 8px;cursor: pointer;}
|
||
.page-edit-vue .icon-collapse:hover{color: #eee;}
|
||
.page-edit-vue .wiki-title{font-size: 20px;}
|
||
.page-edit-vue .wiki-author{font-size: 14px;color: #888;padding: 20px 0;height: 40px;line-height: 40px;}
|
||
.page-edit-vue .wiki-content{font-size: 14px;}
|
||
.page-edit-vue .wiki-content.w-e-text{overflow-y: auto;}
|
||
|
||
.page-edit-vue .upload-page-file .el-upload-list{display: none;}
|
||
.page-edit-vue .is-link{color: #1e88e5;cursor: pointer;}
|
||
/*编辑框高度*/
|
||
.page-edit-vue #newPageContentDiv .w-e-text-container{height: 100% !important;}
|
||
/*评论*/
|
||
.page-edit-vue .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;
|
||
}
|
||
.page-edit-vue .page-content-editor{
|
||
padding: 10px 0;
|
||
}
|
||
.page-edit-vue .page-title-input{
|
||
padding-bottom: 10px;
|
||
}
|
||
</style>
|
||
|