富文本编辑器使用

安装依赖

npm install vue-quill-editor -s
npm install quill-image-resize-module -s

然后全局引入

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)

在需要的组件中引入使用

import VueQuillEditor, { Quill } from 'vue-quill-editor'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)

这里需要两个参数content/editorOption

content 是用户在文本框内输入的内容 生成的HTML标签
editorOption是富文本主体功能对象

组件中注册组件 ( 哪里需要哪里用 ) 上结构 ( 根据使用进行修改 )

<template>
  <div>
<!--    @blur="onEditorBlur($event)"-->
<!--    @focus="onEditorFocus($event)"-->
<!--    @ready="onEditorReady($event)"-->
    <quill-editor v-model="content"
                  ref="quill"
                  :options="editorOption"
                 >
    </quill-editor>
    <el-upload
        class="upload-demo"
        action="#"
        :http-request="uploadFile"
        :show-file-list="false"
        style="display:none"
        ref="upload"
    >
      <el-button id="imgInput" type="primary">点击上传</el-button>
    </el-upload>
    <div @click="getHtml" style="text-align: right;margin-top: 10px">
      <el-button size="mini" type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
import { Quill,quillEditor } from 'vue-quill-editor'
import ImageResizes from 'quill-image-resize-module'
// import quillConfig from './utils/quill-config'
//设置字体大小
let fontSizeStyle=Quill.import('attributors/style/size') //引入这个后会把样式写在style上
fontSizeStyle.whitelist=['12px','14px','16px','18px']
Quill.register(fontSizeStyle,true)

//设置字体样式
let Font = Quill.import('attributors/style/font') //引入这个后会把样式写在style上
let fonts = [false, 'SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial']
Font.whitelist = fonts //将字体加入到白名单
Quill.register(Font, true)
Quill.register('modules/imageResize', ImageResizes)
const toolbar = [
  [{ 'color': [] }, { 'background': [] }],
  ['bold', 'italic', 'underline', 'strike'],
  [{size: ['12px','14px','16px','18px']}],
  ['bold', 'italic'],
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],
  [{ 'indent': '-1'}, { 'indent': '+1' }],
  [{ 'direction': 'rtl' }],
  [{ 'header': 1 }, { 'header': 2 }],
  [{'list': 'ordered'}, {'list': 'bullet'}],
  ["image", "video"],
  ['blockquote', 'code-block'],
  [{ 'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial'] }],
  [{ 'align': [] }],
]
export default {
  name: "goodsDetail",
  components:{
    quillEditor
  },
  data(){
    return{
      content: null,
      editorOption: {
        placeholder: '请输入...',
        modules: {
          toolbar: {
            container:toolbar,
            handlers:{
            // 拦截富文本上传自定义上传
            // 拦截视频  ( 自行处理其他 *** 作 )
              video: function (value) {
                console.log(value)
                if (value){
                  document.getElementById("imgInput").click();
                }
              },
              // 拦截图片  ( 自行处理其他 *** 作 )
              image: function (value){
                console.log(value)
                if (value){
                  document.getElementById("imgInput").click();
                }
              }
            }
          },
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      },
    }
  },
  methods:{
  // 自定义上传文件
    uploadFile(e){
      console.log(e)
      // 获取鼠标当前位置
      let quill = this.$refs.quill.quill.getSelection().index
      // // 插入图片  图片地址
      // this.$refs.quill.quill.insertEmbed(quill, 'image', 'http://60.30.92.142:19999/api/upload/mnt/vms/cdr-bicose/media/banner/2022-05-11/202205111635209054.png')
      // // 调整光标到最后
      // this.$refs.quill.quill.setSelection(quill + 1)//光标后移一位
    },
    getHtml(){
      // console.log(this.content)
      // this.content 为生成的HTML结构  可自行处理
      this.$emit('getChildHtml',this.content)
    },
    // onEditorBlur(editor) {
    //   console.log('editor blur!', editor)
    // },
    // onEditorFocus(editor) {
    //   console.log('editor focus!', editor)
    // },
    // onEditorReady(editor) {
    //   console.log('editor ready!', editor)
    // },

  }
};
</script>

<style scoped>
.quill-editor >>> .ql-container{
  min-height: 500px !important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋体";
  font-family: "SimSun"!important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑体";
  font-family: "SimHei";
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷体";
  font-family: "KaiTi"!important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
  content: '12px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
  content: '14px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
  content: '16px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before {
  content: '18px';
}
</style>

前端小白 如有不足请大家补充 纯属个人理解

使用时可能会报 imports 的错误
只需要在vue.config.js 文件中加上下面代码贴上去 重启你的项目就OK

const webpack = require('webpack')

module.exports = {

    chainWebpack: config => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            'window.Quill': 'quill'
        }])

    }
}