vue Element 引入富文本编辑器 vue-quill-editor

安装编辑器组件

npm install vue-quill-editor –save

main.js 引入组件

import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

template使用编辑器

<el-form-item label="交易备注" prop="content">

     <quill-editor ref="myTextEditor"

                      v-model="ruleForm.content"

                      :config="editorOption"

                      @blur="onEditorBlur($event)"

                     @focus="onEditorFocus($event)"

                      @ready="onEditorReady($event)"

                      @change="onEditorChange($event)">

      </quill-editor>

    <!– <el-input type="textarea" v-model="ruleForm.content"></el-input>–>

</el-form-item>

template引入样式

<style>

  @import '~quill/dist/quill.core.css';

  @import '~quill/dist/quill.snow.css';

  @import '~quill/dist/quill.bubble.css';

  .ql-editor.ql-blank, .ql-editor {

    height: 350px;

  }

</style>

初始化

export default {

data() {

       return {

             editorOption:{

                       modules:{

                           toolbar:[

                             ['bold', 'italic', 'underline', 'strike'],        // toggled buttons

                            ['blockquote', 'code-block']

                          ]

                    }

               },

        }

   }

methods: {

      onEditorBlur(){//编辑器失去焦点事件

      },

      onEditorFocus(){//编辑器获得焦点事件

      },

      onEditorReady(){//编辑器内容改变事件

      },

      onEditorChange(){//编辑器内容改变事件

      },

   }

}