无法使用 Quill 2.0-dev3 创建自定义 BlockEmbed

Question

我们使用 Quill 1.3.7 一段时间了。我写了一些自定义嵌入印迹，可以正常工作。然后我们升级到 2.0.0-dev3 以获得新功能，这打破了我们的自定义印迹。当我选择工具栏中的选项时，我收到以下错误：

Class constructor BlockEmbed cannot be invoked without 'new'

以下是我尝试过的一些方法：

import Quill from "quill";

class PageBreak extends Quill.import("blots/block/embed") ...
class PageBreak extends Quill.import("blots/embed") ...
class PageBreak extends Quill.import("parchment").EmbedBlot ...
class PageBreak extends Quill.import("parchment").Embed ...

这些都导致了上面列出的错误。

此外，我直接使用 Parchment 的路线也有不同的错误（通常 Parchment 未定义）：

import Parchment from "parchment";

class PageBreak extends Parchment.Embed ...
class PageBreak extends Parchment.EmbedBlot ...

我使用 Quill.insertEmbed() 函数来完成此任务。我还尝试创建 Delta 并更新文档。

可以在此处找到我们的自定义 PageBreak 印迹的示例：https://codesandbox.io/s/vibrant-flower-8kuy2?file=/src/PageBreak.ts

我们的目标是 es5。

Answer 1

在使用 Typescript 的 Angular (17.3.x) 项目中从 Quill 1.3.7 升级到 Quill 2.0.2 时，我们通过将

BlockEmbed

定义为

typeof Parchment.EmbedBlot

来使其正常工作：

import Quill from 'quill';
import Parchment from 'parchment';


const BlockEmbed = Quill.import('blots/block/embed') as typeof Parchment.EmbedBlot;

class ImageBlot extends BlockEmbed {
    static blotName = 'customImage';
    static tagName = 'div';

    static create(value): Node {
        const node = super.create(value);
        const child = document.createElement('img');
        child.setAttribute('src', value.url);
        child.setAttribute('width', value.width);
        node.appendChild(child);
        return node;
    }

    static value(node): any {
        return {
            url: node.querySelector('video')?.getAttribute('src'),
            width: node.querySelector('video')?.getAttribute('width'),
        };
    }
}


Quill.register(ImageBlot);