From b6347148519bad77afc37ce62a9bdaaa2e347d99 Mon Sep 17 00:00:00 2001 From: ronger Date: Mon, 26 Feb 2024 14:56:56 +0800 Subject: [PATCH] =?UTF-8?q?fix(component):=20=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B0=81=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ContentEditor.vue | 65 +++++++++++++++++------ pages/portfolio/post/_portfolio_id.vue | 72 +++++++++----------------- 2 files changed, 72 insertions(+), 65 deletions(-) diff --git a/components/ContentEditor.vue b/components/ContentEditor.vue index 03eee69..5a1d4f1 100644 --- a/components/ContentEditor.vue +++ b/components/ContentEditor.vue @@ -13,12 +13,21 @@ export default { data() { return { contentEditor: null, + tokenURL: {} } }, props: { initValue: { type: String, required: true + }, + cacheId: { + type: String, + required: true + }, + mode: { + type: String, + required: true } }, methods: { @@ -46,7 +55,7 @@ export default { 'insert-before', 'insert-after', '|', - // 'upload', + 'upload', // 'record', 'table', '|', @@ -65,24 +74,29 @@ export default { }] return new Vue.Vditor(data.id, { toolbar, - mode: 'sv', + mode: _ts.mode, 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 : '', + 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 @@ -101,38 +115,55 @@ export default { 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, + placeholder: data.placeholder, }) }, - editValue() { - console.log('我被执行了') - let data = this.contentEditor.getValue(); - this.$emit('editValue', data) + contentValue() { + return this.contentEditor.getValue(); }, - editHtml() { - let data = this.contentEditor.getHTML(); - this.$emit('editHtml', data) + async contentHtml() { + return await this.contentEditor.getHTML() } }, - mounted() { - this.contentEditor = this._initEditor({ + 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: this.initValue + value: _ts.initValue }); } } - diff --git a/pages/portfolio/post/_portfolio_id.vue b/pages/portfolio/post/_portfolio_id.vue index ef94740..f37fb6b 100644 --- a/pages/portfolio/post/_portfolio_id.vue +++ b/pages/portfolio/post/_portfolio_id.vue @@ -19,8 +19,8 @@
- @@ -37,11 +37,11 @@
@@ -59,11 +59,11 @@
+ :before-upload="beforeAvatarUpload" + :multiple="true" + :show-file-list="false" + action="" + class="avatar-uploader">
上传
@@ -80,11 +80,11 @@
+ :closable="false" + center + show-icon + title="用户无权限" + type="warning">
@@ -160,12 +160,6 @@ export default { } }, methods: { - editValue(data) { - this.contentValue.portfolioDescription = data - }, - editHtml(data) { - this.contentValue.portfolioDescriptionHtml = data - }, realTime(data) { this.cropImg = data; }, @@ -204,17 +198,15 @@ export default { // _ts.$refs.cropper?.replace(this.result); } }, - handleSubmitData() { + async handleSubmitData() { let _ts = this; _ts.$set(_ts, 'loading', true); - - _ts.$refs.contentEditor.editValue(); - _ts.$refs.contentEditor.editHtml(); let data = _ts.portfolio; - data.portfolioDescription = _ts.contentValue.portfolioDescription; - data.portfolioDescriptionHtml = _ts.contentValue.portfolioDescriptionHtml; - data.headImgType = 0 - 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 } @@ -222,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) { @@ -245,7 +235,6 @@ export default { }, async updatePortfolio() { - console.log('我怎么一直在执行') let _ts = this let data = this.handleSubmitData() let id = _ts.idPortfolio; @@ -338,17 +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) { @@ -360,7 +338,6 @@ export default { _ts.$refs?.cropper?.replace(_ts.portfolioDetail.headImgUrl); portfolioContent = _ts.portfolioDetail.portfolioDescription; } - } else { this.isEdit = false } @@ -370,7 +347,6 @@ export default {