vue-quill-editor

1.安装

npm install vue-quill-editor --save

2.引入

// 导入富文本编辑器
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.使用

 <!-- 富文本编辑器 -->
<quill-editor v-model="html"></quill-editor>

4.自定义工具

<quill-editor ref="myTextEditor" v-model="form.description" :options="editorOption"></quill-editor>

 editorOption: {
        // 富文本显示内容
        placeholder: '请输入描述',
        theme:'snow',
         modules:{
           toolbar:[
              ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
              ['blockquote', 'code-block'],     //引用，代码块
              [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、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': [] }],    //对齐方式
              ['clean'],    //清除字体样式
              ['image','video']    //上传图片、上传视频
            ]
         }

}

5.封装成组件

<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']
    ]
  }
  

  KindEditor

  1.安装

  yarn add kindeditor
  

  2.引入

  3.使用

  4.自定义工具

  5.封装组件

  ```vue

```