vue 使用富文本(quill-editor)组件

安装 Vue-Quill-Editor ：

npm install vue-quill-editor --save

自定义组件里：

<template>
  <div class="main">
    <el-container>
  
      <el-main class="right_main">
        <el-form :model="formData"  >
         <quill-editor
              v-model="formData.content"
              ref="editor"
              :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
            </quill-editor>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import QuillToolbars from '@/plugins/quill.js'
export default {
  name: 'dan',
  components: {
    quillEditor,
  },
  data() {
    return {
      multipleSelection: [],
       formData: {},
      editorOption: {
        modules: {
          toolbar: {
            container: QuillToolbars.standard,
            handlers: {
              'image': (value) => {
                if (value) {
                  this.$fileManage.open({
                    insert: this.insert_image
                  })
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },
    };
  },

  methods: {
    
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //富文本
    onEditorBlur () {
    },
    onEditorFocus () {
    },
    onEditorChange () {
    },
  }
};
</script>

<style scoped lang="scss">
.el-col-12{
    width: 200px
}
.main{
    background: #fff;
    .right_main{
        margin-top: 0;
        padding: 0;
        padding-left: 25px
    }
}
</style>

quill.js:

export default {
    standard: [
      ['bold', 'italic', 'underline', 'strike'],
  
      [{'header': 1}, {'header': 2}],
      [{'list': 'ordered'}, {'list': 'bullet'}],
      [{'indent': '-1'}, {'indent': '+1'}],
  
      [{'size': ['small', false, 'large', 'huge']}],
      [{'header': [1, 2, 3, 4, 5, 6, false]}],
  
      [{'color': []}, {'background': []}],
      [{'font': []}],
      [{'align': []}],
      ['link', 'image', 'video'],
      ['clean']
    ],
    full: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
  
      [{'header': 1}, {'header': 2}],
      [{'list': 'ordered'}, {'list': 'bullet'}],
      [{'script': 'sub'}, {'script': 'super'}],
      [{'indent': '-1'}, {'indent': '+1'}],
      [{'direction': 'rtl'}],
  
      [{'size': ['small', false, 'large', 'huge']}],
      [{'header': [1, 2, 3, 4, 5, 6, false]}],
  
      [{'color': []}, {'background': []}],
      [{'font': []}],
      [{'align': []}],
      ['link', 'image', 'video'],
      ['clean']
    ]
}