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); }