elment-ui使用vue-quill-editor富文本编辑器

1. 全局配置

参考文档：https://www.kancloud.cn/liuwave/quill/1409423

（一）直接将配置信息写在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'


const toolbarOptions = [
  ['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': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }],// 字体
  [{ 'align': [] }], // 居中
  ['clean'],                                       // 清除样式,
  ['link', 'image'],  // 上传图片、上传视频
]

let editorOption={
  placeholder: '请在这里输入',
  theme: 'snow', //主题 snow/bubble
  modules: {
    history: {
      delay: 1000,
      maxStack: 50,
      userOnly: false
    },
    toolbar: {
      container: toolbarOptions,
      handlers: {
        image: function (value) {
          if (value) {
            // 调用element的图片上传组件
            document.querySelector('.avatar-uploader input').click()
          } else {
            this.quill.format('image', false)
          }
        }
      }
    }
  }
}
console.log(VueQuillEditor,editorOption)
Vue.use(VueQuillEditor,editorOption);

（二）页面内使用方式

//页面全局调用
<quill-editor v-model="subBanner.content"></quill-editor>
<el-upload class="avatar-uploader" action="" name="img" :show-file-list="false">
    </el-upload>

在用刀quill-editor组件时，需要配置一个类名为avatar-uploader的el-upload上传组件

2. 组件封装（推荐使用这种方式）

（一）新增editText一个组件

<template>
  <div class="editText">
    <quill-editor v-model="content" :content="content" :options="editorOption" ref="QuillEditor">
    </quill-editor>

    <el-upload :on-success="imgSuccess" ref="edit" :action="submitFile" name="file" :show-file-list="false"></el-upload>


  </div>
</template>

<script>
const toolbarOptions = [
  ['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': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }],// 字体
  [{ 'align': [] }], // 居中
  ['clean'],                                       // 清除样式,
  ['link', 'image'],  // 上传图片、上传视频
]


export default {
  name: "editText",
  data(){
    return {
      content:this.value,
      fileList:[],
      editorOption: {
        placeholder: '请输入内容',
        theme: 'snow', //主题 snow/bubble
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image:this.updataImg
            }
          }
        }
      },
    }
  },
  props:{
    value:{
      type:String,
      default:''
    }
  },
  methods:{
    updataImg(){
      //点击了上传图片按钮
      this.$refs["edit"].$el.children[0].click();
    },
    imgSuccess(response, file, fileList){
      if(response.code==200){
        // 获取富文本组件实例
        let quill = this.$refs.QuillEditor.quill;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', this.filePath+response.data[0])
        // 调整光标到最后
        quill.setSelection(length + 1)
      }
      console.log(response);
    }
  },
  watch:{
    content(value){
      this.$emit('input',value);
    },
    value(val){
      this.content=val;
    }
  }
}
</script>

<style scoped>

</style>

(二) 调用方法

<template>
<div>
  <edit-text v-model="content"></edit-text>
</div>
</template>

<script>
import editText from "@/components/editText.vue";
export default {
  name: "fuwenben1Admin",
  components:{
    editText
  },
  data(){
    return {
      content:'',
    }
  }
}
</script>

<style scoped>

</style>