Question

我正在尝试在此问题中实现可能重叠的属性：Overlapping Inline Annotations with Quill此问题：https://github.com/quilljs/quill/issues/1216

唯一不同的是我正在使用TypeScript。这是我的代码的摘录：

import Quill from "quill";
import Parchment from "parchment";

class Comment extends Parchment.Attributor.Attribute {
    constructor(attrName = 'comment', keyName = 'data-comment') {
        super(attrName, keyName, { scope: Parchment.Scope.INLINE_ATTRIBUTE })
    }

    add(node: HTMLElement, value: any) : boolean {
        if (this.canAdd(node, value)) {
            let ids: string[] = []

            if (node.hasAttribute(this.keyName)) {
                ids = node.getAttribute(this.keyName)!.split(',')
            }

            if (ids.indexOf(value) < 0) {
                ids.push(value)
            }

            node.setAttribute(this.keyName, ids.sort().join(','))

            return true
        }
        else
        {
            return false
        }
    }

    remove(node: HTMLElement) {
        node.removeAttribute(this.keyName)
    }

    value(node: HTMLElement) : string {
        return node.getAttribute(this.keyName) || "";
    }
}

Quill.register({
    'formats/comment': new Comment()
});

let customCommentHandler = () => {
    // get the position of the cursor
    let range = this.editor.getSelection();
    if (range) {
        this.editor.formatText(range.index, range.length, "comment", this.counter);
        this.counter += 1;
    }
};

这编译得很好但是当我真的尝试通过自定义处理程序应用它时，我得到一个TypeError: BlotClass.create is not a function quill.js:181

知道我做错了什么？

编辑：忘了提这个问题有点回答同样的问题：Creating a custom class attributer in QuillJS但是，这张海报使用了JavaScript并且只实例化了Attributor而不是派生它。他们通过不同方式导入羊皮纸来解决问题。我试过了，这使得TypeScript抱怨我的构造函数中不知道super，因为Parchment的类型为Any。通过使用let Parchment = Quill.import("parchment");导入羊皮纸，我丢失了所有类型信息，而我的派生Attributor不再编译。

我现在找到了解决方法。显然，import Parchment from "parchment";目前无效，正如此问题中所述："BlotClass.create is not a function" when trying to create a custom attributor in Quill

当我使用let Parchment = Quill.import("parchment");时，编译器在调用super时会抱怨。所以我通过这样推导来“伪造”了typeinfo：

let Parchment = Quill.import('parchment');
class Comment extends (Parchment.Attributor.Class as { new(attrName: any, keyName: any, options: any): any; } ){
    constructor(attrName = 'comment', keyName = 'comment') {
        super(attrName, keyName, { scope: Parchment.Scope.INLINE_ATTRIBUTE });
    }

    // rest of the class goes here
}

通过人工提供结构，我至少可以称之为。它编译时没有抱怨和工作。

毋庸置疑，这不是一个非常令人满意的解决方案，因为我失去了TypeScript的好处，比如代码完成和正确的类型检查，我不得不添加恼人的样板代码作为解决方法。

我仍然希望能有更好的解决方案。

Quilljs：派生自定义Attributor时的TypeError

0 个答案: