找不到名称“ 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类。问题在于，第一次加载时会显示错误：

  

找不到名称“ CKEDITOR”。您是说实例成员吗   “ 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的代码。作为此软件包，您没有执行第一步

  

安装在您的应用程序中包括CKEditor javascript文件：

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

您需要将CDN添加到您的index.html中，并且已经正确地将CKEditorModule导入了您的app.module.ts中。

现在，您必须在组件中使用

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

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

快乐编码！

Answer 2

我找到了解决方法：

您需要添加

declare var CKEDITOR: any;

.ts文件中@component之前，它将起作用。