Angular5整合富文本編輯器TinyMCE（漢化+上傳）

1. TinyMCE簡介

TinyMCE是一個輕量級的富文本編輯器，相對於CK編輯器更加精簡，但必須知足絕大部分場景的須要。

2.安裝和配置TinyMCE

• 2.1安裝TinyMCE

  npm install-保存tinymce

• 2.2設置tinymce局部訪問（.angular-cli.json）

  "scripts": [
       "../node_modules/_tinymce@4.7.4/tinymce.js",
       "../node_modules/_tinymce@4.7.4/themes/modern/theme.js",
       "../node_modules/_tinymce@4.7.4/plugins/link/plugin.js",
       "../node_modules/_tinymce@4.7.4/plugins/paste/plugin.js",
       "../node_modules/_tinymce@4.7.4/plugins/table/plugin.js"
   ],複製代碼

• 2.3定義變量

  在項目中的typing.d.ts中

  
  

  聲明tinymce

  變量，否則會提示發現tinymce

  聲明var tinymce：任何；

• 2.4拷貝皮膚文件到資產目錄下

  Linux和MacOS

  
  

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

• 2.5安裝中文支持

  中文語言包能夠從這個地址下載：

  https：//www.tinymce.com/downl ...

  下載下來的壓縮文件中會有一個langs目錄，裏面有zh_CN.js，把這個目錄複製到src / assets目錄下，而後在上下中添加引用（.angular-cli.json）：

  
  

  「 scripts」：[

  "../node_modules/_tinymce@4.7.4/tinymce.js",
     "../node_modules/_tinymce@4.7.4/themes/modern/theme.js",
     "../node_modules/_tinymce@4.7.4/plugins/link/plugin.js",
     "../node_modules/_tinymce@4.7.4/plugins/paste/plugin.js",
     "../node_modules/_tinymce@4.7.4/plugins/table/plugin.js",
     "../src/assets/langs/zh_CN.js"複製代碼

  ]，

3.建立TinyMCE組件

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: '#' + 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);
    }

}複製代碼

// tiny-editor.component.html
<textarea id="{{elementId}}"></textarea>複製代碼

4.使用自定義TinyMCE組件

<tiny-editor [elementId]="'defined-tinymce-editor'"></tiny-editor>複製代碼

5.增長圖片上傳功能

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: '#' + 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);
    }

}
複製代碼

6.獲取和設置編輯器內容

<tiny-editor 
    [elementId]="'defined-tinymce-editor'"
    (onEditorContentChange)="keyupHandler($event)"></tiny-editor>複製代碼

// 監聽onEditorKeyup事件
private keyupHandler(event) {
    console.log('編輯器的內容：', event);
}複製代碼