홈>2020-12-22 07:58source

javascript - Angular 앱에서 CKEditor5 사용자 지정 빌드 사용

저는 일종의 기사 편집기를 만들고 있습니다.이를 위해각도 통합 CKEditor5의 경우;설명서에 따라 올바르게 사용할 수 있습니다. ClassicEditor 함께 구축 ckeditor 구성 요소.

다음은 내 파일입니다.

import { Component, OnInit } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@Component({
  selector: 'app-edit-article',
  templateUrl: './edit-article.component.html',
  styleUrls: ['./edit-article.component.scss']
})
export class EditArticleComponent implements OnInit {
  constructor() { }
  public Editor = ClassicEditor;
  articleForm: FormGroup;
  ngOnInit() {
  }
}

주형

<div class="row">
    <div class="col-12">
         <label for="">Content</label>
         <ckeditor [editor]="Editor" id="editor" class="blue-scroll--light" formControlName="content"></ckeditor>
    </div>
</div>

불행히도 ClassicEditor 이 가이드에서 참조 된 빌드에는 많은 플러그인이 포함되어 있지 않으므로 텍스트 정렬, 글꼴 색상, 글꼴 크기 등과 같은 플러그인 중 일부를 추가하려고합니다.

내가 만들어야 할 것 같습니다맞춤 빌드원하는 모든 기능을 포함하고 대신 해당 빌드를 참조합니다. ClassicEditor 내가 올바르게 이해하면 내 typescript 파일에 있으므로 계속해서온라인 빌더 이미 포함 된 모든 플러그인으로 빌드를 만들었지 만 그 후에는 어떻게 진행해야할지 모르겠고 문서가 정말 명확하지 않습니다.

내가 이해하는 한 build 내 Angular 앱 내의 폴더를 가져온 다음 ckeditor.js 내 구성 요소의 파일은 다음과 같습니다.

import * as Editor from '../../../../../core/libs/ckeditor5/build/ckeditor';

대신 가져 오기를 사용하도록 편집기의 선언을 변경하십시오. ClassicEditor , 그래서 :

public Editor = Editor;

그러나 변경하자마자 다음 오류가 발생하기 때문에 더 이상 앱을 실행할 수 없습니다.

ERROR Error: Uncaught (in promise): CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
    at Object.<anonymous> (ckeditor.js:5)
    at Object.push../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
    at i (ckeditor.js:5)
    at Module.<anonymous> (ckeditor.js:5)
    at i (ckeditor.js:5)
    at push../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
    at ckeditor.js:5
    at ckeditor.js:5
    at Object../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
    at __webpack_require__ (bootstrap:84)
    at resolvePromise (zone.js:852)
    at resolvePromise (zone.js:809)
    at zone.js:913
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:30885)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

다시 말하지만, 문서는 여러 번의 가져 오기 때문이라고 말하지만 나는 단지 사용하고 있기 때문에 어떻게 이해하지 못합니다. ckeditor.js 방금 생성 한 빌드에 포함 된 파일로 일반 HTML 파일에서 참조하면 정상적으로 작동합니다.

누군가 Angular 앱에서 사용자 지정 빌드를 성공적으로 만드는 방법에 대한 예제를 제공 할 수 있습니까?

javascriptangulartypescript

답변 # 1
잠시 후 문제는 내 응용 프로그램의 다른 모듈에서 다른 빌드를 가져온 것 같습니다.

그래서 저는 내 EditArticle 해당 파일을 가져오고 사용하여 구성 요소를 가져 왔지만 다른 모듈에 가져 와서 사용하는 다른 구성 요소도 있습니다. ClassicEditor NPM을 통해 설치 한 빌드로 오류가 발생한 것 같습니다.

수정이 아니었다없애다그만큼 ClassicEditor 패키지 또는 제거 import ClassicEditor 그러나 컴파일하는 동안 Angular는 사용하지 않는 모든 가져 오기를 제거하기 때문에 특정 가져 오기가 앱의 다른 곳에서 사용되지 않았는지 확인합니다.

이 작업을 수행하면 응용 프로그램이 내 사용자 지정 빌드로 제대로 실행되었습니다.

정리하기 위해이 두 가지 가져 오기를 동일한 파일 또는 여러 구성 요소에 가질 수 있습니다.
```
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
```
하지만 전체 앱에서 그중 하나만 사용해야하므로 에디터가있는 경우 Component1 그리고 Component2 , 두 빌드를 모두 가질 수 있습니다.수입,하지만 Editor 속성의 선언에서는 하나만 사용해야하며 앱이 사용하는 모든 구성 요소에서 동일해야합니다.

이것은 작동합니다

성분 1
```
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
public Editor = Editor;
```
성분 2
```
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
public Editor = Editor;
```
이습관작업

성분 1
```
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
public Editor = Editor;
```
성분 2
```
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
public Editor = ClassicEditor;
```
물론 임포트에서 사용하지 않는 빌드를 모두 제거 할 수 있으며 이것도 작동합니다. 다시 말하지만, 모든 애플리케이션에서 동일한 빌드를 사용하는지 확인하십시오.

답변 # 2

    console.log(this.ckEditorClassic.builtinPlugins.map( plugin => plugin.pluginName ));
  }
This will give you the list of plugins in the custom build. 
My sample has :
["Alignment", "AutoImage", "Autoformat", "Autosave", "BlockQuote", "Bold", "CodeBlock", "Essentials", "ExportPdf", "ExportWord", "FontBackgroundColor", "FontColor", "FontFamily", "FontSize", "Heading", "Highlight", "HorizontalLine", "Image", "ImageCaption", "ImageInsert", "ImageResize", "ImageStyle", "ImageToolbar", "ImageUpload", "Indent", "IndentBlock", "Italic", "Link", "List", "Markdown", "MathType", "MediaEmbed", "MediaEmbedToolbar", "PageBreak", "Paragraph", "PasteFromOffice", "SpecialCharacters", undefined, undefined, undefined, undefined, undefined, "Strikethrough", "Subscript", "Superscript", "Table", "TextTransformation", "WordCount"]

take the displayed list within [] and replace xxxx with it.
<ckeditor [config]="{toolbar:[xxxx] }"

Python2.net

javascript - Angular 앱에서 CKEditor5 사용자 지정 빌드 사용

관련 자료