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] =?UTF-8?q?=E5=B0=81=E8=A3=85-=E5=AF=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=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>