저는 일종의 기사 편집기를 만들고 있습니다.이를 위해각도 통합 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 앱에서 사용자 지정 빌드를 성공적으로 만드는 방법에 대한 예제를 제공 할 수 있습니까?
- 답변 # 1
- 답변 # 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] }"
관련 자료
- scala - tell을 사용하여 Rest API 빌드
- c++ - CMake를 사용한 결정 론적 라이브러리 빌드
- javascript - 사용자 지정 옵션이있는 최고의 Angular DataTable은 엔터프라이즈 응용 프로그램을 만들기위한 것입니까?
- python - 사용자 지정 손실 함수 사용시 modelfit () 오류
- 공용 API 용 DOCUMENT를 사용하여 Angular 10 Guard를 내보내는 방법
- reactjs - useState ()를 제대로 사용하지 않는 사용자 지정 후크?
- Angular 10 - 각도 10 - angular에 경로 경로를 구축 할 수있는 방법이 있습니까?
- reactjs - create-react-app 및 Typescript를 사용할 때 빌드에서 md 파일을로드하는 방법은 무엇입니까?
- 앵귤러 머티리얼을 사용하고 있습니다 입력 필드를 이메일로 보내는 방법
- javascript - iframe을 사용하여 Angular JS 애플리케이션에서 Angular 10 애플리케이션으로 메시지를 게시 할 수 없음
- javascript - 빌드 후 외부 Vue 구성 요소 사용
- scala - HttpRequest를 사용하여 Jenkins 파이프 라인 빌드
- r - ggplot2를 사용하여 축의 특정 지점에 사용자 지정 텍스트 추가
- vue.js - typescript를 사용할 때 사용자 지정 확장을 추가하는 방법
- javascript - 사용자 지정 단추에 사용자 지정 CSS 사용 (FullCalendar)
- html - 텍스트 영역, 버튼 및 자바 스크립트를 사용하여 사용자 정의 글꼴 크기 설정
- vb6 - 다른 프로그램이 "DBF"파일의 데이터를 관리 할 수 있도록 Visual Foxpro를 사용하여 DLL을 빌드해야합니다
- typescript - Angular를 사용하여 서버에 게시 요청하기
- angularjs - 공백을 사용하여 다중 단어 필터를 검색하는 Angular Js Smart Table 사용자 정의 필터
잠시 후 문제는 내 응용 프로그램의 다른 모듈에서 다른 빌드를 가져온 것 같습니다.
그래서 저는 내
EditArticle
해당 파일을 가져오고 사용하여 구성 요소를 가져 왔지만 다른 모듈에 가져 와서 사용하는 다른 구성 요소도 있습니다.ClassicEditor
NPM을 통해 설치 한 빌드로 오류가 발생한 것 같습니다.수정이 아니었다없애다그만큼
ClassicEditor
패키지 또는 제거import ClassicEditor
그러나 컴파일하는 동안 Angular는 사용하지 않는 모든 가져 오기를 제거하기 때문에 특정 가져 오기가 앱의 다른 곳에서 사용되지 않았는지 확인합니다.이 작업을 수행하면 응용 프로그램이 내 사용자 지정 빌드로 제대로 실행되었습니다.
정리하기 위해이 두 가지 가져 오기를 동일한 파일 또는 여러 구성 요소에 가질 수 있습니다.
하지만 전체 앱에서 그중 하나만 사용해야하므로 에디터가있는 경우
Component1
그리고Component2
, 두 빌드를 모두 가질 수 있습니다.수입,하지만 Editor 속성의 선언에서는 하나만 사용해야하며 앱이 사용하는 모든 구성 요소에서 동일해야합니다.이것은 작동합니다
성분 1
성분 2
이습관작업
성분 1
성분 2
물론 임포트에서 사용하지 않는 빌드를 모두 제거 할 수 있으며 이것도 작동합니다. 다시 말하지만, 모든 애플리케이션에서 동일한 빌드를 사용하는지 확인하십시오.