1. 优化富文本

src/components/Editor/index.vue

@@ -11,6 +11,9 @@
       style="display: none"
       ref="upload"
       v-if="this.type == 'url'"
+      :data="{
+        bucket: 'tourism'
+      }"
     >
     </el-upload>
     <div class="editor" ref="editor" :style="styles"></div>
@@ -60,7 +63,7 @@ export default {
   },
   data() {
     return {
-      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      uploadUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE, // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken()
       },
@@ -182,7 +185,7 @@ export default {
         // 获取光标所在位置
         let length = quill.getSelection().index;
         // 插入图片  res.url为服务器返回的图片地址
-        quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
+        quill.insertEmbed(length, "image", res.data.url);
         // 调整光标到最后
         quill.setSelection(length + 1);
       } else {

src/views/tourism/membershipManagement/electronicMembership/formBox/membershipLevelForm.vue

@@ -152,28 +152,7 @@ export default {
         content: [{ required: true, message: "请输入开放状态", trigger: ["change","blur"] }],
       },
       scenicAreaProducts: [],// 景点产品关联
-      // 富文本编辑器配置
-      editorOption: {
-        modules: {
-          toolbar: [
-            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-            ['blockquote', 'code-block'], // 引用  代码块
-            [{ header: 1 }, { header: 2 }], // 1、2 级标题
-            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
-            [{ indent: '-1' }, { indent: '+1' }], // 缩进
-            [{ direction: 'rtl' }], // 文本方向
-            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
-            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-            // [{ font: ['songti'] }], // 字体种类
-            [{ align: [] }], // 对齐方式
-            ['clean'], // 清除文本格式
-            ['image', 'video'] // 链接、图片、视频
-          ]
-        },
-        placeholder: '请输入正文'
-      },
+
       //  上传文件
       actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
       actionUrlLoading: false,

src/views/tourism/productManagement/formBox/scenicAreaTicketsForm.vue

@@ -55,28 +55,12 @@
           <el-tabs v-model="activeName">
             <el-tab-pane label="产品介绍" name="first">
               <el-form-item label-width="0" label="0" prop="performSnapshot">
-                <quill-editor
-                  v-model="form.performSnapshot"
-                  ref="myQuillEditor"
-                  :options="editorOption"
-                  @blur="onEditorBlur($event)"
-                  @focus="onEditorFocus($event)"
-                  @change="($event)=>onEditorChange($event,'performSnapshot')"
-                  @ready="onEditorReady($event)">
-                </quill-editor>
+                <editor ref="editor" v-model="form.performSnapshot" :fileSize="20" :min-height="200" />
               </el-form-item>
             </el-tab-pane>
             <el-tab-pane label="购票须知" name="second">
               <el-form-item label-width="0" label="0" prop="performNotice">
-                <quill-editor
-                  v-model="form.performNotice"
-                  ref="myQuillEditor"
-                  :options="editorOption"
-                  @blur="onEditorBlur($event)"
-                  @focus="onEditorFocus($event)"
-                  @change="($event)=>onEditorChange($event,'performNotice')"
-                  @ready="onEditorReady($event)">
-              </quill-editor>
+                <editor ref="editor" v-model="form.performNotice" :fileSize="20" :min-height="200" />
               </el-form-item>
             </el-tab-pane>
           </el-tabs>
@@ -106,16 +90,12 @@ import {
   updateTableApi,
   addTableApi
  } from '@/api/CURD'
-import { quillEditor } from 'vue-quill-editor'
- 
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
+import Editor from "@/components/Editor";
 
 export default {
   name: "addAndEdit",
   dicts: ['tourism_online_status','tourism_online_type'],
-  components: {quillEditor},
+  components: {Editor},
   data() {
     return {
       title: "",
@@ -140,28 +120,6 @@ export default {
         performNotice: [{ required: true, message: "请输购票须知", trigger: ["change","blur"] }],
       },
       scenicAreaProducts: [],// 景点产品关联
-      // 富文本编辑器配置
-      editorOption: {
-        modules: {
-          toolbar: [
-            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-            ['blockquote', 'code-block'], // 引用  代码块
-            [{ header: 1 }, { header: 2 }], // 1、2 级标题
-            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
-            [{ indent: '-1' }, { indent: '+1' }], // 缩进
-            [{ direction: 'rtl' }], // 文本方向
-            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
-            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-            // [{ font: ['songti'] }], // 字体种类
-            [{ align: [] }], // 对齐方式
-            ['clean'], // 清除文本格式
-            ['image', 'video'] // 链接、图片、视频
-          ]
-        },
-        placeholder: '请输入正文'
-      },
 
       //  上传文件
       actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
@@ -280,24 +238,6 @@ export default {
       this.reset();
       this.open = false;
     },
-    // 失去焦点事件
-    onEditorBlur(quill) {
-      console.log('editor blur!', quill)
-    },
-    // 获得焦点事件
-    onEditorFocus(quill) {
-      console.log('editor focus!', quill)
-    },
-    // 准备富文本编辑器
-    onEditorReady(quill) {
-      console.log('editor ready!', quill)
-    },
-    // 内容改变事件
-    onEditorChange({ quill, html, text },key) {
-      console.log('editor change!', quill, html, text)
-      this.form['key'] = html
-    },
-
 
     /**  上传图片  */
     handleAvatarSuccess(res, file) {

src/views/tourism/scenicAreaManagement/contentManagement/formBox/attractionInfoCultureForm.vue

@@ -78,16 +78,7 @@
           </el-form-item>
           <el-form-item label=""  label-width="0" prop="content">
             <el-input v-if="form.contentType==2" style="width: 350px;" v-model="form.content" placeholder="请输入链接内容" />
-            <quill-editor
-              v-if="form.contentType==1"
-              v-model="form.content"
-              ref="myQuillEditor"
-              :options="editorOption"
-              @blur="onEditorBlur($event)"
-              @focus="onEditorFocus($event)"
-              @change="onEditorChange($event)"
-              @ready="onEditorReady($event)">
-            </quill-editor>
+            <editor ref="editor" v-if="form.contentType==1" v-model="form.content" :fileSize="20" :min-height="200" />
           </el-form-item>
         </el-form>
       </div>
@@ -115,16 +106,12 @@ import {
   updateTableApi,
   addTableApi
  } from '@/api/CURD'
-import { quillEditor } from 'vue-quill-editor'
  
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
-
+import Editor from "@/components/Editor";
 export default {
   name: "addAndEdit",
   dicts: ['tourism_attractionInfoIntroduce_type'],
-  components: {quillEditor},
+  components: {Editor},
   data() {
     return {
       title: "",
@@ -150,29 +137,6 @@ export default {
         content: [{ required: true, message: "请输入内容", trigger: ["change","blur"] }],
       },
       scenicAreaProducts: [],// 景点产品关联
-      // 富文本编辑器配置
-      editorOption: {
-        modules: {
-          toolbar: [
-            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-            ['blockquote', 'code-block'], // 引用  代码块
-            [{ header: 1 }, { header: 2 }], // 1、2 级标题
-            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
-            [{ indent: '-1' }, { indent: '+1' }], // 缩进
-            [{ direction: 'rtl' }], // 文本方向
-            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
-            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-            // [{ font: ['songti'] }], // 字体种类
-            [{ align: [] }], // 对齐方式
-            ['clean'], // 清除文本格式
-            ['image', 'video'] // 链接、图片、视频
-          ]
-        },
-        placeholder: '请输入正文'
-      },
-
       //  上传文件
       actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
       actionUrlLoading: false,
@@ -304,25 +268,6 @@ export default {
       this.$set(this.form,'content','')
     },
 
-    // 失去焦点事件
-    onEditorBlur(quill) {
-      console.log('editor blur!', quill)
-    },
-    // 获得焦点事件
-    onEditorFocus(quill) {
-      console.log('editor focus!', quill)
-    },
-    // 准备富文本编辑器
-    onEditorReady(quill) {
-      console.log('editor ready!', quill)
-    },
-    // 内容改变事件
-    onEditorChange({ quill, html, text }) {
-      console.log('editor change!', quill, html, text)
-      this.form.content = html
-    },
-
-
     /**  上传图片 单张  */
     handleAvatarSuccess(response, file, fileList) {
       console.log("res, file",response, file, fileList)

src/views/tourism/scenicAreaManagement/contentManagement/formBox/attractionInfoIntroduceForm.vue

@@ -121,16 +121,7 @@
           </el-form-item>
           <el-form-item label=""  label-width="0" prop="content">
             <el-input v-if="form.contentType==2" style="width: 350px;" v-model="form.content" placeholder="请输入链接内容" />
-            <quill-editor
-              v-if="form.contentType==1"
-              v-model="form.content"
-              ref="myQuillEditor"
-              :options="editorOption"
-              @blur="onEditorBlur($event)"
-              @focus="onEditorFocus($event)"
-              @change="onEditorChange($event)"
-              @ready="onEditorReady($event)">
-            </quill-editor>
+            <editor ref="editor" v-if="form.contentType==1" v-model="form.content" :fileSize="20" :min-height="200" />
           </el-form-item>
         </el-form>
       </div>
@@ -158,16 +149,11 @@ import {
   updateTableApi,
   addTableApi
  } from '@/api/CURD'
-import { quillEditor } from 'vue-quill-editor'
- 
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
-
+import Editor from "@/components/Editor";
 export default {
   name: "addAndEdit",
   dicts: ['tourism_attractionInfoIntroduce_type'],
-  components: {quillEditor},
+  components: {Editor},
   data() {
     return {
       title: "",
@@ -193,29 +179,6 @@ export default {
         content: [{ required: true, message: "请输入内容", trigger: ["change","blur"] }],
       },
       scenicAreaProducts: [],// 景点产品关联
-      // 富文本编辑器配置
-      editorOption: {
-        modules: {
-          toolbar: [
-            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-            ['blockquote', 'code-block'], // 引用  代码块
-            [{ header: 1 }, { header: 2 }], // 1、2 级标题
-            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
-            [{ indent: '-1' }, { indent: '+1' }], // 缩进
-            [{ direction: 'rtl' }], // 文本方向
-            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
-            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-            // [{ font: ['songti'] }], // 字体种类
-            [{ align: [] }], // 对齐方式
-            ['clean'], // 清除文本格式
-            ['image', 'video'] // 链接、图片、视频
-          ]
-        },
-        placeholder: '请输入正文'
-      },
-
       //  上传文件
       actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
       actionUrlLoading: false,
@@ -351,25 +314,6 @@ export default {
       this.$set(this.form,'content','')
     },
 
-    // 失去焦点事件
-    onEditorBlur(quill) {
-      console.log('editor blur!', quill)
-    },
-    // 获得焦点事件
-    onEditorFocus(quill) {
-      console.log('editor focus!', quill)
-    },
-    // 准备富文本编辑器
-    onEditorReady(quill) {
-      console.log('editor ready!', quill)
-    },
-    // 内容改变事件
-    onEditorChange({ quill, html, text }) {
-      console.log('editor change!', quill, html, text)
-      this.form.content = html
-    },
-
-
     /**  上传图片 单张  */
     handleAvatarSuccess(response, file, fileList) {
       console.log("res, file",response, file, fileList)

src/views/tourism/scenicAreaManagement/contentManagement/formBox/attractionInfoManagementForm.vue

@@ -105,15 +105,7 @@
           <el-form-item label="内容详情：" prop="content">
           </el-form-item>
           <div style="padding-left: 30px;">
-            <quill-editor
-                v-model="form.content"
-                ref="myQuillEditor"
-                :options="editorOption"
-                @blur="onEditorBlur($event)"
-                @focus="onEditorFocus($event)"
-                @change="onEditorChange($event)"
-                @ready="onEditorReady($event)">
-            </quill-editor>
+            <editor ref="editor" v-model="form.content" :fileSize="20" :min-height="200" />
           </div>
         </el-form>
       </div>
@@ -141,19 +133,13 @@ import {
   updateTableApi,
   addTableApi
  } from '@/api/CURD'
-import { quillEditor } from 'vue-quill-editor'
- 
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
+ import Editor from "@/components/Editor";
  
 
 export default {
   name: "addAndEdit",
   dicts: [],
-  components: {
-    quillEditor
-  },
+  components: {Editor},
   data() {
     return {
       title: "",
@@ -179,28 +165,6 @@ export default {
         content: [{ required: true, message: "请输入开放状态", trigger: ["change","blur"] }],
       },
       scenicAreaProducts: [],// 景点产品关联
-      // 富文本编辑器配置
-      editorOption: {
-        modules: {
-          toolbar: [
-            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-            ['blockquote', 'code-block'], // 引用  代码块
-            [{ header: 1 }, { header: 2 }], // 1、2 级标题
-            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
-            [{ indent: '-1' }, { indent: '+1' }], // 缩进
-            [{ direction: 'rtl' }], // 文本方向
-            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
-            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-            // [{ font: ['songti'] }], // 字体种类
-            [{ align: [] }], // 对齐方式
-            ['clean'], // 清除文本格式
-            ['image', 'video'] // 链接、图片、视频
-          ]
-        },
-        placeholder: '请输入正文'
-      },
       //  上传文件
       actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
       actionUrlLoading: false,
@@ -326,24 +290,7 @@ export default {
       this.reset();
       this.open = false;
     },
-    // 失去焦点事件
-    onEditorBlur(quill) {
-      console.log('editor blur!', quill)
-    },
-    // 获得焦点事件
-    onEditorFocus(quill) {
-      console.log('editor focus!', quill)
-    },
-    // 准备富文本编辑器
-    onEditorReady(quill) {
-      console.log('editor ready!', quill)
-    },
-    // 内容改变事件
-    onEditorChange({ quill, html, text }) {
-      console.log('editor change!', quill, html, text)
-      this.form.content = html
-    },
-
+    
     /**  上传图片 单张  */
     handleAvatarSuccess(response, file, fileList) {
       console.log("res, file",response, file, fileList)

src/views/tourism/scenicAreaManagement/contentManagement/formBox/carouselAdvertisForm.vue

@@ -63,15 +63,7 @@
             <el-color-picker v-model="form.backgroundColor"></el-color-picker>
           </el-form-item>
           <el-form-item label="内容" prop="detail">
-            <quill-editor
-                v-model="form.detail"
-                ref="myQuillEditor"
-                :options="editorOption"
-                @blur="onEditorBlur($event)"
-                @focus="onEditorFocus($event)"
-                @change="onEditorChange($event)"
-                @ready="onEditorReady($event)">
-            </quill-editor>
+            <editor ref="editor" v-model="form.detail" :fileSize="20" :min-height="200" />
           </el-form-item>
         </el-form>
       </div>
@@ -99,16 +91,12 @@ import {
   updateTableApi,
   addTableApi
  } from '@/api/CURD'
-import { quillEditor } from 'vue-quill-editor'
- 
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
+import Editor from "@/components/Editor";
 
 export default {
   name: "addAndEdit",
   dicts: ['tourism_online_status','tourism_online_type'],
-  components: {quillEditor},
+  components: {Editor},
   data() {
     return {
       title: "",
@@ -133,29 +121,6 @@ export default {
         sliderImg: [{ required: true, message: "请上传图片", trigger: ["change","blur"] }],
       },
       scenicAreaProducts: [],// 景点产品关联
-      // 富文本编辑器配置
-      editorOption: {
-        modules: {
-          toolbar: [
-            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-            ['blockquote', 'code-block'], // 引用  代码块
-            [{ header: 1 }, { header: 2 }], // 1、2 级标题
-            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
-            [{ indent: '-1' }, { indent: '+1' }], // 缩进
-            [{ direction: 'rtl' }], // 文本方向
-            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
-            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-            // [{ font: ['songti'] }], // 字体种类
-            [{ align: [] }], // 对齐方式
-            ['clean'], // 清除文本格式
-            ['image', 'video'] // 链接、图片、视频
-          ]
-        },
-        placeholder: '请输入正文'
-      },
-
       //  上传文件
       actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
       actionUrlLoading: false,
@@ -273,24 +238,6 @@ export default {
       this.reset();
       this.open = false;
     },
-    // 失去焦点事件
-    onEditorBlur(quill) {
-      console.log('editor blur!', quill)
-    },
-    // 获得焦点事件
-    onEditorFocus(quill) {
-      console.log('editor focus!', quill)
-    },
-    // 准备富文本编辑器
-    onEditorReady(quill) {
-      console.log('editor ready!', quill)
-    },
-    // 内容改变事件
-    onEditorChange({ quill, html, text }) {
-      console.log('editor change!', quill, html, text)
-      this.form.detail = html
-    },
-
 
     /**  上传图片  */
     handleAvatarSuccess(res, file) {

src/views/tourism/scenicAreaManagement/contentManagement/formBox/eventNotificationsForm.vue

@@ -45,15 +45,7 @@
             </el-radio-group>
           </el-form-item>
           <el-form-item label="内容" prop="noticeContent">
-            <quill-editor
-                v-model="form.noticeContent"
-                ref="myQuillEditor"
-                :options="editorOption"
-                @blur="onEditorBlur($event)"
-                @focus="onEditorFocus($event)"
-                @change="onEditorChange($event)"
-                @ready="onEditorReady($event)">
-            </quill-editor>
+            <editor ref="editor" v-model="form.noticeContent" :fileSize="20" :min-height="200" />
           </el-form-item>
         </el-form>
       </div>
@@ -81,19 +73,12 @@ import {
   updateTableApi,
   addTableApi
  } from '@/api/CURD'
-import { quillEditor } from 'vue-quill-editor'
- 
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
- 
+import Editor from "@/components/Editor";
 
 export default {
   name: "addAndEdit",
   dicts: ['tourism_notice_type','tourism_notice_status'],
-  components: {
-    quillEditor
-  },
+  components: {Editor},
   data() {
     return {
       title: "",
@@ -117,28 +102,6 @@ export default {
         noticeContent: [{ required: false, message: "请输入内容", trigger: ["change","blur"] }],
       },
       scenicAreaProducts: [],// 景点产品关联
-      // 富文本编辑器配置
-      editorOption: {
-        modules: {
-          toolbar: [
-            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-            ['blockquote', 'code-block'], // 引用  代码块
-            [{ header: 1 }, { header: 2 }], // 1、2 级标题
-            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
-            [{ indent: '-1' }, { indent: '+1' }], // 缩进
-            [{ direction: 'rtl' }], // 文本方向
-            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
-            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-            // [{ font: ['songti'] }], // 字体种类
-            [{ align: [] }], // 对齐方式
-            ['clean'], // 清除文本格式
-            ['image', 'video'] // 链接、图片、视频
-          ]
-        },
-        placeholder: '请输入正文'
-      },
     };
   },
   methods: {
@@ -252,23 +215,6 @@ export default {
       this.reset();
       this.open = false;
     },
-    // 失去焦点事件
-    onEditorBlur(quill) {
-      console.log('editor blur!', quill)
-    },
-    // 获得焦点事件
-    onEditorFocus(quill) {
-      console.log('editor focus!', quill)
-    },
-    // 准备富文本编辑器
-    onEditorReady(quill) {
-      console.log('editor ready!', quill)
-    },
-    // 内容改变事件
-    onEditorChange({ quill, html, text }) {
-      console.log('editor change!', quill, html, text)
-      this.form.noticeContent = html
-    },
   },
 };
 </script>

src/views/tourism/scenicAreaManagement/contentManagement/formBox/noticeManagementForm.vue

@@ -30,15 +30,7 @@
               </el-select>
           </el-form-item>
           <el-form-item label="内容：" prop="content">
-            <quill-editor
-                v-model="form.content"
-                ref="myQuillEditor"
-                :options="editorOption"
-                @blur="onEditorBlur($event)"
-                @focus="onEditorFocus($event)"
-                @change="onEditorChange($event)"
-                @ready="onEditorReady($event)">
-            </quill-editor>
+            <editor ref="editor" v-model="form.content" :fileSize="20" :min-height="200" />
           </el-form-item>
         </el-form>
       </div>
@@ -66,16 +58,11 @@ import {
   updateTableApi,
   addTableApi
  } from '@/api/CURD'
-import { quillEditor } from 'vue-quill-editor'
- 
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
-
+ import Editor from "@/components/Editor";
 export default {
   name: "addAndEdit",
   dicts: ['tourism_noticemanagement_type'],
-  components: {quillEditor},
+  components: {Editor},
   data() {
     return {
       title: "",
@@ -97,28 +84,6 @@ export default {
         content: [{ required: true, message: "请输入协议内容", trigger: ["change","blur"] }],
       },
       scenicAreaProducts: [],// 景点产品关联
-      // 富文本编辑器配置
-      editorOption: {
-        modules: {
-          toolbar: [
-            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-            ['blockquote', 'code-block'], // 引用  代码块
-            [{ header: 1 }, { header: 2 }], // 1、2 级标题
-            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
-            [{ indent: '-1' }, { indent: '+1' }], // 缩进
-            [{ direction: 'rtl' }], // 文本方向
-            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
-            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-            // [{ font: ['songti'] }], // 字体种类
-            [{ align: [] }], // 对齐方式
-            ['clean'], // 清除文本格式
-            ['image', 'video'] // 链接、图片、视频
-          ]
-        },
-        placeholder: '请输入正文'
-      },
 
     };
   },
@@ -233,23 +198,6 @@ export default {
       this.reset();
       this.open = false;
     },
-    // 失去焦点事件
-    onEditorBlur(quill) {
-      console.log('editor blur!', quill)
-    },
-    // 获得焦点事件
-    onEditorFocus(quill) {
-      console.log('editor focus!', quill)
-    },
-    // 准备富文本编辑器
-    onEditorReady(quill) {
-      console.log('editor ready!', quill)
-    },
-    // 内容改变事件
-    onEditorChange({ quill, html, text }) {
-      console.log('editor change!', quill, html, text)
-      this.form.content = html
-    },
   },
 };
 </script>

src/views/tourism/scenicAreaManagement/contentManagement/formBox/questionsForm.vue

@@ -23,15 +23,7 @@
             <el-input style="width: 350px;" v-model="form.title" placeholder="请输入标题名称" maxlength="50" show-word-limit />
           </el-form-item>
           <el-form-item label="摘要：" prop="content">
-            <quill-editor
-                v-model="form.content"
-                ref="myQuillEditor"
-                :options="editorOption"
-                @blur="onEditorBlur($event)"
-                @focus="onEditorFocus($event)"
-                @change="onEditorChange($event)"
-                @ready="onEditorReady($event)">
-            </quill-editor>
+            <editor ref="editor" v-model="form.content" :fileSize="20" :min-height="200" />
           </el-form-item>
         </el-form>
       </div>
@@ -59,16 +51,11 @@ import {
   updateTableApi,
   addTableApi
  } from '@/api/CURD'
-import { quillEditor } from 'vue-quill-editor'
- 
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
-
+import Editor from "@/components/Editor";
 export default {
   name: "addAndEdit",
   dicts: [],
-  components: {quillEditor},
+  components: {Editor},
   data() {
     return {
       title: "",
@@ -90,29 +77,6 @@ export default {
         content: [{ required: true, message: "请输入摘要", trigger: ["change","blur"] }],
       },
       scenicAreaProducts: [],// 景点产品关联
-      // 富文本编辑器配置
-      editorOption: {
-        modules: {
-          toolbar: [
-            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-            ['blockquote', 'code-block'], // 引用  代码块
-            [{ header: 1 }, { header: 2 }], // 1、2 级标题
-            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
-            [{ indent: '-1' }, { indent: '+1' }], // 缩进
-            [{ direction: 'rtl' }], // 文本方向
-            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
-            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-            // [{ font: ['songti'] }], // 字体种类
-            [{ align: [] }], // 对齐方式
-            ['clean'], // 清除文本格式
-            ['image', 'video'] // 链接、图片、视频
-          ]
-        },
-        placeholder: '请输入正文'
-      },
-
     };
   },
   methods: {
@@ -226,23 +190,6 @@ export default {
       this.reset();
       this.open = false;
     },
-    // 失去焦点事件
-    onEditorBlur(quill) {
-      console.log('editor blur!', quill)
-    },
-    // 获得焦点事件
-    onEditorFocus(quill) {
-      console.log('editor focus!', quill)
-    },
-    // 准备富文本编辑器
-    onEditorReady(quill) {
-      console.log('editor ready!', quill)
-    },
-    // 内容改变事件
-    onEditorChange({ quill, html, text }) {
-      console.log('editor change!', quill, html, text)
-      this.form.content = html
-    },
   },
 };
 </script>

src/views/tourism/scenicAreaManagement/contentManagement/formBox/tourismStrategyForm.vue

@@ -54,15 +54,7 @@
           </el-form-item>
           <div class="form-title"><span>内容详情</span></div>
           <el-form-item label-width="0" label="" prop="detail">
-            <quill-editor
-                v-model="form.detail"
-                ref="myQuillEditor"
-                :options="editorOption"
-                @blur="onEditorBlur($event)"
-                @focus="onEditorFocus($event)"
-                @change="onEditorChange($event)"
-                @ready="onEditorReady($event)">
-            </quill-editor>
+            <editor ref="editor" v-model="form.detail" :fileSize="20" :min-height="200" />
           </el-form-item>
         </el-form>
       </div>
@@ -90,16 +82,11 @@ import {
   updateTableApi,
   addTableApi
  } from '@/api/CURD'
-import { quillEditor } from 'vue-quill-editor'
- 
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
-
+import Editor from "@/components/Editor";
 export default {
   name: "addAndEdit",
   dicts: ['tourism_online_status','tourism_online_type'],
-  components: {quillEditor},
+  components: {Editor},
   data() {
     return {
       title: "",
@@ -122,29 +109,6 @@ export default {
         imgUrl: [{ required: true, message: "请上传图片", trigger: ["change","blur"] }],
       },
       scenicAreaProducts: [],// 景点产品关联
-      // 富文本编辑器配置
-      editorOption: {
-        modules: {
-          toolbar: [
-            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-            ['blockquote', 'code-block'], // 引用  代码块
-            [{ header: 1 }, { header: 2 }], // 1、2 级标题
-            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
-            [{ indent: '-1' }, { indent: '+1' }], // 缩进
-            [{ direction: 'rtl' }], // 文本方向
-            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
-            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-            // [{ font: ['songti'] }], // 字体种类
-            [{ align: [] }], // 对齐方式
-            ['clean'], // 清除文本格式
-            ['image', 'video'] // 链接、图片、视频
-          ]
-        },
-        placeholder: '请输入正文'
-      },
-
       //  上传文件
       actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
       actionUrlLoading: false,
@@ -262,24 +226,6 @@ export default {
       this.reset();
       this.open = false;
     },
-    // 失去焦点事件
-    onEditorBlur(quill) {
-      console.log('editor blur!', quill)
-    },
-    // 获得焦点事件
-    onEditorFocus(quill) {
-      console.log('editor focus!', quill)
-    },
-    // 准备富文本编辑器
-    onEditorReady(quill) {
-      console.log('editor ready!', quill)
-    },
-    // 内容改变事件
-    onEditorChange({ quill, html, text }) {
-      console.log('editor change!', quill, html, text)
-      this.form.detail = html
-    },
-
 
     /**  上传图片  */
     handleAvatarSuccess(res, file) {