博客

1.yarn add vue-quill-editor

2.main.js中

// 使用富文本

import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor) // 注册富文本编辑器

3. vue文件里使用 / 包含校验规则

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px"> 

   <!-- 富文本编辑器 -->
   <el-form-item label="题干：" prop="articleBody">
      <!-- 失去焦点时手动校验该字段 (当前 articleBody 属性值) -->
         <quill-editor  
            @blur="$refs.ruleForm.validateField('articleBody')"
            v-model="ruleForm.articleBody"/>
   </el-form-item>

</el-form>

export default {
  data () {
    return {
      ruleForm: {
        //...省略其他
            articleBody: '', 
          },
       rules: {
         //..省略其他
           articleBody: [
              { required: true, message: '请输入文本', trigger: 'change' }
          ],
       }
    }
}

4.切记一定要给高度 否则无法加载

<style scoped lang="scss">

::v-deep .ql-editor {

// 样式穿透

min-height: 180px !important;

}

</style>

5.效果出来了