封装好的表单编辑器，CV就能用

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

今天给大家带来了封装好的表单编辑器，CV就能用的哦！

封装好的表单编辑器

vue

<template>
  <div style="border: 1px solid #ccc;" class="fw-editor">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 400px; overflow-y: hidden;"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
    />
  </div>
</template>

<script>
/**
 * @description: 封装富文本组件
 * @param {*} 当前组件接受参数说明
 * defaultValue   默认值
 * isDisabile   是否只读
 * ...
 * @return {*}
 */
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { editorConfig } from './models/config'
export default {
  name: 'editorCom',
  components: { Editor, Toolbar },
  props: {
    defaultValue: { type: String, default: '' },
    isDisabile: { type: Boolean, default: false }
  },
  data () {
    return {
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default' // or 'simple'
    }
  },
  created () {
    this.editorConfig = editorConfig
    this.editorConfig.readOnly = this.defaultValue
  },
  watch: {
    defaultValue (newValue) {
      this.html = this.defaultValue
    }
    // isDisabile (flag) {
    //   this.editorConfig.readOnly = flag
    // }
  },
  methods: {
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    }
  },
  beforeDestroy () {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style lang="less" scoped>
.fw-editor {
  z-index: 333;
}
</style>

js

/**
 * @description: 编辑器配置
 * @param {*}
 * @return {*}
 */
import { Message } from 'element-ui'
// import { fileUpload } from '@/api/modules/news-center' //api
export const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      // 其他配置...
      //   server: '/api/sys/file/upload',
      //   fieldName: 'file',
      //   meta: {
      //     type: 'jpg'
      //   },
      //   maxFileSize: 5 * 1024 * 1024, // 5M
      //   // 小于该值就插入 base64 格式（而不上传），默认为 0
      //   base64LimitSize: 5 * 1024 * 1024, // 3M
      async customUpload (file, insertFn) {
        if (file.size > 2 * 1024 * 1024) {
          Message({
            message: '图片上传大小不能超过2M!!!',
            type: 'warning'
          })
          return false
        }
        const data = new FormData()
        data.append('file', file)
        data.append('type', 'jpg')
        // 发图片请求
      /*   fileUpload(data).then(
          (res) => {
            if (res.data.path) {
              insertFn(res.data.path, res.data.name, res.data.path)
            } else {
              Message({
                message: '无返回地址！',
                type: 'error'
              })
            }
          },
          (err) => {
            Message({
              message: '上传失败！',
              type: 'error'
            })
          }
        )
      } */
      },
      // 发视频请求
      uploadVideo: {
      //   server: '/api/sys/file/upload',
      //   fieldName: 'file',
      //   meta: {
      //     type: 'video'
      //   },
      // 自定义上传
        async customUpload (file, insertFn) {
        // file 即选中的文件
        // 自己实现上传，并得到视频 url
        // 最后插入视频
          const data = new FormData()
          data.append('file', file)
          data.append('type', 'video')

          /*  fileUpload(data).then(
            (res) => {
              if (res.data.path) {
                insertFn(res.data.path)
              } else {
                Message({
                  message: '无返回地址！',
                  type: 'error'
                })
              }
            },
            (err) => {
              Message({
                message: '上传失败！',
                type: 'error'
              })
            }
          ) */
        }
      }
    }
  }
}

需要下载的包：

"@wangeditor/editor": "^5.1.1",

"@wangeditor/editor-for-vue": "^1.0.1",

效果图：