1. Introduction of TinyMCE

TinyMCE is a lightweight rich text editor that is more streamlined than the CK editor, but must meet the needs of most scenarios.

2. Install and configure TinyMCE

3. Create the TinyMCE component

ng gc myeditor 

import {
    Component,
    AfterViewInit,
    EventEmitter,
    OnDestroy,
    Input,
    Output
} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
    selector: 'tiny-editor',
    templateUrl: './tiny-editor.component.html',
    styleUrls: ['./tiny-editor.component.css']})export class TinyEditorComponent implements AfterViewInit, OnDestroy {
    @Input() elementId: String;
    @Output() onEditorContentChange = new EventEmitter();

    editor;

    constructor() {}ngAfterViewInit() {
        let self = this;
        tinymce.init({
            selector: The '#' + this.elementId,
            height: 600,
            plugins: ['link'.'table'.'image'],
            skin_url: 'assets/skins/lightgray',
            setup: editor => {
                this.editor = editor;
                editor.on('keyup change', () => { const content = editor.getContent(); this.onEditorContentChange.emit(content); }); }}); }ngOnDestroy() { tinymce.remove(this.editor); }}Copy the code
// tiny-editor.component.html
<textarea id="{{elementId}}"></textarea>Copy the code

4. Use custom TinyMCE components

<tiny-editor [elementId]="'defined-tinymce-editor'"></tiny-editor>Copy the code

5. Add the picture uploading function

import {
    Component,
    AfterViewInit,
    EventEmitter,
    OnDestroy,
    Input,
    Output
} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
    selector: 'tiny-editor',
    templateUrl: './tiny-editor.component.html',
    styleUrls: ['./tiny-editor.component.css']})export class TinyEditorComponent implements AfterViewInit, OnDestroy {
    @Input() elementId: String;
    @Output() onEditorContentChange = new EventEmitter();

    editor;

    constructor(private http: HttpClient) { }

    ngAfterViewInit() {
        let self = this;
        tinymce.init({
            selector: The '#' + this.elementId,
            height: 600,
            plugins: ['link'.'table'.'image'],
            skin_url: 'assets/skins/lightgray',
            setup: editor => {
                this.editor = editor;
                editor.on('keyup change', () => { const content = editor.getContent(); this.onEditorContentChange.emit(content); }); }, // images_upload_handler:function(blobInfo, success, failure) {
                var formData;
                formData = new FormData();
                console.log(blobInfo);
                formData.append("file", blobInfo.blob(), blobInfo.filename());
                console.log(formData);
                self.uploadFile('http://www.seenode.com/index/player/upload', formData).subscribe( response => {
                    let url = response['data'] ['imagePath']; success(url); }); }}); } private uploadFile(url: string, formData: any) {var self = this; var headers = new HttpHeaders(); headers.set("Accept"."application/json");
        return self.http.post(url, formData, { headers: headers });
    }

    ngOnDestroy() { tinymce.remove(this.editor); }}Copy the code

6. Get and set the editor content

<tiny-editor 
    [elementId]="'defined-tinymce-editor'"
    (onEditorContentChange)="keyupHandler($event)"></tiny-editor>Copy the code

Private keyupHandler(event) {console.log()'Editor contents:', event);
}Copy the code