feat: 模板字段类型支持富文本编辑器

package.json

@@ -29,7 +29,8 @@
     "vue-qr": "^2.3.0",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3",
-    "vuex-class": "^0.3.2"
+    "vuex-class": "^0.3.2",
+    "wangeditor": "^4.6.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.3.0",

src/components/TemplateDetail.vue

@@ -11,7 +11,7 @@
         </component>
      </div>
      <component 
-      v-else-if="detailInformation.type === 3"
+      v-else-if="detailInformation.type === DataType.Unit"
       :is="getComponent(detailInformation.type)"
       :proofSubItem="detailInformation"
      >
@@ -27,6 +27,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import Types from '@/components/template/index';
+import { DataType } from '@/const/enum';
 @Component({
   name: 'TemplateDetail',
 })
@@ -36,7 +37,9 @@ export default class TemplateDetail extends Vue {
   })
   private detailInformation: any;
   private readonly typeComponent: any = Types;
-  private getComponent(type: number) {
+  private DataType = DataType;
+  
+  private getComponent(type: DataType) {
     return this.typeComponent[type];
   }
 }

src/components/template/TypeSeven.vue

+<template>
+  <div class="van-hairline--bottom type-seven" style="padding-bottom:15px;">
+    <div class="title" style="margin-bottom: 10px;color:#666C70;">
+      {{ proofSubItem.label }}
+    </div>
+    <div>
+      <div class="my-rich-text"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Prop, Component } from 'vue-property-decorator';
+import E from 'wangeditor';
+
+@Component({
+  components: {},
+})
+export default class TypeSeven extends Vue {
+  @Prop()
+  private proofSubItem: any;
+  @Prop()
+  private value!: any;
+
+  private mounted() {
+    const editor = new E('.my-rich-text');
+    editor.config.zIndex = 0;
+    editor.config.onchange = (newHtml: string) => {
+      this.value.value = newHtml;
+    };
+    editor.create();
+    editor.txt.html(this.value.data); // 重新设置编辑器内容
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.type-seven {
+  text-align: left;
+  padding-bottom: 10px;
+  a {
+    word-break: break-all;
+    white-space: wrap;
+  }
+  .uploader {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .title {
+      flex: auto;
+      align-content: flex-start;
+      // margin-left: 12px;
+    }
+  }
+}
+</style>

src/components/template/index.ts

@@ -4,6 +4,7 @@ import TypeTwo from './TypeTwo.vue';
 import TypeThree from './TypeThree.vue';
 import TypeFive from './TypeFive.vue';
 import TypeSix from './TypeSix.vue';
+import TypeSeven from './TypeSeven.vue';
 import TypeEight from './TypeEight.vue';
 import TypeNine from './TypeNine.vue';
 import TypeTen from './TypeTen.vue';
@@ -15,6 +16,7 @@ export default {
   3: TypeThree,
   5: TypeFive,
   6: TypeSix,
+  7: TypeSeven,
   8: TypeEight,
   9: TypeNine,
   10: TypeTen,

src/const/enum.ts

@@ -42,6 +42,7 @@ export enum DataType {
     Unit = 3,   // 有下级
     Select = 5, // 选择 单选
     Date = 6,   // 时间戳
+    Editor = 7, // 编辑器 (富文本编辑器)
     Video = 8, // 视频
     Audio = 9, // 音频
     TextArea = 10, // 多行文本

src/views/template/components/AddOption.vue

@@ -100,6 +100,11 @@ export default class AddOption extends Vue {
       desc: '上传音频',
       type: DataType.Audio,
     },
+    {
+      title: '编辑器',
+      desc: '编辑器',
+      type: DataType.Editor,
+    }
   ];
   private addOption() {
     this.options.push('');

src/views/template/components/WordItem.vue

@@ -54,6 +54,7 @@ export default class WordItem extends Vue {
     3: '一级标题',
     5: '选择',
     6: '日期',
+    7: '编辑器',
     8: '视频',
     9: '音频',
     10: '多行文本输入',

src/views/template/components/WordsManager.vue

@@ -169,6 +169,7 @@ export default class Add extends Vue {
     [DataType.Unit]: '一级标题',
     [DataType.Select]: '选择',
     [DataType.Date]: '日期',
+    [DataType.Editor]: '编辑器',
     [DataType.Video]: '视频',
     [DataType.Audio]: '音频',
     [DataType.TextArea]: '多行文本',
@@ -231,6 +232,15 @@ export default class Add extends Vue {
       key: '',
       label: '日期',
     },
+    7: {
+      data: {
+        type: 'text',
+        format: 'string',
+        value: '',
+      },
+      type: 7,
+      label: '编辑器',
+    },
     8: {
       data: {
         type: 'video',