vue-quill-editor 富文本框使用及上传图片到服务器

注：上传图片需要结合element-ui的upload上传

首先第一步：安装vue-quill-editor或quill两个模块

yarn add vue-quill-editor -D
yarn add quill -D

然后再main.js文件中引入

1 import QuillEditor from 'vue-quill-editor'
2 import 'quill/dist/quill.core.css'
3 import 'quill/dist/quill.bubble.css'
4 import 'quill/dist/quill.snow.css'
5 Vue.use(QuillEditor)

使用方法如下：

　　<template>
    　　<div>
　　　　　　<el-upload
              class="avatar-uploader"
              action="要上传到的接口"
              :data='date' //需要传递的参数
              name="file"
              :show-file-list="false"
              :on-success="Success"
              :on-error="Error">
         </el-upload>
　　　　　　<quill-editor
             v-model="content"
             ref="myQuillEditor"
             :options="editorOption"
             @blur="onEditorBlur($event)"
             @focus="onEditorFocus($event)"
             @change="onEditorChange($event)"
@ready="onEditorReady($event)"
          ></quill-editor>

export default {
  data () {
    return {
      content: ``,//最终拿到的内容
      editorOption: {
        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']//上传图片、上传视频
        //     ]
        // }

        // 上传图片时modules中内容如下
        modules: {
            toolbar: {
                container: [
                    //配置项，全部配置如上
                    ['bold', 'italic', 'underline'], 
                    [{ 'align': [] }], 
                    ['image'] 
                ], 
                handlers: {
                    'image': function (value) {
                    if (value) {
                        document.querySelector('.avatar-uploader input').click()
                    } else {
                        this.quill.format('image', false);
                    }
                    }
                }
            }
        }
      },
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  methods: {
    Success(res, file){
      // 获取实例
      let quill = this.$refs.myQuillEditor.quill
      // 上传成功
      if (res.errorCode == 200 && res.result !== null) { //res.errorCode是上传是否成功的状态值~~res.result是上传成功返回的图片路径
          // 获取官标位置
          let cursor = quill.getSelection().index;
          console.log(res)
          //我这里loot.SERVE.file是服务器前半截地址加上res.result返回的半截地址
          quill.insertEmbed(cursor, 'image', loot.SERVE.file+res.result)
          // 光标向后加1
          quill.setSelection(cursor + 1)
      } else {
          this.$message.error('上传失败')
      }
    },
    Error(){
      this.$message.error('上传失败')
    },
    onEditorReady (editor) {}, // 准备编辑器
    onEditorBlur () {}, // 失去焦点事件
    onEditorFocus () {}, // 获得焦点事件
    onEditorChange () {}, // 内容改变事件
    saveHtml (event) {
      alert(this.content)
    }
  }
}
</script>

原文链接：https://blog.csdn.net/w390058785/article/details/84346251

第一步：创建一个quill-title.js的文件，内容如下

const titleConfig = {
  'ql-bold':'加粗',
  'ql-color':'颜色',
  'ql-font':'字体',
  'ql-code':'插入代码',
  'ql-italic':'斜体',
  'ql-link':'添加链接',
  'ql-background':'背景颜色',
  'ql-size':'字体大小',
  'ql-strike':'删除线',
  'ql-script':'上标/下标',
  'ql-underline':'下划线',
  'ql-blockquote':'引用',
  'ql-header':'标题',
  'ql-indent':'缩进',
  'ql-list':'列表',
  'ql-align':'文本对齐',
  'ql-direction':'文本方向',
  'ql-code-block':'代码块',
  'ql-formula':'公式',
  'ql-image':'图片',
  'ql-video':'视频',
  'ql-clean':'清除字体样式'
};
 
export function addQuillTitle(){
  const oToolBar = document.querySelector('.ql-toolbar'),
        aButton = oToolBar.querySelectorAll('button'),
        aSelect =  oToolBar.querySelectorAll('select');
  aButton.forEach(function(item){
    if(item.className === 'ql-script'){
      item.value === 'sub' ? item.title = '下标': item.title = '上标';
    }else if(item.className === 'ql-indent'){
      item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
    }else{
      item.title = titleConfig[item.classList[0]];
    }
  });
  aSelect.forEach(function(item){
    item.parentNode.title = titleConfig[item.classList[0]];
  });
}

使用

<script>
import { addQuillTitle } from './quill-title.js'
export default {
    mounted(){
      addQuillTitle();
    }
}