0

我想集成 CKeditor v5，因为它具有其他 lib 开箱即用的降价集成功能。编译时遇到多个问题：

  1. 使用 Angular 5 组件无法将现有 JS 绑定到模板视图。

组件模板：

组件.ts：

import { Component, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';

// Required Dependencies for library construction
import ClassicEditor from '@ckeditor/ckeditor5-editorclassic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import GFMDataProcessor from '@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor';

@Component({
  changeDetection: ChangeDetectionStrategy.Default,
  selector: 'ten-ckeditor',
  styleUrls: ['./ckeditor.component.scss'],
  templateUrl: './ckeditor.component.html',
})

export class CkeditorComponent implements AfterViewInit {

  constructor() {
  }

  ngAfterViewInit() {
  console.log(ClassicEditor);

  function Markdown( editor ) {
    editor.data.processor = new GFMDataProcessor();
  }

  ClassicEditor.create(document.querySelector('#editor'), {
  plugins: [
    Markdown,
    Essentials,
    Paragraph,
    Bold,
    Italic,
    Heading,
    BlockQuote,
    Link,
    List
    ],
  toolbar: [
    'headings',
    'bold',
    'italic',
    'blockquote',
    'link',
    'numberedList',
    'bulletedList'
    ]
})
.then(editor => {
  console.log('Editor was initialized', editor);
  editor.setData('This is **bold**.');
})
.catch(error => {
  console.error(error.stack);
});

  }

}

错误：

webpack-internal:///../../../../../src/app/shared/components/ckeditor/ckeditor.component.ts:60 TypeError: Cannot read property 'style' of null at在 editor.initPlugins.then.then (webpack-internal :///../../../../@ckeditor/ckeditor5-editor-classic/src/classiceditor.js:140) 在 ZoneDelegate.invoke (webpack-internal:///../.. /../../zone.js/dist/zone.js:392) 在 Object.onInvoke (webpack-internal:///../../../core/esm5/core.js:4824)在 ZoneDelegate.invoke (webpack-internal:///../../../../zone.js/dist/zone.js:391) 在 Zone.run (webpack-internal:///.. /../../../zone.js/dist/zone.js:142) 在 eval (webpack-internal:///../../../../zone.js/dist/ zone.js:873) 在 ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:425) 在 Object.onInvokeTask (webpack-internal:///../../../core/ esm5/core.js:4815) 在 ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:424)

任何建议表示赞赏。

4

0 回答 0