背景： 目前本人在开发一个IM聊天web界面，使用的是Quill作为输入框编辑器。编辑器需要保持纯文本格式，因此需要将拷贝过来的粘贴内容的原始html格式全部清除。
目前网上一般流行两个方案：
方案一 ：增加clipboard的matcher自定义处理规则，修改返回的delta数据。
// 保留图片跟空格，清除其余所有样式
this.quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
delta.ops = delta.ops.map(op => {
return {
insert: op.insert
}
})
return delta
})
// 只保留纯文本
this.quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
let ops = []
delta.ops.forEach(op => {
if (op.insert && typeof op.insert === 'string') {
ops.push({
insert: op.insert
})
}
})
delta.ops = ops
return delta
})
这个方案可以清除大部分的复制格式，但处理不了像表格组件这种自带的li,lo标签等
方案二： 自定义PlainClipboard（继承原有的），重写onPaste处理逻辑
/**
* 处理粘贴格式问题
*/
const Clipboard = Quill.import('modules/clipboard')
class PlainClipboard extends Clipboard {
onPaste(range, { text }) {
const delta = new Delta().retain(range.index).delete(range.length).insert(text)
this.quill.updateContents(delta, Quill.sources.USER)
this.quill.setSelection(delta.length() - range.length, Quill.sources.SILENT)
this.quill.scrollSelectionIntoView()
}
}
Quill.register(
{
'modules/clipboard': PlainClipboard
},
true
)
可以看到格式全部都清除了，变成了最原始的div下的p标签
