添加在线编辑器

src/views/sylive/activity/components/activity-item.vue

@@ -62,12 +62,14 @@
         />
       </el-form-item>
       <el-form-item label="商品简介:" prop="introduction">
-        <el-input
-          v-model="form.introduction"
-          placeholder="请输入商品简介"
-          :rows="5"
-          type="textarea"
-        />
+        <!-- 编辑器 -->
+        <div v-if="editversion">
+          <tinymce-editor
+            :init="editoption"
+            v-model="form.introduction"
+            placeholder="请输入商品简介"
+          />
+        </div>
       </el-form-item>
     </el-form>
     <template v-slot:footer>
@@ -80,11 +82,12 @@
 </template>
 
 <script>
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
   import EleImageUpload from 'ele-admin/es/ele-image-upload';
   import request from '@/utils/request';
   import { updateActivityItem } from '@/api/sylive/activity';
   export default {
-    components: { EleImageUpload },
+    components: { EleImageUpload, TinymceEditor },
     props: {
       // 弹窗是否打开
       visible: Boolean,
@@ -102,6 +105,10 @@
         introduction: ''
       };
       return {
+        editversion: false,
+        editoption: {
+          height: 300
+        },
         defaultForm,
         // 表单数据
         form: { ...defaultForm },
@@ -235,7 +242,9 @@
     },
     watch: {
       visible(visible) {
+        this.editversion = false;
         if (visible) {
+          this.editversion = true;
           if (this.data) {
             this.$util.assignObject(this.form, {
               ...this.data
@@ -258,4 +267,7 @@
     margin-top: 5px;
     margin-bottom: 5px;
   }
+  .tox-toolbar__group:last-child {
+    display: none !important;
+  }
 </style>