textarea&editor

components/form.vue

@@ -21,6 +21,12 @@
               <slot name="options" v-bind="{ item, form, fieldChange }"></slot>
             </el-select>
           </template>
+          <template v-else-if="item.type === 'textarea'">
+            <el-input v-model="form[item.model]" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
+          </template>
+          <template v-else-if="item.type === 'editor'">
+            <wang-editor v-model="form[item.model]" v-if="!loading"></wang-editor>
+          </template>
           <template v-else>
             <el-input v-model="form[item.model]" :type="getField('type', item)" :placeholder="getField('placeholder', item)" v-bind="item.options"></el-input>
           </template>
@@ -34,9 +40,9 @@
           <el-col :span="6">
             <el-button type="primary" @click="save">保存</el-button>
           </el-col>
-          <el-col :span="6">
+          <!-- <el-col :span="6">
             <el-button @click="$emit('cancel')">返回</el-button>
-          </el-col>
+          </el-col> -->
         </el-row>
       </el-form-item>
     </el-form>
@@ -45,6 +51,7 @@
 
 <script>
 import _ from 'lodash';
+import wangEditor from '@frame/components/wang-editor';
 export default {
   name: 'add',
   props: {
@@ -53,12 +60,15 @@ export default {
     isNew: { type: Boolean, default: true },
     data: null,
   },
-  components: {},
+  components: {
+    wangEditor,
+  },
   data: () => ({
     form: {},
     display: undefined,
     show: false,
     dateShow: false,
+    loading: true,
   }),
   created() {},
   computed: {},
@@ -73,6 +83,7 @@ export default {
     data: {
       handler(val) {
         if (val) this.$set(this, `form`, this.data);
+        this.loading = false;
       },
       immediate: true,
     },
@@ -99,7 +110,12 @@ export default {
       this.$set(this.form, model, value);
     },
     checkType() {
-      console.log(this.fields);
+      let arr = this.fields.filter(fil => fil.type === 'checkbox');
+      if (arr.length > 0 && this.isNew) {
+        for (const item of arr) {
+          this.$set(this.form, `${item.model}`, []);
+        }
+      }
     },
   },
 };

components/wang-editor.vue

@@ -0,0 +1,77 @@
+<template>
+  <div ref="editor" style="text-align:left"></div>
+</template>
+<script>
+import E from 'wangeditor';
+
+const menus = [
+  'head', // 标题
+  'bold', // 粗体
+  'fontSize', // 字号
+  'fontName', // 字体
+  'italic', // 斜体
+  'underline', // 下划线
+  'strikeThrough', // 删除线
+  'foreColor', // 文字颜色
+  'backColor', // 背景颜色
+  'link', // 插入链接
+  'list', // 列表
+  'justify', // 对齐方式
+  'quote', // 引用
+  // 'emoticon', // 表情
+  'table', // 表格
+  // 'video', // 插入视频
+  // 'code', // 插入代码
+  'undo', // 撤销
+  'redo', // 重复
+];
+
+export default {
+  name: 'wang-editor',
+  model: {
+    prop: 'value',
+    event: 'change', // 默认为input时间，此处改为change
+  },
+  props: {
+    value: { type: String, required: false, default: '' },
+  },
+  data() {
+    return {
+      editorContent: this.value,
+    };
+  },
+  mounted() {
+    var editor = new E(this.$refs.editor);
+    editor.customConfig.onchange = html => {
+      this.editorContent = html;
+      this.$emit('change', html);
+    };
+    // 自定义菜单配置
+    editor.customConfig.menus = menus;
+    editor.customConfig.zIndex = 0;
+    editor.customConfig.uploadImgServer = '/files/cms/images/upload';
+    editor.customConfig.uploadImgMaxLength = 1;
+    editor.customConfig.uploadImgHooks = {
+      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
+      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
+      customInsert: function(insertImg, result, editor) {
+        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
+        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
+
+        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
+        var url = result.uri;
+        insertImg(url);
+
+        // result 必须是一个 JSON 格式字符串！！！否则报错
+      },
+    };
+    editor.create();
+    editor.txt.html(this.value);
+  },
+  methods: {
+    getContent: function() {
+      return this.editorContent;
+    },
+  },
+};
+</script>