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

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,
+          enable: !_ts.cacheId,
-          id: this.$route.params.article_id ? this.$route.params.article_id : '',
+          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() {
+    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',
       mode: 'both',
       height: 480,
       placeholder: '', //this.$t('inputContent', this.$store.state.locale)
       resize: false,
-      value: this.initValue
+      value: _ts.initValue
     });
   }
 }
 </script>
 
-<style scoped>
+<style lang="less">
+@import "~vditor/src/assets/less/index.less";
 
 </style>

pages/portfolio/post/_portfolio_id.vue

@@ -19,8 +19,8 @@
               </el-form-item>
               <br>
               <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>
               </el-form-item>
               <el-form-item class="text-right">
@@ -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.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('请输入必填信息');
         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 {
 </script>
 
 <style lang="less">
-@import "~vditor/src/assets/less/index.less";
 
 .button_box {
   display: flex;