Question

我正在尝试将CKEditor版本5集成到Angular 5应用程序中。我创建了一个组件并导入了所需的包。我可以使用相同的代码使用Webpack编译完美的CKEditor，但是我在Angular中失败了。我为svg路径得到了奇怪的解析器错误。

错误截图： https://www.dropbox.com/s/xwoas03fd4q7gks/Screenshot%202017-12-13%2011.55.45.png?dl=0

我的组件看起来像：

import { Component, AfterViewInit, ChangeDetectionStrategy, ViewChild, ElementRef, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';

// Required Dependencies for library construction
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/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,
 encapsulation: ViewEncapsulation.None,
 selector: 'ten-ckeditor',
 styleUrls: ['./ckeditor.component.scss'],
 templateUrl: './ckeditor.component.html',
})

export class CkeditorComponent implements AfterViewInit {
  @Input() content: string;
  @Output() contentEdited: EventEmitter<string>;
  @ViewChild('editor') editor: ElementRef;

constructor() {
}

ngAfterViewInit() {

function Markdown( editor ) {
  editor.data.processor = new GFMDataProcessor();
}
console.log(List);
ClassicEditor.create(this.editor.nativeElement, {
  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.content);
})
.catch(error => {
  console.error(error.stack);
});

}

}

这是我在定位Icon时检查应用程序内的HTML时得到的结果。

<svg class="ck-icon" viewBox="0 0 20 20"><body><parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 1: Document is empty
</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></body></svg>

Answer 1

我的图标也没有用。我在webpack配置中有类似的东西：

   {
      module: {
        rules: [
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader'
          },
        ],
      },
    }

所以我删除了'| svg'部分，然后添加了：

           {
             test: /\.svg(\?.*)?$/,
             loader: 'raw-loader',
           },

它对我有用。

CKEditor 5无法在Angular 5组件内编译svg

1 个答案: