简而言之:我正在尝试创建自定义列表污点以在ngx-羽毛笔中显示字母列表。
我到目前为止所做的事情: 我通过复制和粘贴“ https://github.com/quilljs/quill/blob/develop/formats/list.js”并进行编辑来创建自定义列表污点:
import Quill from 'quill';
const Block = Quill.import('blots/block');
const Inline = Quill.import('blots/inline');
const Embed = Quill.import('blots/embed');
const Container = Quill.import('blots/container');
class CustomListContainer extends Container {}
CustomListContainer.blotName = 'custom-list-container';
CustomListContainer.tagName = 'OL';
CustomListContainer.className = 'custom-letter-list';
class CustomListItem extends Block {
static create(value) {
const node = super.create();
node.setAttribute('data-list', value);
return node;
}
static formats(domNode) {
return domNode.getAttribute('data-list') || undefined;
}
static register() {
Quill.register(CustomListContainer);
}
constructor(scroll, domNode) {
super(scroll, domNode);
const ui = document.createElement('span');
const listEventHandler = e => {
if (!scroll.isEnabled()) return;
const format = this.statics.formats(domNode, scroll);
if (format === 'checked') {
this.format('custom-letter-list', 'unchecked');
e.preventDefault();
} else if (format === 'unchecked') {
this.format('custom-letter-list', 'checked');
e.preventDefault();
}
};
/*
ui.addEventListener('mousedown', listEventHandler);
ui.addEventListener('touchstart', listEventHandler);
this.attachUI(ui);
*/
}
format(name, value) {
if (name === this.statics.blotName && value) {
this.domNode.setAttribute('data-list', value);
} else {
super.format(name, value);
}
}
}
CustomListItem.blotName = 'custom-letter-list';
CustomListItem.tagName = 'LI';
CustomListContainer.className = 'custom-letter-list-item';
CustomListContainer.allowedChildren = [CustomListItem];
CustomListItem.requiredContainer = CustomListContainer;
Quill.register(CustomListContainer);
Quill.register(CustomListItem);
export { CustomListContainer, CustomListItem as default};
并将此列表印迹添加到工具栏:
<div id=toolbar>
<span class="ql-formats">
<button class="ql-custom-letter-list">L</button>
</span>
</div>
预期的行为: 屏幕上应该出现一个从“ a”开始计数的字母列表,例如:
a。首先
b。第二
HTML表示:
<div class="ql-editor">
<ol class="custom-letter-list">
<li data-list="true">first</li>
<li data-list="true">second</li>
</ol>
</div>
实际行为: 项目符号列表出现在屏幕上:
HTML表示
<div class="ql-editor">
<li data-list="true">first</li>
<li data-list="true">second</li>
</div>
我希望有人可以帮助我解决这个问题。我完全不知道怎么了。
亲切的问候, HTanke