1

简而言之：我正在尝试创建一个自定义列表印迹以在 ngx-quill 中显示一个字母列表。

到目前为止我所做的：我通过从“ 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”开始计数的字母列表，例如：

一个。首先
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

4

0 回答 0