peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(component): 编辑器组件封装

Browse Source
This commit is contained in:
ronger 2024-02-26 14:56:56 +08:00
parent 0da7dc9f91
commit b634714851
2 changed files with 72 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
components/ContentEditor.vue
View File

@ -13,12 +13,21 @@ export default {
data() { data() {
return { return {
contentEditor: null, contentEditor: null,
tokenURL: {}
} }
}, },
props: { props: {
initValue: { initValue: {
type: String, type: String,
required: true required: true
},
cacheId: {
type: String,
required: true
},
mode: {
type: String,
required: true
} }
}, },
methods: { methods: {
@ -46,7 +55,7 @@ export default {
'insert-before', 'insert-before',
'insert-after', 'insert-after',
'|', '|',
// 'upload', 'upload',
// 'record', // 'record',
'table', 'table',
'|', '|',
@ -65,24 +74,29 @@ export default {
}] }]
return new Vue.Vditor(data.id, { return new Vue.Vditor(data.id, {
toolbar, toolbar,
mode: 'sv', mode: _ts.mode,
tab: '\t', tab: '\t',
cdn: apiConfig.VDITOR, cdn: apiConfig.VDITOR,
cache: { cache: {
enable: this.$route.params.article_id ? false : true, enable: !_ts.cacheId,
id: this.$route.params.article_id ? this.$route.params.article_id : '', id: _ts.cacheId,
}, },
after() { after() {
_ts.contentEditor.setValue(data.value ? data.value : ''); _ts.contentEditor.setValue(data.value ? data.value : '');
}, },
typewriterMode: true, typewriterMode: true,
hint: { hint: {
emoji: Vue.emoji emoji: Vue.emoji
}, },
preview: { preview: {
hljs: {
enable: true,
lineNumber: true,
style: 'github'
},
markdown: { markdown: {
toc: true, toc: true,
autoSpace: true
}, },
math: { math: {
inlineDigit: true inlineDigit: true
@ -101,38 +115,55 @@ export default {
cdn: apiConfig.VDITOR_CSS 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, height: data.height,
counter: 102400, counter: 102400,
resize: { resize: {
enable: data.resize, enable: data.resize,
}, },
lang: this.$store.state.locale, lang: this.$store.state.locale,
// placeholder: data.placeholder, placeholder: data.placeholder,
}) })
}, },
editValue() { contentValue() {
console.log('我被执行了') return this.contentEditor.getValue();
let data = this.contentEditor.getValue();
this.$emit('editValue', data)
}, },
editHtml() { async contentHtml() {
let data = this.contentEditor.getHTML(); return await this.contentEditor.getHTML()
this.$emit('editHtml', data)
} }
}, },
mounted() { async mounted() {
this.contentEditor = this._initEditor({ 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', id: 'contentEditor',
mode: 'both', mode: 'both',
height: 480, height: 480,
placeholder: '', //this.$t('inputContent', this.$store.state.locale) placeholder: '', //this.$t('inputContent', this.$store.state.locale)
resize: false, resize: false,
value: this.initValue value: _ts.initValue
}); });
} }
} }
</script> </script>
<style scoped> <style lang="less">
@import "~vditor/src/assets/less/index.less";
</style> </style>

72
pages/portfolio/post/_portfolio_id.vue
View File

