CKEditor 5가 svg를 앵귤러 5 구성 요소 안에 컴파일하지 못했습니다.

CKEditor 버전 5를 앵귤러 5 응용 프로그램에 통합하려고합니다. 구성 요소를 만들고 필요한 패키지를 가져 왔습니다. 필자는 동일한 코드를 사용하여 Webpack을 사용하여 완벽하게 정밀한 CKEditor를 컴파일 할 수 있지만 Angular 내부에서는 수행 할 수 없습니다. 내가 svg 경로에 대한 이상한 파서 오류가 발생합니다. 이것은 내가 아이콘을 대상으로 할 때 내가 응용 프로그램 내에서 HTML을 검사 할 때 내가 무엇을 얻을CKEditor 5가 svg를 앵귤러 5 구성 요소 안에 컴파일하지 못했습니다.

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

거의 한 달이되었습니다. 이것을위한 해결책을 찾았습니까? – klaar

해결 방법을 사용했습니다. 저는 Floral HTML WYSIWYG 편집기를 사용하고 패키지를 사용했습니다 : "showdown": "^ 1.8.5", "to-markdown": "^ 3.1.1". API를 제출하기 전에 HTML을 Markdown으로 변환하십시오. 우아하지 않고 JQuery 종속성을 가져옵니다. AngularCLI를 삽입 할 필요가 없을 때 CKEditor 5로 변경 될 것입니다 – Luke

내 아이콘이 작동하지 않습니다. '| SVG'

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

그래서 제가 제거 된 부분을 한 다음 추가 : 내 웹팩 설정에서 이런 일이 있었다

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

을 그리고 그것은 나를 위해 작동합니다.

출처

2018-01-13 19:42:44

어떤 Angular & Angular CLI 버전을 사용하고 있습니까? – Luke

CKEditor 5가 svg를 앵귤러 5 구성 요소 안에 컴파일하지 못했습니다.

답변

관련 문제