TinyMCETinyMCE是一個(gè)輕量級(jí)的富文本編輯器，相對(duì)于CKEditor更加精簡(jiǎn)，但足以滿足絕大部分場(chǎng)景的需要。目前網(wǎng)上關(guān)于Angular整合TinceMCE的文章不少，但講述得不是很清晰，經(jīng)過一番折騰，小編總算比較完美地將它整合到Angular項(xiàng)目中。

一、安裝TinyMCE

官方網(wǎng)站上有比較完整的angular+tinymce安裝指引，所以這部分我就比較快速帶過。

地址在這里：https://www.tinymce.com/docs/integrations/angular2/Angular2 Integration

1、新建一個(gè)angular項(xiàng)目

ng new angular-tinymce

cd angular-tinymce

2、安裝tinymce

npm install --save tinymce

3、設(shè)置tinymce全局訪問

與安裝一般的npm包不同，tinymce需要設(shè)置全局訪問之后才能夠使用，也就是要在項(xiàng)目的.angular-cli.json文件中添加以下內(nèi)容：

"scripts": [

"../node_modules/tinymce/tinymce.js",

"../node_modules/tinymce/themes/modern/theme.js",

"../node_modules/tinymce/plugins/link/plugin.js",

"../node_modules/tinymce/plugins/paste/plugin.js",

"../node_modules/tinymce/plugins/table/plugin.js"

],

在這里添加的js當(dāng)中，主要有3塊，第一行是tinymce核心文件，第二行是主題風(fēng)格。tinymce默認(rèn)提供了三套主題，分別是modern、mobile、inlite，可以在.\node_modules\tinymce\themes目錄中找到。接下來的幾行是你要使用的插件。tinymce是高度可定制的，你只需要在這里簡(jiǎn)單引用一下要使用的插件，編輯器界面就會(huì)自動(dòng)作出相應(yīng)的調(diào)整。

上圖中我們?cè)诠俜轿臋n的基礎(chǔ)上增加了image和imagetools兩個(gè)插件，用于插入圖片及圖片上傳。

4、定義全局變量

你還需要在項(xiàng)目中的.\src\typing.d.ts中聲明tinymce全局變量，不然會(huì)提示找不到tinymce

declare var tinymce: any;

5、拷貝皮膚文件到assets目錄下

tinymce的主題（theme）跟皮膚（skin）是相互分離的，皮膚主要是字體、圖標(biāo)、css等一些內(nèi)容。我們需要將相關(guān)文件拷貝到項(xiàng)目中的assets目錄下。也就是將.\node_modules\tinymce中的skins目錄整個(gè)拷貝到.\src\assets目錄下。

6、安裝中文支持

tinymce默認(rèn)是英文界面，如果要使用中文，我們需要先下載中文語(yǔ)言包，然后將其路徑加入到上面的全局配置當(dāng)中。

中文語(yǔ)言包可以從這個(gè)地址下載：https://www.tinymce.com/download/language-packages/

選擇Chinese(China）

下載下來的壓縮文件中會(huì)有一個(gè)langs目錄，里面有zh_CN.js，我們可以把這個(gè)目錄拷貝到.\src\assets目錄下，然后在全局中添加引用：

二、嘗試使用tinymce

完成上述步驟后，我們就可以在頁(yè)面中使用tinymce了。由于編輯器可能在多處使用，所以我們單獨(dú)建立一個(gè)component來放置編輯器

ng g c myeditor

參照官方文檔指引，我們將myeditor.component.ts文件改成如下內(nèi)容：

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

@Component({ selector: 'simple-tiny', template: `` })

export class MyeditorComponent implements AfterViewInit, OnDestroy {

@Input() elementId: String;

@Output() onEditorKeyup = new EventEmitter();

editor;

ngAfterViewInit() {

tinymce.init({

????????selector: '#' + this.elementId,

????????plugins: ['link', 'paste', 'table','image'],

????????skin_url: 'assets/skins/lightgray',

????????setup: editor => {

????????????this.editor = editor; editor.on('keyup', () => {

????????????????const content = editor.getContent();

????????????????this.onEditorKeyup.emit(content); });

????????},

????});

}

ngOnDestroy() {

????tinymce.remove(this.editor);

}

}