Vue+Element UI使用富文本编辑器案例

npm安装编辑器组件

具体方法：npm install vue-quill-editor –save

具体实现
1.在components文件夹里创建editor.vue组件，具体代码如下：

<template>
       <div>
          <script id="editor" type="text/plain"></script>
       </div>
</template>
<script>
  export default {
    name: 'UE',
    data () {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      }
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor('editor', this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
      });
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>

 

2.页面使用富文本编辑器：
首先引入编辑器组件
import { quillEditor } from “vue-quill-editor”; //调用编辑器

3.样式引入
import ‘quill/dist/quill.core.css’
import ‘quill/dist/quill.snow.css’
import ‘quill/dist/quill.bubble.css’

4.使用

<el-form-item label="详细描述" prop="words">
            <div class="edit_container">
              <quill-editor v-model="ruleForm.words" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)">
              </quill-editor>
            </div>
          </el-form-item>

 

5.js部分

data() {
   return {
       editorOption: {}
    },

 

components: {//使用编辑器
   quillEditor
  }

 

 computed: {
   editor() {
    return this.$refs.myQuillEditor.quill
   }

 

 methods: {
   onEditorReady(editor) {
   },

简单粗暴的表述，希望对你有所帮助！加油