如何将Angular5集成汉化并自定义上传功能的TinyMCE富文本编辑器？

本文共计463个文字，预计阅读时间需要2分钟。

1. TinyMCE 简介TinyMCE 是一个轻量级的富文本编辑器，相较于 CK 编辑器更加简洁，但能满足绝大多数场景的需求。

2. 安装和配置 TinyMCE

2.1 安装 TinyMCE

使用 npm 安装 TinyMCE：`npm install tinymce`

2.2 配置 TinyMCE设置 TinyMCE 的局部访问权限：`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安装中文支持

中文语言包可以从这个地址下载：

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

总结

到此这篇关于Angular5整合富文本编辑器TinyMCE（汉化+上传）的文章就介绍到这了,更多相关Angular5整合富文本编辑器TinyMCE（汉化+上传）内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！