Angular5 method to integrate rich text editor TinyMCE (Chinese+upload)

1. Introduction to TinyMCE

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

2. Install and configure TinyMCE

2.1 Install TinyMCE

npm install-Save tinymce

2.2 Set tinymce local access (.)

"scripts": [
  "../node_modules/[email protected]/",
  "../node_modules/[email protected]/themes/modern/",
  "../node_modules/[email protected]/plugins/link/",
  "../node_modules/[email protected]/plugins/paste/",
  "../node_modules/[email protected]/plugins/table/"
 ],

2.3 Defining variables

In the project

Statement tinymce

variable, otherwise it will prompt tinymce to be found

Declare var tinymce: any;

2.4 Copy the skin file to the asset directory

Linux and MacOS

cp -r node_modules / tinymce / skins src / assets / skins

2.5 Installation Chinese support

The Chinese language pack can be downloaded from this address:

https：///downl ...

There will be a langs directory in the downloaded compressed file, which contains zh_CN.js. Copy this directory to the src/assets directory, and then add a reference (.) in the upper and lower parts:

“ scripts”：[

"../node_modules/[email protected]/",
 "../node_modules/[email protected]/themes/modern/",
 "../node_modules/[email protected]/plugins/link/",
 "../node_modules/[email protected]/plugins/paste/",
 "../node_modules/[email protected]/plugins/table/",
 "../src/assets/langs/zh_CN.js"Copy the code
]，

3. Create TinyMCE Components

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: './',
 styleUrls: ['./']
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
 @Input() elementId: String;
 @Output() onEditorContentChange = new EventEmitter();

 editor;

 constructor() { }

 ngAfterViewInit() {
  let self = this;
  ({
   selector: '#' + ,
   height: 600,
   plugins: ['link', 'table', 'image'],
   skin_url: 'assets/skins/lightgray',
   setup: editor => {
     = editor;
    ('keyup change', () => {
     const content = ();
     (content);
    });
   }
  });
 }

 ngOnDestroy() {
  ();
 }

}

// 
<textarea >
</textarea>

4. Use custom TinyMCE components

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

5. Add image upload function

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

@Component({
 selector: 'tiny-editor',
 templateUrl: './',
 styleUrls: ['./']
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
 @Input() elementId: String;
 @Output() onEditorContentChange = new EventEmitter();
 editor;
 constructor(private http: HttpClient) { }
 ngAfterViewInit() {
  let self = this;
  ({
   selector: '#' + ,
   height: 600,
   plugins: ['link', 'table', 'image'],
   skin_url: 'assets/skins/lightgray',
   setup: editor =&gt; {
     = editor;
    ('keyup change', () =&gt; {
     const content = ();
     (content);
    });
   },
   // Picture upload function   images_upload_handler: function(blobInfo, success, failure) {
    var formData;
    formData = new FormData();
    (blobInfo);
    ("file", (), ());
    (formData);
    ('/index/player/upload', formData).subscribe( response =&gt; {
     let url = response['data']['imagePath'];
     success(url);
    });
   }
  });
 }
 // Upload pictures private uploadFile(url: string, formData: any) {
  var self = this;
  var headers = new HttpHeaders();
  ("Accept", "application/json");
  return (url, formData, { headers: headers });
 }

 ngOnDestroy() {
  ();
 }
}

6. Get and set editor content

&lt;tiny-editor 
 [elementId]="'defined-tinymce-editor'"
 (onEditorContentChange)="keyupHandler($event)"&gt;&lt;/tiny-editor&gt;Copy the code
// Listen to the onEditorKeyup eventprivate keyupHandler(event) {
 ('Editor's content:', event);
}

Summarize

This is the article about Angular5 integrating rich text editor TinyMCE (Chinese+upload) that ends with this article. For more related content related to Angular5 integrating rich text editor TinyMCE (Chinese+upload) please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!