TinyMCE是一个轻量级的富文本编辑器，相对于CK编辑器更加精简，但必须满足绝大部分场景的需要。这篇文章主要介绍了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
4.使用自定义TinyMCE组件
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('/d/jc/2022091702/373962pcseuczhgwy 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.获取和设置编辑器内容
复制代码 // 监听onEditorKeyup事件 private keyupHandler(event) { console.log('编辑器的内容：', event); }
总结
以上就是Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)的详细内容，更多请关注易知道|edz.cc其它相关文章！
