Question

我正在从事离子项目。我正在尝试将CKEditor module集成到我的项目中。

<ckeditor [(ngModel)]="content" editor="Editor">
</ckeditor>

我遇到了一个错误：

“ ckeditor”不是已知元素。

因此，我尝试了一些在Internet上找到的解决方案，但不幸的是，没有任何解决方案对我有用。

我尝试包含CUSTOM_ELEMENTS_SCHEMA和NO_ERRORS_SCHEMA。我包含了FormsModule，但没有机会。

我在想，请问您能帮我吗？

谢谢。

Answer 1

所以我解决了这个问题。我做了以下事情：

var textarea = document.getElementById('editor1');
const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );
ClassicEditor.create( document.getElementById( 'editor1' ) )
.then( editor => {
    console.log( editor );
} )
.catch( error => {
    console.error( error );
} );

Answer 2

在您的angular或angular-ionic应用中安装这两个软件包。

npm install --save @ckeditor/ckeditor5-angular

npm install --save @ckeditor/ckeditor5-build-classic

然后将其导入模块app.module.ts中，并在组件中使用它。

import * as CKEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  selector: 'app-editor',
  template: '<ckeditor [editor]="editor" [data]="summary"></ckeditor>',
  styleUrls: ['./edit-summary.component.scss']
})
export class EditorComponent {

  summary: string = `<p>Lorem ipsum</p>`
  public editor = CKEditor
  constructor() {
  }
}

如果未找到ckeditor，请阅读以下内容：

即您有组件summary.component，并且在summary.module中进行了声明，则有必要在CKEditorModule中导入summary.module。

假设您有summary.module.ts，例如：

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
@NgModule({
  declarations: [
    SummaryComponent
  ],
  imports: [
    CommonModule,
    CKEditorModule,
  ],
  exports: [
    SummaryComponent
  ],
})
export class SummaryModule { }

然后将CKEditor导入summary.component.ts

import * as CKEditor from '@ckeditor/ckeditor5-angular';

@Component({
  selector: 'app-edit-summary',
  template: '<ckeditor [editor]="editor" [data]="summary"></ckeditor>',
  styleUrls: ['./edit-summary.component.scss']
})
export class EditSummaryComponent {

  summary: string = `<p>Lorem ipsum</p>`
  public editor = CKEditor
  constructor() {
  }
}

“ ckeditor”不是离子4的已知元素

2 个答案:

如果未找到ckeditor，请阅读以下内容：