编辑器组件封装
编辑器组件封装
This commit is contained in:
ronger
GitHub
commit
6f9a4f5a46
169
components/ContentEditor.vue
Normal file
169
components/ContentEditor.vue
Normal file
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="contentEditor"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import apiConfig from "@/config/api.config";
|
||||
|
||||
export default {
|
||||
name: "contentEditor",
|
||||
data() {
|
||||
return {
|
||||
contentEditor: null,
|
||||
tokenURL: {}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
initValue: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
cacheId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_initEditor(data) {
|
||||
//初始化
|
||||
let _ts = this;
|
||||
let toolbar = [
|
||||
'emoji',
|
||||
'headings',
|
||||
'bold',
|
||||
'italic',
|
||||
'strike',
|
||||
'link',
|
||||
'|',
|
||||
'list',
|
||||
'ordered-list',
|
||||
'check',
|
||||
'outdent',
|
||||
'indent',
|
||||
'|',
|
||||
'quote',
|
||||
'line',
|
||||
'code',
|
||||
'inline-code',
|
||||
'insert-before',
|
||||
'insert-after',
|
||||
'|',
|
||||
'upload',
|
||||
// 'record',
|
||||
'table',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'edit-mode',
|
||||
{
|
||||
name: 'more',
|
||||
toolbar: [
|
||||
'fullscreen',
|
||||
'both',
|
||||
'preview',
|
||||
'info'
|
||||
],
|
||||
}]
|
||||
return new Vue.Vditor(data.id, {
|
||||
toolbar,
|
||||
mode: _ts.mode,
|
||||
tab: '\t',
|
||||
cdn: apiConfig.VDITOR,
|
||||
cache: {
|
||||
enable: !_ts.cacheId,
|
||||
id: _ts.cacheId,
|
||||
},
|
||||
after() {
|
||||
_ts.contentEditor.setValue(data.value ? data.value : '');
|
||||
},
|
||||
typewriterMode: true,
|
||||
hint: {
|
||||
emoji: Vue.emoji
|
||||
},
|
||||
preview: {
|
||||
hljs: {
|
||||
enable: true,
|
||||
lineNumber: true,
|
||||
style: 'github'
|
||||
},
|
||||
markdown: {
|
||||
toc: true,
|
||||
autoSpace: true
|
||||
},
|
||||
math: {
|
||||
inlineDigit: true
|
||||
},
|
||||
delay: 500,
|
||||
mode: data.mode,
|
||||
/*url: `${process.env.Server}/api/console/markdown`,*/
|
||||
parse: (element) => {
|
||||
if (element.style.display === 'none') {
|
||||
return false
|
||||
}
|
||||
// LazyLoadImage();
|
||||
// Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
|
||||
},
|
||||
theme: {
|
||||
cdn: apiConfig.VDITOR_CSS
|
||||
}
|
||||
},
|
||||
upload: {
|
||||
max: 10 * 1024 * 1024,
|
||||
url: _ts.tokenURL.URL,
|
||||
linkToImgUrl: _ts.tokenURL.linkToImageURL,
|
||||
token: _ts.tokenURL.token,
|
||||
filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
|
||||
replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
|
||||
replace('/\\s/g', '')
|
||||
},
|
||||
height: data.height,
|
||||
counter: 102400,
|
||||
resize: {
|
||||
enable: data.resize,
|
||||
},
|
||||
lang: this.$store.state.locale,
|
||||
placeholder: data.placeholder,
|
||||
})
|
||||
},
|
||||
contentValue() {
|
||||
return this.contentEditor.getValue();
|
||||
},
|
||||
async contentHtml() {
|
||||
return await this.contentEditor.getHTML()
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
let _ts = this;
|
||||
const responseData = await _ts.$axios.$get('/api/upload/token');
|
||||
if (responseData) {
|
||||
_ts.$store.commit('setUploadHeaders', responseData.uploadToken);
|
||||
_ts.$set(_ts, 'tokenURL', {
|
||||
token: responseData.uploadToken || '',
|
||||
URL: responseData.uploadURL || '',
|
||||
linkToImageURL: responseData.linkToImageURL || ''
|
||||
})
|
||||
}
|
||||
_ts.contentEditor = _ts._initEditor({
|
||||
id: 'contentEditor',
|
||||
mode: 'both',
|
||||
height: 480,
|
||||
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
|
||||
resize: false,
|
||||
value: _ts.initValue
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "~vditor/src/assets/less/index.less";
|
||||
|
||||
</style>
|
||||
@ -19,7 +19,9 @@
|
||||
</el-form-item>
|
||||
<br>
|
||||
<el-form-item label="作品集介绍">
|
||||
<div id="contentEditor"></div>
|
||||
<content-editor mode="sv" :cacheId="'portfolio-' + (portfolio.idPortfolio || '')"
|
||||
:initValue="portfolio.portfolioDescription||''" v-if="isLoading"
|
||||
ref="contentEditor"></content-editor>
|
||||
</el-form-item>
|
||||
<el-form-item class="text-right">
|
||||
<el-button :loading="loading" @click="deletePortfolio" v-if="isEdit">删除</el-button>
|
||||
@ -89,9 +91,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import {mapState} from 'vuex';
|
||||
import apiConfig from '~/config/api.config';
|
||||
import ContentEditor from "@/components/ContentEditor.vue";
|
||||
|
||||
export default {
|
||||
name: "PortfolioPost",
|
||||
@ -107,7 +108,9 @@ export default {
|
||||
.catch(err => error({statusCode: 404}))
|
||||
])
|
||||
},
|
||||
|
||||
components: {
|
||||
ContentEditor
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
portfolioDetail: state => state.portfolio.detail.data,
|
||||
@ -134,19 +137,10 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
contentEditor: null,
|
||||
portfolio: {
|
||||
idPortfolio: 0,
|
||||
portfolioDescription: ''
|
||||
},
|
||||
// rules: {
|
||||
// portfolioTitle: [
|
||||
// {required: true, message: '请输入作品集名称', trigger: 'blur'}
|
||||
// ],
|
||||
// portfolioDescription: [
|
||||
// {required: true, message: '请输入作品集介绍', trigger: 'blur'}
|
||||
// ]
|
||||
// },
|
||||
loading: false,
|
||||
tokenURL: {
|
||||
URL: '',
|
||||
@ -158,104 +152,17 @@ export default {
|
||||
isEdit: false,
|
||||
autoCrop: true,
|
||||
notificationFlag: true,
|
||||
contentHtml: {}
|
||||
contentValue: {
|
||||
portfolioDescription: '',
|
||||
portfolioDescriptionHtml: ''
|
||||
},
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
realTime(data) {
|
||||
this.cropImg = data;
|
||||
},
|
||||
_initEditor(data) {
|
||||
//初始化
|
||||
let _ts = this;
|
||||
let toolbar = [
|
||||
'emoji',
|
||||
'headings',
|
||||
'bold',
|
||||
'italic',
|
||||
'strike',
|
||||
'link',
|
||||
'|',
|
||||
'list',
|
||||
'ordered-list',
|
||||
'check',
|
||||
'outdent',
|
||||
'indent',
|
||||
'|',
|
||||
'quote',
|
||||
'line',
|
||||
'code',
|
||||
'inline-code',
|
||||
'insert-before',
|
||||
'insert-after',
|
||||
'|',
|
||||
// 'upload',
|
||||
// 'record',
|
||||
'table',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'edit-mode',
|
||||
{
|
||||
name: 'more',
|
||||
toolbar: [
|
||||
'fullscreen',
|
||||
'both',
|
||||
'preview',
|
||||
'info'
|
||||
],
|
||||
}]
|
||||
return new Vue.Vditor(data.id, {
|
||||
toolbar,
|
||||
mode: 'sv',
|
||||
tab: '\t',
|
||||
cdn: apiConfig.VDITOR,
|
||||
cache: {
|
||||
enable: this.$route.params.article_id ? false : true,
|
||||
id: this.$route.params.article_id ? this.$route.params.article_id : '',
|
||||
},
|
||||
after() {
|
||||
_ts.contentEditor.setValue(data.value ? data.value : '');
|
||||
|
||||
},
|
||||
input: (val) => {
|
||||
this.portfolio.portfolioDescription = val
|
||||
},
|
||||
typewriterMode: true,
|
||||
hint: {
|
||||
emoji: Vue.emoji
|
||||
},
|
||||
preview: {
|
||||
markdown: {
|
||||
toc: true,
|
||||
},
|
||||
math: {
|
||||
inlineDigit: true
|
||||
},
|
||||
delay: 500,
|
||||
mode: data.mode,
|
||||
/*url: `${process.env.Server}/api/console/markdown`,*/
|
||||
parse: (element) => {
|
||||
if (element.style.display === 'none') {
|
||||
return false
|
||||
}
|
||||
// LazyLoadImage();
|
||||
// Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
|
||||
},
|
||||
theme: {
|
||||
cdn: apiConfig.VDITOR_CSS
|
||||
}
|
||||
},
|
||||
height: data.height,
|
||||
counter: 102400,
|
||||
resize: {
|
||||
enable: data.resize,
|
||||
},
|
||||
lang: this.$store.state.locale,
|
||||
// placeholder: data.placeholder,
|
||||
})
|
||||
},
|
||||
handleAvatarSuccess(res) {
|
||||
let _ts = this;
|
||||
if (res && res.data && res.data.url) {
|
||||
@ -291,22 +198,15 @@ export default {
|
||||
// _ts.$refs.cropper?.replace(this.result);
|
||||
}
|
||||
},
|
||||
handleSubmitData() {
|
||||
async handleSubmitData() {
|
||||
let _ts = this;
|
||||
_ts.$set(_ts, 'loading', true);
|
||||
let portfolioDescription = _ts.contentEditor.getValue();
|
||||
let portfolioDescriptionHtml = _ts.contentEditor.getHTML();
|
||||
let data = _ts.portfolio;
|
||||
data.portfolioDescription = portfolioDescription;
|
||||
data.portfolioDescriptionHtml = portfolioDescriptionHtml;
|
||||
data.headImgType = 0
|
||||
// if (_ts.isEdit) {
|
||||
|
||||
//
|
||||
// } else {
|
||||
// data.headImgUrl = _ts.headImgUrl
|
||||
// }
|
||||
if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
|
||||
data.portfolioDescription = _ts.$refs.contentEditor.contentValue();
|
||||
data.portfolioDescriptionHtml = await _ts.$refs.contentEditor.contentHtml();
|
||||
data.headImgType = 0;
|
||||
data.headImgUrl = _ts.headImgUrl;
|
||||
if ((data.portfolioDescription || undefined) === undefined || (data.portfolioDescriptionHtml || undefined) === undefined) {
|
||||
this.$message.error('请输入必填信息');
|
||||
return false
|
||||
}
|
||||
@ -314,10 +214,8 @@ export default {
|
||||
},
|
||||
async submitData() {
|
||||
let _ts = this
|
||||
let data = this.handleSubmitData()
|
||||
let data = await this.handleSubmitData()
|
||||
let id = _ts.idPortfolio;
|
||||
|
||||
data.headImgUrl = _ts.headImgUrl
|
||||
let title = id ? '更新' : '添加';
|
||||
_ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
|
||||
if (res && res.message) {
|
||||
@ -429,16 +327,6 @@ export default {
|
||||
});
|
||||
let _ts = this;
|
||||
_ts.$store.commit("setActiveMenu", "portfolio-post");
|
||||
this.$axios.$get('/api/upload/simple/token').then(function (res) {
|
||||
if (res) {
|
||||
_ts.$store.commit('setUploadHeaders', res.uploadToken);
|
||||
_ts.$set(_ts, 'tokenURL', {
|
||||
token: res.uploadToken || '',
|
||||
URL: res.uploadURL || '',
|
||||
linkToImageURL: res.linkToImageURL || ''
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
let portfolioContent = '';
|
||||
if (_ts.idPortfolio) {
|
||||
@ -450,25 +338,15 @@ export default {
|
||||
_ts.$refs?.cropper?.replace(_ts.portfolioDetail.headImgUrl);
|
||||
portfolioContent = _ts.portfolioDetail.portfolioDescription;
|
||||
}
|
||||
|
||||
} else {
|
||||
this.isEdit = false
|
||||
}
|
||||
|
||||
this.contentEditor = this._initEditor({
|
||||
id: 'contentEditor',
|
||||
mode: 'both',
|
||||
height: 480,
|
||||
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
|
||||
resize: false,
|
||||
value: this.portfolio.portfolioDescription
|
||||
});
|
||||
this.isLoading = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "~vditor/src/assets/less/index.less";
|
||||
|
||||
.button_box {
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user