背景 - Quill包原生功能及从网上找的quill相关插件也都不能满足公司实际产品需求, 现对quill二次开发, 取名为`vary-quill`, `vary-quill`包作为公司内部富文本专用npm包已发布到私有npm库中. 问题 - 1. 支持的字号太少, 只有3种字号 2. 文字对齐方式, 默认是类名模式, 需要改为行内模式 3. 缺少定义行高的模块 4. 从截屏中粘贴的图片, quill自动转成了Base64格式, 如果截图区域更大, 会导致生成的base64码以M(兆)为单位, 虽然数据库中没有限制字段长度, 但已严重影响产品流程 5. 从Word中粘贴的混合图文内容, 由于浏览器的限制, word中复制的图片是访问不了的, quil在更新内容的时候, 没有筛选此类节点, 导致编辑器中出现大量的图片占位符(带边框的空白区域), 想要的结果 - 1. 字号要支持12~32px范围的切换 2. 文字对齐方式, 从类名模式改为行内模式 3. 增加行高模块, 支持用户给文字设置1~5倍的行矩 4. 从截屏中粘贴的图片, 要上传到阿里云OSS库, 再更新到编辑器中 5. 从word中粘贴的图文混合内容: 要过滤掉混合内容中的图片节点; 要给用户相应的提示, 免得用户不知道图片哪里去了(为什么没有粘贴进编辑器) 模式使用原则 - 模式分为两种,: 1. 是通过类名设置样式 ,该模式中的样式适用于"当CSS属性值不存在可扩展性(就那么几个固定的值)"的情况, 比如align-center等 2. 通过内联style设置样式, 该模式适用于"当CSS属性值可能会后期扩展(非固定值)"的情况, 比如font-size line-height等安装 - ```shell yarn add vary-quill ``` 字号 - 字号范围主要在 formats/size 文件中指定 ```js import Parchment from "parchment"; let SizeClass = new Parchment.Attributor.Class("size", "ql-size", { scope: Parchment.Scope.INLINE, whitelist: Array.from({ length: 21 }, (v, k) => k * 1 + 12 + "px"), }); let SizeStyle = new Parchment.Attributor.Style("size", "font-size", { scope: Parchment.Scope.INLINE, whitelist: Array.from({ length: 21 }, (v, k) => k * 1 + 12 + "px"), }); export { SizeClass, SizeStyle }; ``` 这里添加了从12到32的字号范围, 虽然这里暴露了类名模式和内联模式, 注册该组件的是, 使用的是内联模式 Quill.register({"formats/size": SizeStyle,}, true) 行高 - 文字对齐方式主要在 formats/lineheight 文件中指定 ```js import Parchment from "parchment"; const config = { scope: Parchment.Scope.INLINE, whitelist: [ "1em", "1.5em", "2em", "2.5em", "3em", "3.5em", "4em", "4.5em", "5em", ], }; let LineheightClass = new Parchment.Attributor.Class( "lineheight", "ql-lineheight", config ); let LineheightStyle = new Parchment.Attributor.Style( "lineheight", "line-height", config ); export { LineheightClass, LineheightStyle }; ``` 同样的, 注册该组件的时候, 使用的内联模式 `` Quill.register({"formats/align": AlignStyle,}, true) ``` 截屏粘贴 - 对于粘贴板事件, Quill在 modles/clipboard 的 onPaste 方法中处理相应数据, 一般来说, 如果想单独处理这些数据, 可以在 new Quill() 时, 通过以下方式就可以自行处理粘贴板数据 ```js new Quill(selector, { modules:{ clipboard:{ matchers:[ // 处理图片 ] } } }) ``` 但是Quill在这里没有支持异步操作,所以干脆在Quill处理完所有的数据后, 统一对 Delta 数据做一次筛选 ```js onPaste(e) { if (e.defaultPrevented || !this.quill.isEnabled()) return; let range = this.quill.getSelection(); let delta = new Delta().retain(range.index); let scrollTop = this.quill.scrollingContainer.scrollTop; this.container.focus(); this.quill.selection.update(Quill.sources.SILENT); setTimeout(() => { delta = delta.concat(this.convert()).delete(range.length); /* 这里的delta就是 Quill在粘贴板事件发生后, 以及经过各种matcher处理后,返回的节点数据在这里对delta中的数据类型做判断和筛选是最合适的, 处理的时候要注意几点: 1. 由于图片上传是异步的, 所以这里的处理方式要支持异步 2. 不同项目中的具体处理方法可能不相同(接口不同或者是命名方式不同), 所以具体的处理方法要从外部传参进来 3. 本来只需要处理Base64数据的, 但是考虑到以后可能会处理更多类型的数据, 这里干脆不做数据类型的区分, 全部交给外部参数处理 */ this.quill.updateContents(delta, Quill.sources.USER); this.quill.setSelection( delta.length() - range.length, Quill.sources.SILENT ); this.quill.scrollingContainer.scrollTop = scrollTop; this.quill.focus(); }) } ``` 方案 1. 实例化Quill的时候, 给clipboard 模块新增一个参数: imgResolver ```js imgResolver中, 接收由 promiseMatcher 传递进来的单个delta信息, new Quill(selector, { modules:{ clipboard:{ imgResolver: function(ops, next){ /* ops: 节点信息, Base64类型的ops :{image:'data:image/...;base64...'} Fill类型的ops: {image:'fill://...'} next: promiseMatcher中的resolve, ops信息修改之后, 放进next中作为返回值 if(是base64类型的信息){ 上传文件拿到上传文件的路径 const url = OSS前缀 + 文件路径 ops.image = url next(ops) } */ } } } }) ``` 2. 在onPatse前面, 添加一个函数 promiseMatcher, 这个函数主要处理两件事 - 1. 统一返回一个Promise - 2. 判断imgResolver是否存在以及是否为图片节点(所有的图片都交给imgResolver, 具体的类型判断由imgResolver处理),如果imgResolver存在, 把resolve移交给imgResolver处理(想想vue-router中路由守卫的next参数)否则, 直接把接收到的参数放进resolve中 ```js promiseMatcher(ops) { return new Promise((resolve) => { const { imgResolver } = this.options; if (!imgResolver) { resolve(ops); return; } if ( ops.insert && ops.insert.image && Object.prototype.toString .call(imgResolver) .toLowerCase() .slice(-9, -1) === "function" ) { imgResolver(ops, resolve); } else { resolve(ops); } }); } onPaste(){ // ...onPaste } ``` 3. 修改 onPaste 方法 ```js // 其他代码省略 setTimeout(() => { delta = delta.concat(this.convert()).delete(range.length); /* 这里把delta中的ops信息,通过遍历交给promiseMatcher处理,理论上, 图片上传过程中, 是不允许用户修改富文本内容的这一点imgResolver中要注意一下. */ Promise.all(delta.ops.map((item) => this.promiseMatcher(item))).then( (ops) => { delta.ops = ops; this.quill.updateContents(delta, Quill.sources.USER); this.quill.setSelection( delta.length() - range.length, Quill.sources.SILENT ); this.quill.scrollingContainer.scrollTop = scrollTop; this.quill.focus(); } ); }, 1); ``` Word内容粘贴 - word内容中如果包含图片, 浏览器是识别不了的, 但是 Quill 同样在富文本中插入了一个图片占位符. 这个完全是没有意义的, 与粘贴板内容相同, 在所有的节点处理之后, 对从word内容粘贴过来的图片节点做一次筛选, 去掉即可. ### 方案 1. 在imgResolver中添加对File内容的处理 ```js new Quill(selector, { modules:{ clipboard:{ imgResolver: function(ops, next){ /* if(是file://类型的信息){ ops = { discard: true } next(ops) } */ } } } }) ``` 2. 在 promiseMatcher完成之后 ,对所有被标记为{discard : true}的节点做一次过滤 ```js // 其他代码省略 setTimeout(() => { delta = delta.concat(this.convert()).delete(range.length); Promise.all(delta.ops.map((item) => this.promiseMatcher(item))).then( (ops) => { ops = ops.filter((item) => { if (item.discard) { return false; } return true; }); delta.ops = ops; this.quill.updateContents(delta, Quill.sources.USER); this.quill.setSelection( delta.length() - range.length, Quill.sources.SILENT ); this.quill.scrollingContainer.scrollTop = scrollTop; this.quill.focus(); } ); }, 1); ``` 以上都是二次开发的思路及修改要点, 看看就行, 项目里应用的时候都不需要改动完整示例 - 下面是一个vue文件的案例模板, 各项目可以根据需求自行更改 ```vue ``` ```less ```

quill-editor二次开发全记录