富文本编辑器功能实现详细过程

1.安装富文本插件

2.实现效果

3.实现详细过程可直接使用

全局引入

局部引入

配置option

扩展需求自定义配置文字大小

1.安装富文本插件

npm install vue-quill-editor --save
//或者
yarn add vue-quill-editor

2.实现效果

3.实现详细过程可直接使用

全局引入

main.js注册

import quillEditor 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)

局部引入

vue页面中引用

 import {
    quillEditor
  } from "vue-quill-editor";
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";

components: {
      quillEditor
},

重要代码

这里上传图片功能使用了vant-ui框架上传代码，因为项目有特殊要求，也可以使用默认富文本自带的功能，这里也可使用自定义上传图片功能，都会一一介绍使用，记得自定义的图片上传功能图标覆盖默认编辑的图标，根据项目需求自行选择使用

<el-col :span="24">
                <el-form-item style="height:600px;">
                  <quill-editor v-model="createModelForm.content" ref="myQuillEditor" style="height: 500px;"
                    :options="contentOption">
                  </quill-editor>
                  <!-- 自定义上传图片弹窗 -->
                  <!-- <el-upload
                      ref="ztphotoUrl"
                      class="upload-demo ivu-upload"
                      :action="baseUrl + '/file/upload'"
                      :headers="{ Authorization: token }"
                      :on-success="handleZtSuccess"
                      accept="image/jpeg,image/png,image/jpg"
                      list-type="picture">
                      <el-button v-throttle size="small" type="primary" class="ivu-btn">点击上传</el-button>
                    </el-upload> -->
                  <van-uploader :after-read="afterCard" :before-read="beforeRead" accept="image/*" class="uploadfile"
                    :max-size="10240 * 1024" @oversize="onOversize">
                    <img src="../../assets/upload.png">
                  </van-uploader>
                </el-form-item>
              </el-col>

配置option

富文本全部功能配置

效果

// 富文本编辑器配置
      contentOption: {
        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: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      },

自定义配置使用

效果

本项目选择自定义配置

const toolbarOptions = [
    ['image'], //上传图片、上传视频
    ['bold', 'strike', 'underline'],
    [{
      'color': []
    }], // 字体颜色
    [{
      'align': []
    }], //对齐方式
    [{
      'size': [false, '16px', '18px', '20px']
    }], //字体大小
    ['clean'], //清除字体样式


  ];

contentOption: {
          placeholder: "请输入图文详情",
          // // 编辑器的配置
          // theme: "bubble"
          modules: {
            clipboard: {
              // 粘贴版，处理粘贴时候的自带样式
              matchers: [
                [Node.ELEMENT_NODE, this.handleCustomMatcher]
              ],
            },
            toolbar: {
              container: toolbarOptions, // 工具栏
              handlers: {
                'image': (value) => {
                  if (value) {
                    // 调用自定义上传图片
                    // document.querySelector('.ivu-btn').click();
                    this.afterCard();
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        },

自定义使用vant-ui图片上传功能实现过程

这里有使用图片压缩上传功能，图片压缩封装功能可查看vue实现文件上传压缩优化处理文章使用

// 文件压缩实现
      afterCard(file) {
        console.log(file, "1223213")
        this.$imgUpload.imgZip(file).then(resData => {
          const formData = new FormData();
          formData.append("file", resData);
          // 请求接口上传图片到服务器
          upload(formData).then(res => {
            console.log(res.data, "图片上传");
            showLoading();
            if (res.code == 200) {
              let quill = this.$refs.myQuillEditor.quill;
              // 设置焦点
              quill.focus();
              // 获取光标所在位置
              let length = quill.getSelection().index;
              // 插入图片，res为服务器返回的图片链接地址
              quill.insertEmbed(length, 'image', this.$baseImgUrl + res.data);
              // 调整光标到最后
              quill.setSelection(length + 1);
              hideLoading();
              let toastTimer = setTimeout(() => {
                this.$message.success('上传成功');
                clearTimeout(toastTimer);
              }, 0)
            } else {
              this.$message.warning('上传失败,请重新上传');
              hideLoading();
            }
          })
        });
      },

    // 限制上传大小图片
      onOversize(file) {
        console.log(file, "file");
        this.$message.warning("文件大小不能超过 10M");
      },


      // 上传之前的图片验证
      beforeRead(file) {
        console.log(file, "file,123");
        if (this.$utils.isImage(file.name)) {
          return true;
        } else {
          this.$message.warning("图片格式不正确");
        }
      },

自定义使用element上传功能

// 自定义上传图片
      handleZtSuccess(res) {
        console.log(res);
        const imgType = res.data.split(".")[1];
        console.log(imgType, "图片格式");
        if (imgType == "jpeg" || imgType == "png" || imgType == "jpg") {
          showLoading();
          let quill = this.$refs.myQuillEditor.quill;
          // 如果上传成功
          if (res.data) {
            // 获取光标所在位置
            let length = quill.getSelection().index;
            // 插入图片，res为服务器返回的图片链接地址
            quill.insertEmbed(length, 'image', this.$baseImgUrl + res.data);
            // 调整光标到最后
            quill.setSelection(length + 1);
            hideLoading();
          } else {
            hideLoading();
            this.$message.error('图片插入失败');
            return;
          }
        } else {
          this.$message.warning("图片格式不正确")
          return;
        }

      },

粘贴版，处理粘贴时候的自带样式

粘贴文字样式（包括背景色和文字颜色等）处理方式

粘贴图片时候不能直接复制本地图片，如果复制本地图片，编辑器识别不了，可以选择上传或者复制网络图片

// 粘贴版，处理粘贴时候的自带样式
matchers: [
  [Node.ELEMENT_NODE, this.handleCustomMatcher]
],

handleCustomMatcher(node, Delta) {
        let ops = []
        Delta.ops.forEach(op => {
          if (op.insert && typeof op.insert === 'string') { // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
            ops.push({
              insert: op.insert,
              attributes: op.attributes //文字样式（包括背景色和文字颜色等）
            })
          } else {
            if (op.insert.image.includes('data:image/png;')) { //本地图片会使文件file开头
              this.$message.warning('不允许粘贴本地图片,请手动上传或者复制网络图片')
            } else {
              ops.push({
                insert: op.insert,
              })
            }
          }
        })
        Delta.ops = ops
        return Delta
      },

扩展需求自定义配置文字大小

默认编辑器字体只有几种大小可以选择，满足不了产品的需求，主要是需要更改配置文件，以及对应的CSS和js文件。

改变 toolbarOptions的配置项

const toolbarOptions = [
//  原本是 'small',fasle,'large','huge'，改成自己想要设置的大小，这会改变页面下拉框的个数以及每个选项的data-value值，插件的js会根据data-value的值去增加对应的class类名。 
[{'size': ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']}], 
]

再到node_modules下面找到 quill, 对目录dist 下面的 css文件和 js文件进行修改。

修改quill.core.js

// small,large,huge 这三个是默认的，可以删可以留。后面必须增加和editor配置项一样。
whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']

修改quill.js

// 跟quill.core.js 同理，修改下面两项,huge及之前都是默认的
whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']
var SIZES = ['small', false, 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px'];

修改quill.bubble.css

// 需要全部增加一下css选项，需要注意的是data-value=如果是接数字要有引号，字符串可以不带引号
//10px,12px等等新设置的大小都要设置相应的类名字体大小
.ql-editor .ql-size-8px {
    font-size: 8px;
}
// select选择的字体大小
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    font-size: 8px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    content: '8px';    
}

修改quill.core.css

// 需要全部增加一下css选项
.ql-editor .ql-size-10px {
    font-size: 10px;
}

修改quill.snow.css

// 需要全部增加一下css选项
.ql-editor .ql-size-8px {
    font-size: 8px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    content: '8px';
}
// select选择的字体大小
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    font-size: 8px;
}