angular8.5版本集成TinyMce5的使用

编写人：mkl

日期：2020.11.16

本篇主要讲解的是TinyMce的配置，原理不做讲解，请自行查阅文档TinyM

TinyMCE是什么/h1>

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

TinyMCE的优势：

• 开源可商用，基于LGPL2.1
• 插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）
• 接口丰富，可扩展性强，有能力可以无限拓展功能
• 界面好看，符合现代审美
• 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
• 对标准支持优秀（自v5开始）
• 多语言支持，官网可下载几十种语言。

高级插件需要收费，比如：格式刷、文件上传、导出pdf等功能，具体请查看官方文档；

官网及文档：www.tiny.cloud

官网及文档(中文)：http://tinymce.ax-z.cn/  此文档不全

Github：github.com/tinymce

快速开始

使用第三方类库 ngx-tinymce

1、git地址

https://github.com/cipchk/ngx-tinymce

2、安装部署

npm install –save-dev ngx-tinymce@7.0.0

3、初步配置

(1) TinyMCE的自托管发行版可下载，用于开发和生产软件包

baseURL：需要下载开发包，放到项目中，可自定义配置，如下图：

(2) 像富文本框你可能需要在所有子模块中都会可能会用到，因为建议在  模块中导入和导出他。

在根模块app.module.ts配置：

4、详细配置

(1) Html模板文件test.component.html中添加配置：

<tinymce [(ngModel)]=”html” [config]=”initConfig”></tinymce>

(2) test.component.ts添加配置：

引入：import { NgxTinymceModule } from ‘ngx-tinymce’;

声明配置变量：public initConfig: any;

来源：mkl-001