CKEditor 5がsvgを角5の内部にコンパイルできない

CKEditorのバージョン5を角5のアプリケーションに統合しようとしています。私はコンポーネントを作成し、必要なパッケージをインポートしました。私は同じコードを使ってWebpackを使って完璧に細かいCKEditorをコンパイルすることができますが、Angleの中ではtodoに失敗します。私はsvgパスのための奇妙なパーサーエラーを取得します。CKEditor 5がsvgを角5の内部にコンパイルできない

エラーのスクリーンショット：これは私はアイコンをターゲットとするとき、私はアプリケーション内でHTMLを調べるときに私が得るものです

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); 
}); 

} 

}

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

私のコンポーネントは次のようになります。

<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>

出典

2017-12-13 Luke

ほとんど1ヶ月です。あなたはこれに対する解決策を見つけましたか？ – klaar

回避策を使用しました。私はFloral HTML WYSIWYGエディタを使用し、パッケージを使用しました： "showdown"： "^ 1.8.5"、 "to-markdown"： "^ 3.1.1"。 APIに提出する前に、HTMLをMarkdownに変換する。これはエレガントではなく、JQueryの依存関係をもたらします。私はおそらく、後でAngularCLIを注入する必要がないときにCKEditor 5に変更します – Luke

私のアイコンも機能しませんでした。私は私のWebPACKの設定でこのようなものを持っていた：

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

は、だから私は削除「| SVG」部分を、その後、コメントを追加しました：

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

そして、それは私のために動作します。

出典

2018-01-13 19:42:44

Angular＆Angular CLIのどのバージョンを使用していますか？ – Luke

CKEditor 5がsvgを角5の内部にコンパイルできない

答えて

関連する問題