From 0da7dc9f91c92e853e4598c56ea775d72823768f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=9D=E6=A2=A6=E5=9B=AD?= <zhumengyua@qq.com>
Date: Fri, 23 Feb 2024 15:41:41 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=B0=81=E8=A3=85-=E5=AF=8C=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ContentEditor.vue           | 138 ++++++++++++++++++++++
 pages/portfolio/post/_portfolio_id.vue | 154 +++++--------------------
 2 files changed, 166 insertions(+), 126 deletions(-)
 create mode 100644 components/ContentEditor.vue

diff --git a/components/ContentEditor.vue b/components/ContentEditor.vue
new file mode 100644
index 0000000..03eee69
--- /dev/null
+++ b/components/ContentEditor.vue
@@ -0,0 +1,138 @@
+<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,
+    }
+  },
+  props: {
+    initValue: {
+      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: '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 : '');
+
+        },
+        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,
+      })
+    },
+    editValue() {
+      console.log('我被执行了')
+      let data = this.contentEditor.getValue();
+      this.$emit('editValue', data)
+    },
+    editHtml() {
+      let data = this.contentEditor.getHTML();
+      this.$emit('editHtml', data)
+    }
+  },
+  mounted() {
+    this.contentEditor = this._initEditor({
+      id: 'contentEditor',
+      mode: 'both',
+      height: 480,
+      placeholder: '', //this.$t('inputContent', this.$store.state.locale)
+      resize: false,
+      value: this.initValue
+    });
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/portfolio/post/_portfolio_id.vue b/pages/portfolio/post/_portfolio_id.vue
index 627e3f4..ef94740 100644
--- a/pages/portfolio/post/_portfolio_id.vue
+++ b/pages/portfolio/post/_portfolio_id.vue
@@ -19,7 +19,9 @@
               </el-form-item>
               <br>
               <el-form-item label="作品集介绍">
-                <div id="contentEditor"></div>
+                <content-editor @editValue="editValue" :initValue="portfolio.portfolioDescription||''"
+                                v-if="isLoading" @editHtml="editHtml"
+                                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",
@@ -104,10 +105,12 @@ export default {
   asyncData({store, params, error}) {
     return Promise.all([
       store.dispatch('portfolio/fetchPostDetail', params)
-          .catch(err => error({statusCode: 404}))
+        .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,23 @@ export default {
       isEdit: false,
       autoCrop: true,
       notificationFlag: true,
-      contentHtml: {}
+      contentValue: {
+        portfolioDescription: '',
+        portfolioDescriptionHtml: ''
+      },
+      isLoading: false
     }
   },
   methods: {
+    editValue(data) {
+      this.contentValue.portfolioDescription = data
+    },
+    editHtml(data) {
+      this.contentValue.portfolioDescriptionHtml = data
+    },
     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) {
@@ -294,18 +207,13 @@ export default {
     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
-      // }
+      _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) {
         this.$message.error('请输入必填信息');
         return false
@@ -337,6 +245,7 @@ export default {
 
     },
     async updatePortfolio() {
+      console.log('我怎么一直在执行')
       let _ts = this
       let data = this.handleSubmitData()
       let id = _ts.idPortfolio;
@@ -431,6 +340,7 @@ export default {
     _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 || '',
@@ -454,15 +364,7 @@ export default {
     } 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>

From b6347148519bad77afc37ce62a9bdaaa2e347d99 Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Mon, 26 Feb 2024 14:56:56 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix(component):=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=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
     });
   }
 }
 </script>
 
-<style scoped>
+<style lang="less">
+@import "~vditor/src/assets/less/index.less";
 
 </style>
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 @@
               </el-form-item>
               <br>
               <el-form-item label="作品集介绍">
-                <content-editor @editValue="editValue" :initValue="portfolio.portfolioDescription||''"
-                                v-if="isLoading" @editHtml="editHtml"
+                <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">
@@ -37,11 +37,11 @@
               <div style="display: block;">
                 <div class="cropperBox">
                   <vue-cropper
-                      :autoCrop="autoCrop"
-                      :img="headImgUrl"
-                      ref="cropper"
-                      :fixed="true"
-                      @realTime="realTime"
+                    :autoCrop="autoCrop"
+                    :img="headImgUrl"
+                    ref="cropper"
+                    :fixed="true"
+                    @realTime="realTime"
                   />
                 </div>
                 <div class="cropperBox">
@@ -59,11 +59,11 @@
                 <div class="button_box">
 
                   <el-upload
-                      :before-upload="beforeAvatarUpload"
-                      :multiple="true"
-                      :show-file-list="false"
-                      action=""
-                      class="avatar-uploader">
+                    :before-upload="beforeAvatarUpload"
+                    :multiple="true"
+                    :show-file-list="false"
+                    action=""
+                    class="avatar-uploader">
                     <div>
                       <el-button plain round type="primary">上传</el-button>
                     </div>
@@ -80,11 +80,11 @@
     </div>
     <el-col class="text-center" v-else>
       <el-alert
-          :closable="false"
-          center
-          show-icon
-          title="用户无权限"
-          type="warning">
+        :closable="false"
+        center
+        show-icon
+        title="用户无权限"
+        type="warning">
       </el-alert>
     </el-col>
   </div>
@@ -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 {
 </script>
 
 <style lang="less">
-@import "~vditor/src/assets/less/index.less";
 
 .button_box {
   display: flex;