安装ckeditor项目依赖
npm install --save @ckeditor/ckeditor5-angular
npm install --save @ckeditor/ckeditor5-build-classic
npm install --save @ckeditor/ckeditor5-ui
根据实际情况配置封装ckeditor组件
< ckeditor [editor] = " Editor" [(ngModel)] = " editorContent" [config] = " config" (ready) = " onReady($event)" (ngModelChange) = " checkWordLimit($event)" > </ ckeditor>
:host ::ng-deep .ck-editor__editable_inline {
min-height : 800px;
line-height : 18px;
overflow : auto;
}
import { Component, EventEmitter, Inject, Input, OnInit, Output} from '@angular/core' ;
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic' ;
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js' ;
import { ValidationErrors} from '@angular/forms' ;
import { AuthService} from '../../common/AuthService' ;
@Component ( {
selector: 'app-common-editor' ,
templateUrl: './common-editor.component.html' ,
styleUrls: [ './common-editor.component.scss' ]
} )
export class CommonEditorComponent implements OnInit {
@Input ( )
Editor = ClassicEditor;
@Input ( )
config = {
language: 'zh-cn' ,
alignment: {
options: [ 'left' , 'center' , 'right' ] ,
} ,
fontSize: {
options: [ 'default' , 9 , 10 , 11 , 12 , 13 , 14 , 15 , 16 , 18 , 20 ]
} ,
toolbar: {
items: [ 'heading' ,
'|' ,
'undo' ,
'redo' ,
'alignment' ,
'highlight' ,
'bold' ,
'italic' ,
'fontBackgroundColor' ,
'fontSize' ,
'|' ,
'link' ,
'bulletedList' ,
'numberedList' ,
'imageUpload' ,
'blockQuote' ,
'insertTable' ,
'mediaEmbed' ] ,
shouldNotGroupWhenFull: true
} ,
ckfinder: {
uploadUrl: '/ckfinder/connector?command=QuickUpload&type=Files&responseType=json' ,
} ,
mediaEmbed: {
providers: [
{
name: 'myprovider' ,
url: [
/ ^dsy.*\.com.*\/media\/(\w+) / ,
/ ^www\.dsy.* / ,
/ ^.* /
] ,
html : match => {
const input = match. input;
return ( ` <video controls="controls" autoplay muted="muted" style="width: 100%;height: 100%">
<source src=" ${ input} " type="video/ogg" />
<source src=" ${ input} " type="video/mp4" />
<source src=" ${ input} " type="video/webm" />
<object data=" ${ input} " width="320" height="240">
<embed width="320" height="240" src=" ${ input} " />
</object>
</video> ` ) ;
}
}
] ,
previewInData: true
} ,
heading: {
options: [
{ model: 'paragraph' , title: '正文' , class : 'ck-heading_paragraph' } ,
{ model: 'heading1' , view: 'h1' , title: '标题1' , class : 'ck-heading_heading1' } ,
{ model: 'heading2' , view: 'h2' , title: '标题2' , class : 'ck-heading_heading2' } ,
{ model: 'heading3' , view: 'h3' , title: '标题3' , class : 'ck-heading_heading3' } ,
{ model: 'heading4' , view: 'h4' , title: '标题4' , class : 'ck-heading_heading4' } ,
] ,
} ,
} ;
@Input ( )
editorContent: any = '' ;
@Output ( ) public outer = new EventEmitter< string > ( ) ;
errors: ValidationErrors;
public onReady ( editor) : void {
editor. ui. getEditableElement ( ) . parentElement. insertBefore (
editor. ui. view. toolbar. element,
editor. ui. getEditableElement ( ) ,
) ;
}
constructor ( @Inject ( 'apiUrl' ) public apiUrl, public authService: AuthService) {
this . config. ckfinder. uploadUrl = apiUrl + 'minio/uploadRichTextImage?token='
+ authService. getStorageToken ( ) ;
}
ngOnInit ( ) : void {
}
checkWordLimit ( words: any ) : void {
this . outer. emit ( words) ;
}
}
import { NgModule} from '@angular/core' ;
import { CommonModule} from '@angular/common' ;
import { CommonEditorComponent} from './common-editor.component' ;
import { CKEditorModule} from '@ckeditor/ckeditor5-angular' ;
import { FormsModule} from '@angular/forms' ;
@NgModule( {
declarations: [ CommonEditorComponent] ,
imports: [
CommonModule,
CKEditorModule,
FormsModule
] ,
exports: [
CommonEditorComponent
]
} )
export class CommonEditorModule {
}
使用封装的CKEditor
< app-common-editor (outer) = " setDetails($event)" [editorContent] = " details" > </ app-common-editor>
details;
editorContent;
setDetails ( details: string ) : void {
this . editorContent = details;
}