3

您好我正在尝试将 Ngx-Quill 与 ImageResize 一起使用。我只是无法让它工作。

我发现了像这样的“半解决方案”：检查链接

在实现这个之后，我可以让它在运行时像预期的那样工作ng serve。

这就是我的 app.component 中的样子：

import * as QuillNamespace from 'quill';
const Quill: any = QuillNamespace;
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

但是，如果我在上面运行npm run dev:ssr它将无法工作，因为导入与 ssr 不兼容。我尝试了很多解决方法 swith domino，但没有成功，我也尽量避免使用 domino。

所以我尝试有条件地导入它，所以我不会得到这样的服务器端错误：

constructor() {
    if (isPlatformBrowser(platformId)) {
      import('quill').then(quill => {
        const QuillNamespace: any = quill;
        import('quill-image-resize-module').then(ImageResize => {
          QuillNamespace.register('modules/imageResize', ImageResize);
        });
      });
    }
}

这使 ssr 服务器保持清洁，但在使用带有 Quill-Editor 的页面时会导致客户端出现以下错误：

在此处输入图像描述

有什么想法或解决方法吗？

4

1 回答 1

1

这让我绞尽脑汁，但我开始控制台记录传统导入以及动态导入的结果，并意识到所有动态导入的所有内容都在一个名为“默认”的子属性下。

在构造函数中检查你是否在浏览器环境中之后，你会想要更多类似的东西（我更喜欢将我的导入承诺与 Promise.all 结合起来）

Promise.all([
    import('quill-image-resize'),
    import('quill'),
  ]).then(([ImageResize, Quill]) => {
    console.log({ Quill, ImageResize });
    // each has a "default" which is identical to the traditional import
    Quill.default.register('modules/imageResize', ImageResize.default);
    this.quillModules = { imageResize: {} }; //it's important to do this here
  });

您还需要确保在此过程完成之前不会将您的羽毛笔编辑器应用于 DOM，因为如果您更新“模块”属性，它不会更新。

   <quill-editor
    *ngIf="!!quillModules"
    [(ngModel)]="body"
    [modules]="quillModules"
  ></quill-editor>
于 2020-11-30T23:48:16.290 回答