0%

JS 自定义 Quill

官方文档示例

https://quilljs.com/guides/cloning-medium-with-parchment/

自己写一个

定制自己的组件,参考官方 demo 怎么写都写不出来,后来发现这样就可以了

1
2
let Parchment = Quill.import('parchment');
// ........

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var Embed = Quill.import('blots/embed');
class MyCustomTag extends Embed {
static create(paramValue) {
let node = super.create();
node.innerHTML = paramValue;
//node.setAttribute('contenteditable', 'false');
//node.addEventListener('click', MyCustomTag.onClick);
return node;
}

static value(node) {
return node.innerHTML;
}
}

MyCustomTag.blotName = 'my-custom-tag';
MyCustomTag.className = 'my-custom-tag';
MyCustomTag.tagName = 'my-custom-tag';
//in case you need to inject an event from outside
/* MyCustomTag.onClick = function(){
//do something
}*/

Quill.register(MyCustomTag);

其他

还有个监听删除的代码

1
2
3
4
5
6
7
8
9
quill.on("text-change", (delta, oldDelta, source) => {
if (source === "user") {
let currrentContents = quill.getContents();
let diff = currrentContents.diff(oldDelta);
try {
console.log(diff.ops[0].insert.image);
} catch (_error) {}
}
});

参考文章

这个写的特别好

其他参考