---wiki正式切换到vue3版本---

This commit is contained in:
暮光:城中城
2023-01-11 20:33:42 +08:00
parent bc28320565
commit b8068ef29e
115 changed files with 15723 additions and 40477 deletions

View File

@@ -1,307 +1,350 @@
<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;">
<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-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId" size="small">
<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>
<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-link @click="changeToRootPath" size="small" style="padding: 0 10px">根目录</el-link>
</el-tooltip>
<span style="margin-left: 50px;">编辑方式</span>
<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId" size="mini">
<span style="margin-left: 50px">编辑方式</span>
<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId" size="small">
<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 :span="8" style="text-align: right">
<el-button type="primary" v-on:click="createWikiSave(1)" size="small" :icon="ElIconDocumentChecked">保存并查看</el-button>
<el-button type="success" v-on:click="createWikiSave(0)" size="small" :icon="ElIconCheck">仅保存</el-button>
<el-button v-on:click="createWikiCancel" size="small" :icon="ElIconBack">取消</el-button>
</el-col>
</el-row>
</div>
<div v-show="wikiPageEdit.editorType===2" style="padding: 0 10px 10px 10px;background: #fff;">
<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"/>
<mavonEditor
ref="mavonEditorRef"
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 v-show="wikiPageEdit.editorType === 1">
<WangEditor ref="wangEditorRef"></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'
<script setup>
import {onBeforeUnmount, ref, onMounted, onUnmounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router";
import {ElMessageBox, ElMessage} from 'element-plus'
import {
DocumentChecked as ElIconDocumentChecked,
Check as ElIconCheck,
Back as ElIconBack,
} from '@element-plus/icons-vue'
import pageApi from '../../assets/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) {
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;
}
if (!this.wikiPageEdit.pageTitle) {
this.$message.warning("标题不能为空");
return;
}
// 修改内容时强制不能修改父路径,只能在目录上拖动修改
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 urlObj = res.data.data || {};
if (urlObj.url) {
this.$refs.mavonEditor.$img2Url(pos, urlObj.url);
} 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();
},
let editor = ref({});
// 编辑相关
let wikiPageEdit = ref({editorType: 2, pageTitle: '',});
let wikiPage = ref({});
let pageContent = ref({});
let pageFileList = ref([]);
let parentWikiPage = ref({});
let isUnlock = ref(false);
// 页面ID有值代表编辑
let pageId = ref('');
// 父级,有值代表在此父级新建文档
let parentId = ref('');
let markdownContent = ref('');
let fileUploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload');
let 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, // 预览
};
const props = defineProps({
spaceId: Number,
});
let emit = defineEmits(['loadPageList']);
onBeforeRouteUpdate((to) => {
initQueryParam(to);
});
let route = useRoute();
let router = useRouter();
onUnmounted(() => {
unlockPage()
});
onMounted(() => {
initEditor()
initQueryParam(route)
let that = this
window.onunload = function () {
that.unlockPage()
}
window.onbeforeunload = function () {
that.unlockPage()
}
})
const changeToRootPath = () => {
// 没有父级,就是在根目录创建
parentId.value = ''
parentWikiPage.value = {}
}
const editorTypeChange = () => {
}
const unlockPage = () => {
// 防止各种事件重复调这个接口,只需要调一次就好了
if (isUnlock.value) return
isUnlock.value = true
pageApi.pageUnlock({pageId: pageId.value})
}
const createWikiCancel = () => {
ElMessageBox.confirm('确定要取消编辑吗?您编辑的内容将不会被保存哦~', '提示', {
confirmButtonText: '确定',
cancelButtonText: '继续编辑',
type: 'warning',
}).then(() => {
unlockPage()
router.back()
})
}
let wangEditorRef = ref();
const createWikiSave = (saveAfter) => {
let content = '',
preview = ''
if (wikiPageEdit.value.editorType === 2) {
content = markdownContent.value
preview = markdownContent.value
} else {
let pageData = wangEditorRef.value.getPageData()
content = pageData.html
preview = pageData.text
wikiPageEdit.value.pageTitle = pageData.title
}
if (!wikiPageEdit.value.pageTitle) {
ElMessage.warning('标题不能为空')
return
}
// 修改内容时强制不能修改父路径,只能在目录上拖动修改
let parentIdVal = pageId.value > 0 ? '' : parentId.value
let param = {
spaceId: props.spaceId,
parentId: parentIdVal,
id: wikiPage.value.id,
name: wikiPageEdit.value.pageTitle,
editorType: wikiPageEdit.value.editorType,
content: content,
preview: preview,
}
pageApi.updatePage(param).then((json) => {
ElMessage.success('保存成功!')
// 重新加载左侧列表,跳转到展示页面
emit('loadPageList')
pageId.value = json.data.id
if (saveAfter == 1) {
router.push({
path: '/page/show',
query: {pageId: pageId.value},
})
} else {
loadPageDetail.value(pageId.value)
}
})
}
const loadPageDetail = (pageId) => {
pageApi.pageDetail({id: pageId}).then((json) => {
wikiPage.value = json.data.wikiPage || {}
pageContent.value = json.data.pageContent || {}
pageFileList.value = json.data.fileList || []
// 内容
wikiPageEdit.value.pageTitle = wikiPage.value.name
wikiPageEdit.value.editorType = wikiPage.value.editorType
if (wikiPageEdit.value.editorType === 2) {
markdownContent.value = pageContent.value.content || ''
} else {
// editor.value.txt.html(pageContent.value.content || "");
setTimeout(() => {
wangEditorRef.value.setTitle(wikiPage.value.name || '')
wangEditorRef.value.setHtml(pageContent.value.content || '')
}, 0)
}
})
}
const loadParentPageDetail = (pageId) => {
if (!pageId) return
pageApi.pageDetail({id: pageId}).then((json) => {
parentWikiPage.value = json.data.wikiPage || {}
})
}
const cleanPage = () => {
wikiPage.value = {}
pageContent.value = {}
pageFileList.value = []
wikiPageEdit.value.pageTitle = ''
if (!!editor.value.txt) {
editor.value.txt.html('')
}
}
const initQueryParam = (to) => {
// pageId和parentId二选一传了pageId代表编辑页面否则代表新建页面
pageId.value = to.query.pageId
parentId.value = to.query.parentId
if (!!pageId.value) {
loadPageDetail(pageId.value)
pageApi.pageLock({pageId: pageId.value}).catch((json) => {
ElMessageBox.alert(json.errMsg || '未知错误', '错误', {
confirmButtonText: '确定',
callback: () => {
router.back()
},
})
})
} else {
loadParentPageDetail(parentId.value)
cleanPage()
}
}
let mavonEditorRef = ref();
const addMarkdownImage = (pos, file) => {
let formData = new FormData()
formData.append('files', file)
axios({
url: fileUploadUrl.value,
method: 'post',
data: formData,
headers: {'Content-Type': 'multipart/form-data'},
timeout: 10000,
withCredentials: true,
}).then((res) => {
let urlObj = res.data.data || {}
if (urlObj.url) {
mavonEditorRef.value.$img2Url(pos, urlObj.url)
} else {
ElMessage.warning('上传失败,返回数据为空')
}
}).catch((e) => {
ElMessage.warning('上传失败:' + e.message)
})
}
const initEditor = () => {
}
</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 .icon-collapse {
float: left;
font-size: 25px;
color: #aaa;
margin-top: 8px;
cursor: pointer;
}
.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;
}
.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>