在使用element-ui开发的时候，总感觉element-ui的组件不够用，这个时候总会需要配合其他的单独的组件来使用。这一次我就用到了富文本，然而element-ui中并没有富文本组件，而且是用在表单中，需要进行表单验证（就是简单的验证是否为空）。

wangEditor安装、引入以及创建编辑器

安装wangeditor

npm install wangeditor

##引入、创建编辑器

import Editor from 'wangeditor' //引入wangEditor富文本编辑器

const editor = new Editor('#editor')

//还有一些配置性的东西我是放在了vue的生命周期函数mounted里面了（看个人吧，这里无所谓）
  mounted(){
     editor.customConfig.uploadImgShowBase64 = true //上传的图片以base64的方式保存
      //上面一行以及官网其他的配置性的东西可以放到const editor = new Editor('#editor')这一句下面，但是下面一行代码只能放到mounted不然会报错
     editor.create() //生成富文本编辑器
  }

其他配置可以查看官方文档，我们的主题不是这个，所以感兴趣的自己到官网看一看吧。

与表单验证的结合

template

<el-form-item label="正文" prop="text"> /*我们依旧使用prop来规定需要验证的字段*/
  <div id="editor"></div> /*开始我是想要直接使用v-model来绑定值，但是这里是div，无法使用v-model*/
</el-form-item>

data() {
  return {
    aform: { /*表单数据格式*/
      title: '',
      articleType: null,
      text: '',
      type: null
    },
    rules: {
      title: [{required: true, message: '请填写文章标题', trigger: 'blur'}],
      articleType: [{required: true, message: '请选择文章分类', trigger: 'change'}],
      text: [{required: true, message: '请填写正文内容'}] /*这是我们的主要要验证的东西*/
    }
  }
},
methods: {
    onSubmit(formName) { //提交表单
        /*
          1、在提交表单之前，我们一定要做的就是获取富文本数据（因为是单独的组件，所以需要单独获取），在this.$refs[formName].validate((valid)=>{})之前做下列操作
          2、判断纯文本是否为空，如果为空，则不为data中aform.text赋值或者赋值为''空字符串，如果不为空，责把完整的富文本赋值给aform.text
          3、等待验证完成....
        */
        const ftext = editor.txt.text().trim() //获取纯文本
        const fhtml = editor.txt.html() //获取完整富文本
        if(ftext !== '') { //判断是否为空 editor.txt.text() 和 editor.txt.html()的区别是前者纯文本，而后者有html标签（即使在没有任何内容的时候也会有默认的标签）
            this.aform.text = fhtml
        } else {
            this.aform.text = ''
        }
        //上面只是为了理解，我们可以把这个过程简化成一个三元表达式（至少我认为这样写比较简洁）
        //this.aform.text = editor.txt.text().trim() === '' ? '' : editor.txt.html()

        this.$refs[formName].validate((valid)=>{
            if(valid) {
                //表单验证通过
            }
        })
    }
}

好了，这样就已经好了。

其实就是在原有的验证基础上，在没有进行提交验证之前给需要验证的值进行处理，如果富文本编辑器中没有数据，则不做任何事，那么aform.text就是空的，所以提交验证时返回false，验证不通过，显示rules中规定的错误信息;反则富文本编辑器中有内容，则把完整内容（editor.txt.html()）赋值给aform.text，这时它就不为空，所以返回true，验证通过，提交数据。

本人接受各方的建议、批评以及教导，所以如果您有更好的办法或者其他的建议一定要告诉我哦(✪ω✪)