阅读 1598

WangEditor 富文本編輯器

  1. npm 安装
npm i wangeditor --save
复制代码
  1. component新建文件加index.vue
<template>
  <div ref="editor"></div>
</template>
<script>
import E from 'wangeditor'
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    meanArray: {
      // 自定义菜单
      type: Array,
      default: null,
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  watch: {
    value: function (value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value)
      }
    },
    //value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值
  },
  data() {
    return {
      // 默认有这么多菜单,meanArray有值以meanArray为准
      defaultMeanus: [
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        'justify',
        'quote',
        'emoticon',
        'image',
        'video',
        'table',
        'code',
        'splitLine',
        'undo',
        'redo',
      ],
      editor: '',
    }
  },
  methods: {
    init() {
      const _this = this
      let code = _this.$store.state.uploadConfig
      _this.editor = new E(_this.$refs.editor)
      _this.editor.config.uploadImgShowBase64 = false // 使用 base64 保存图片
      // 配置服务器端地址 upload:上传图片地址
      _this.editor.config.uploadImgServer = code.action
      _this.editor.config.uploadFileName = 'file' //上传参数 自定义
      //可使用监听函数在上传图片的不同阶段做相应处理
      _this.editor.config.uploadImgHooks = {
        before: function (xhr, editor, files) {
          // xhr.open(code.methods, code.action, true)
          xhr.setRequestHeader('Authorization', code.token)
          // 图片上传之前触发
          // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
          // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
          // return {
          //     prevent: true,
          //     msg: '放弃上传'
          // }
        },
        success: function (xhr, editor, result) {
          // 图片上传并返回结果,图片插入成功之后触发
          // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
        },
        fail: function (xhr, editor, result) {
          // 图片上传并返回结果,但图片插入错误时触发
          // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
          // 图片上传出错时触发
          // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
          // 图片上传超时时触发
          // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
        },
        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
        // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
        customInsert: function (insertImg, result, editor) {
          // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
          // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
          // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
          var url = result.data
          insertImg(url)
          // result 必须是一个 JSON 格式字符串!!!否则报错
        },
      }
      // that.editor.customConfig.customUploadImg = fun         ction (files, insert) {
      //   // 上传代码返回结果之后,将图片插入到编辑器中
      //   that.filesToBase64(files)
      // }
      _this.setMenus() //设置菜单
      _this.editor.config.onchange = (html) => {
        _this.$emit('change', html) // 将内容同步到父组件中
      }
      _this.editor.create() //创建编辑器
    },
    setMenus() {
      // 设置菜单
      if (this.meanArray) {
        this.editor.config.menus = this.meanArray
      } else {
        this.editor.config.menus = this.defaultMeanus
      }
    },
    getHtml() {
      // 得到文本内容
      return this.editor.txt.html()
    },
    setHtml(txt) {
      // 设置富文本里面的值
      this.editor.txt.html(txt)
    },
  },
  mounted() {
    let that = this
    that.$nextTick(function () {
      that.init()
    })
  },
}
</script>
复制代码
  1. 在父组件中使用
//引入
import wangeditor from '../components/wangEditor/index'
//声明
  components: {
    wangeditor,
  },
//调用
<wangeditor ref="myTextEditor" v-model="content" ></wangeditor>
复制代码

之前使用的是vuequileditor但是此编辑器,无法展示表格,故使用此编辑器之前使用的是vue-quil-editor 但是此编辑器,无法展示表格,故使用此编辑器

文章分类
前端
文章标签