@ -19,8 +19,8 @@
</el-form-item> </el-form-item>
<br> <br>
<el-form-item label="作品集介绍"> <el-form-item label="作品集介绍">
<content-editor @editValue="editValue" :initValue="portfolio.portfolioDescription||''" <content-editor mode="sv" :cacheId="'portfolio-' + (portfolio.idPortfolio || '')"
v-if="isLoading" @editHtml="editHtml" :initValue="portfolio.portfolioDescription||''" v-if="isLoading"
ref="contentEditor"></content-editor> ref="contentEditor"></content-editor>
</el-form-item> </el-form-item>
<el-form-item class="text-right"> <el-form-item class="text-right">
@ -37,11 +37,11 @@
<div style="display: block;"> <div style="display: block;">
<div class="cropperBox"> <div class="cropperBox">
<vue-cropper <vue-cropper
:autoCrop="autoCrop" :autoCrop="autoCrop"
:img="headImgUrl" :img="headImgUrl"
ref="cropper" ref="cropper"
:fixed="true" :fixed="true"
@realTime="realTime" @realTime="realTime"
/> />
</div> </div>
<div class="cropperBox"> <div class="cropperBox">
@ -59,11 +59,11 @@
<div class="button_box"> <div class="button_box">
<el-upload <el-upload
:before-upload="beforeAvatarUpload" :before-upload="beforeAvatarUpload"
:multiple="true" :multiple="true"
:show-file-list="false" :show-file-list="false"
action="" action=""
class="avatar-uploader"> class="avatar-uploader">
<div> <div>
<el-button plain round type="primary">上传</el-button> <el-button plain round type="primary">上传</el-button>
</div> </div>
@ -80,11 +80,11 @@
</div> </div>
<el-col class="text-center" v-else> <el-col class="text-center" v-else>
<el-alert <el-alert
:closable="false" :closable="false"
center center
show-icon show-icon
title="用户无权限" title="用户无权限"
type="warning"> type="warning">
</el-alert> </el-alert>
</el-col> </el-col>
</div> </div>
@ -160,12 +160,6 @@ export default {
} }
}, },
methods: { methods: {
editValue(data) {
this.contentValue.portfolioDescription = data
},
editHtml(data) {
this.contentValue.portfolioDescriptionHtml = data
},
realTime(data) { realTime(data) {
this.cropImg = data; this.cropImg = data;
}, },
@ -204,17 +198,15 @@ export default {
// _ts.$refs.cropper?.replace(this.result); // _ts.$refs.cropper?.replace(this.result);
} }
}, },
handleSubmitData() { async handleSubmitData() {
let _ts = this; let _ts = this;
_ts.$set(_ts, 'loading', true); _ts.$set(_ts, 'loading', true);
_ts.$refs.contentEditor.editValue();
_ts.$refs.contentEditor.editHtml();
let data = _ts.portfolio; let data = _ts.portfolio;
data.portfolioDescription = _ts.contentValue.portfolioDescription; data.portfolioDescription = _ts.$refs.contentEditor.contentValue();
data.portfolioDescriptionHtml = _ts.contentValue.portfolioDescriptionHtml; data.portfolioDescriptionHtml = await _ts.$refs.contentEditor.contentHtml();
data.headImgType = 0 data.headImgType = 0;
if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) { data.headImgUrl = _ts.headImgUrl;
if ((data.portfolioDescription || undefined) === undefined || (data.portfolioDescriptionHtml || undefined) === undefined) {
this.$message.error('请输入必填信息'); this.$message.error('请输入必填信息');
return false return false
} }
@ -222,10 +214,8 @@ export default {
}, },
async submitData() { async submitData() {
let _ts = this let _ts = this
let data = this.handleSubmitData() let data = await this.handleSubmitData()
let id = _ts.idPortfolio; let id = _ts.idPortfolio;
data.headImgUrl = _ts.headImgUrl
let title = id ? '更新' : '添加'; let title = id ? '更新' : '添加';
_ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) { _ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
if (res && res.message) { if (res && res.message) {
@ -245,7 +235,6 @@ export default {
}, },
async updatePortfolio() { async updatePortfolio() {
console.log('我怎么一直在执行')
let _ts = this let _ts = this
let data = this.handleSubmitData() let data = this.handleSubmitData()
let id = _ts.idPortfolio; let id = _ts.idPortfolio;
@ -338,17 +327,6 @@ export default {
}); });
let _ts = this; let _ts = this;
_ts.$store.commit("setActiveMenu", "portfolio-post"); _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 = ''; let portfolioContent = '';
if (_ts.idPortfolio) { if (_ts.idPortfolio) {
@ -360,7 +338,6 @@ export default {
_ts.$refs?.cropper?.replace(_ts.portfolioDetail.headImgUrl); _ts.$refs?.cropper?.replace(_ts.portfolioDetail.headImgUrl);
portfolioContent = _ts.portfolioDetail.portfolioDescription; portfolioContent = _ts.portfolioDetail.portfolioDescription;
} }
} else { } else {
this.isEdit = false this.isEdit = false
} }
@ -370,7 +347,6 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import "~vditor/src/assets/less/index.less";
.button_box { .button_box {
display: flex; display: flex;