CKEditor5文本编辑器-angular使用

安装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',                             // <--- ADDED
                'highlight',						     // <--- ADDED
                'bold',
                'italic',
                // 'indent',
                // 'outdent',
                '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 => {
                        // 获取媒体url
                        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;
}