Angular5 整合富文本编辑器TinyMCE（汉化+上传）

1. TinyMCE简介

TinyMCE是一个轻量级的富文本编辑器，相对于CKEditor更加精简，但足以满足绝大部分场景的需要。

2. 安装和配置TinyMCE

• 2.1 安装TinyMCE

  npm install --save 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
  declare var tinymce: any;

• 2.4 拷贝皮肤文件到assets目录下

  Linux and 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/plugins/table/plugin.js","../src/assets/langs/zh_CN.js"

  ],

3. 创建TinyMCE组件

ng g c 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,OnDestroy {
    @Input() elementId: String;
    @Output() onEditorContentChange = new EventEmitter();

    editor;

    constructor(private http: HttpClient) { }

    ngAfterViewInit() {
        let self = this;
        tinymce.init({
            selector: '#' + this.elementId,() => {
                    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);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!