找不到名称 'CKEDITOR'。您是指实例成员 'this.CKEDITOR' 吗？

Question

我正在使用 Ionic 3 开发 PWA。我使用 CKEDITOR 从用户那里获得丰富的输入。我正在使用代码在 index.html 中导入 CKEDITOR 库：

  <script src="https://cdn.ckeditor.com/4.6.1/full/ckeditor.js"></script>

我还在 app.module.ts 中导入 CKEditorModule，如文档中所述。

然后我应该能够在我的应用程序中使用 CKEDITOR class。问题是在第一次加载时显示错误：

Cannot find name 'CKEDITOR'. Did you mean the instance member 'this.CKEDITOR'?

然后，如果我保存我的编辑器并且它实时重新加载，那么 CKEDITOR 工作正常。

我曾尝试处理像 ngAfterViewInit() 这样的生命周期事件，以便仅在应该完全加载后才使用 CKEDITOR 变量，但徒劳无功。

我还使用了 ionViewDidEnter 生命周期，例如：

ionViewDidEnter() {
    CKEDITOR.on('instanceReady', function (this) {
      console.log(this);
      //Disable automatic inline for divs with contenteditable true.
      this.disableAutoInline = true;

      this.instances["titre"].on('focus', function (this) { this.execCommand('selectAll', false, null); });
      this.instances["adress"].on('focus', function (this) { this.execCommand('selectAll', false, null); });
      this.instances["budget"].on('focus',function (this) { this.execCommand('selectAll', false, null); });
      this.instances["name"].on('focus',   function (this) { this.execCommand('selectAll', false, null); });
      this.instances["description"].on('focus', function (this) { this.execCommand('selectAll', false, null); });

    });

CKEDITOR 在第一次加载时仍然无法识别？关于如何在此处找到问题的任何提示？

这里有一个 Stackblitz 供大家理解：（你需要去控制台看看这个错误，在 stackblitz 上页面最终会重新加载所以编辑器可以工作，但在我的例子中它只是停留在错误上。

Stablitz 编辑：Stackblitz edit

Answer 1

我已经查看了您使用的代码 ng2-ckeditor。作为这个包你没有遵循第一步

Installation Include CKEditor javascript files in your application :

<script> src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>

您需要将 cdn 添加到您的 index.html 并且您已经在 app.module.ts.

中正确导入了 CKEditorModule

现在你必须在你的组件中使用它作为

 <ckeditor
    [(ngModel)]="ckeditorContent">
  </ckeditor>

它将加载 ckeditor 并将日期绑定到其 ngModel，有关更多配置，您可以查看 ng2-ckeditor 文档。

编码愉快！！

Answer 2

我找到了解决方案：

您需要添加

declare var CKEDITOR: any;

在 .ts 文件中的 @component 之前它会起作用。

找不到名称 'CKEDITOR'。您是指实例成员 'this.CKEDITOR' 吗？

Cannot find name 'CKEDITOR'. Did you mean the instance member 'this.CKEDITOR'?

javascript

ckeditor

ionic-framework

angular