Question

我想整合CKeditor v5，因为它具有markdown集成功能，而其他lib没有提供开箱即用的功能。在编译时我遇到了多个问题：

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

组件模板：

Component.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内部：///../../../../../src/app/shared/components/ckeditor/ckeditor.component.ts：60 TypeError：无法读取属性＆＃39; style＆＃39;为null 在ElementReplacer.replace（webpack-internal：///../../../../@ckeditor/ckeditor5-utils/src/elementreplacer.js：36）在editor.initPlugins.then.then（webpack-internal：///../../../../@ckeditor/ckeditor5-editor-classic/src/classiceditor.js:140）在ZoneDelegate.invoke（webpack-internal：///../../../../zone.js/dist/zone.js：392） at 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） at Object.onInvokeTask（webpack-internal：///../../../core/esm5/core.js：4815）在ZoneDelegate.invokeTask（webpack-internal：///../../../../zone.js/dist/zone.js：424）

任何建议都表示赞赏。

组件无法将现有JS绑定到模板视图

0 个答案: