最近在使用quill.js 封装 quill editor 时,遇到了一个奇怪的问题,明明在保存的时候保存的是携带空格的值,返回的数据也是正常携带空格的,重新赋值到 editor 中,空格/Tab丢失了
如下图所示:
外部显示时丢失空格,可以使用样式
white-space: pre-wrap;解决
editor 内部丢失是一个不正常的现象,我是使用quill官方推荐的方式回显的
// quill 是 new Quill 的实例
const delta = quill.clipboard.convert({ html: props.modelValue ?? '' });
quill.setContents(delta, 'silent');最终呢在 quill 2.0.3 版本发现了一个 pull request,大概意思就是修复了 clipboard 粘贴内容时空格丢失的问题,那么既然修复了,我这边赋值使用的api和粘贴使用的api是一致的,不应该出现这个问题。
最后通过对比粘贴和直接赋值的元素,发现粘贴板的内容和直接赋值不一致,所以还是会丢失空格,这是quill.clipboard的默认行为。
我的解决思路就是跳过这部分的检查:
这部分代码放到 modules 里面,因为 clipboard 是一个 quill 的模块,应该vue-quill-editor、react-quill这些也能自己定义模块的matchers,根据自己的实际情况调整代码就好了
clipboard: {
matchers: [
// 解决使用 quill.clipboard.convert 转换 HTML 时,文本节点内容里的空格、Tab 被忽略的问题
[Node.TEXT_NODE, (node: any, delta: Delta) => {
if (!node.data) { return delta }
return new Delta().insert(node.data)
}],
],
},上面的主要意思就是纯文本节点我们使用 Delta 单独转换,就不会丢失空格,这是我想到的比较好的解决方案,也有其他社区提供了在 quill.clipboard.convert 之前将内容内的空格替换为具体的 ,不过我觉得不是很好的解决方案。
ngx-quill富文本编辑器空格保留问题的深度解析与解决方案
评论
暂无评论,快来抢沙发吧!