参考文档：https://blog.csdn.net/z_robot/article/details/104983557#comments_12054948

ng-alain文档中使用第三方类库

除了 NG-ZORRO 基础组件以及 @delon 业务组件以外，有时我们还需要引用其他外部类库，以下将介绍如何使用富文本组件 ngx-tinymce：

安装依赖包

yarn add ngx-tinymce

注册

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

// #region third libs
import { NgxTinymceModule } from 'ngx-tinymce';
const THIRDMODULES = [ NgxTinymceModule ];
// #endregion

对于部分第三方组件，可能会需要一些配置项，建议在根模块中注册，例如：

import { NgxTinymceModule } from 'ngx-tinymce';
@NgModule({imports: [BrowserModule,NgxTinymceModule.forRoot({baseURL: '//cdn.bootcss.com/tinymce/4.7.13/'})]
})
export class AppModule { }

接下来你可以在任何子模块中使用 ngx-tinymce：

<tinymce [(ngModel)]="html"></tinymce>

ng-alain文档的介绍就上面这些，但是我实践后发现还不能直接实现我需要的功能，界面也不能展示出这个富文本编辑器。如果你做了上述官网中描述的操作能实现，那恭喜你，如果做完以上的操作发现不行的话，我这里分享一下我的解决方式：

第一步，到官网下载tinymce，解压后将这个包复制到你的项目中的静态资源目录下（assets目录下）

下载地址：https://www.tiny.cloud/get-tiny/custom-builds/

第二步，在app.module.ts配置，配置了我们在第一步下载的tinymce在界面中的高度，使用的插件（丰富编辑器功能），使用的语言包（语言包在第三步讲）

@NgModule({declarations: [AppComponent],imports: [BrowserModule,NgxTinymceModule.forRoot({baseURL: './assets/tinymce/',  //写入第一步下载tinymce后复制到项目中的位置（路径）config: {height: 500,menubar: true, // 为true时会有顶部的工具栏toolbar_mode: 'wrap', // 工具不出现三个点下拉 sliding 滑动下拉plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount image textpattern help emoticons autosave autoresize',	//autoresize这个插件会使当文本过长时自动拉长富文本编辑器，使内容全部展示toolbar: 'code undo redo restoredraft | cut copy | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat |  table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen |  indent2em',language: 'zh_CN',language_url: './assets/tinymce/langs/zh_CN.js',//配置中文语言包，需要下载automatic_uploads: false, // 自动上传paste_data_images: true,//  statusbar:false,  // 隐藏底部 http://tinymce.ax-z.cn/configure/editor-appearance.phpbranding: false, // 隐藏右下角技术支持browser_spellcheck: true, // 拼写检查placeholder: '请输入内容',//      toolbar_location:'bottom', //位置底部/*初始化文字的方法init_instance_callback: function(editor) {editor.setContent('请输入');console.log(editor.content);},*/}}),

第三步：下载中文语言包，解压后将整个包直接复制到我们第二步生成的tinymce目录下（在第二步中的app.modeule.ts配置的代码中我有注释）

下载地址：https://www.tiny.cloud/get-tiny/language-packages/

这时候不出意外的话使用

<tinymce [(ngModel)]="html"></tinymce>

应该已经可以看到我们实现的富文本编辑器了

第四步：可能出现报错

但是也有可能IDEA会报错，我实现的时候，yarn add ngx-tinymce是下载了tinymce9.0.0的版本，需要typescript的版本在3.6.0以上，但是我使用的Angular Cli需要的是3.4.0到3.6.0之间，刚好冲突了，我试过升级typescript，没能解决问题，后面查询到升级了Angular cli还是不能解决问题，我就放弃了这个方案，选择降低tinymce依赖的版本。我在项目中的package.json这个文件中找到了**“ngx-tinymce”: “^9.0.0"这个依赖并将它手动改为"ngx-tinymce”: “^8.0.0"重新yarn安装发现没有8.0.0这个版本，不过他很智能地给我历史版本的选择，我选了距离9.0.0最新的"ngx-tinymce”: “^7.0.0”**，至此，问题解决。

功能扩展（图片上传）

//html代码<tinymce [(ngModel)]="docContent" [config]="editorConfig"></tinymce>//typescript代码
editorConfig = {height: 200,images_upload_url: `../static/images/upload`,//配置你图片上传的url// 图片上传功能images_upload_handler: (blobInfo, success, failure) => {let formData;formData = new FormData();// console.log(blobInfo);formData.append('file', blobInfo.blob(), blobInfo.filename());// console.log(formData);this.http.post(`/static/images/upload`, formData).subscribe(response => {// console.log('图片上传结果'把值存在RESPONSE里)console.log(response);if (response) {const url = response.data;//这里是你获取图片url，如果后端直接返回图片链接当然最好，不然的话需									要拼接出来你的图片的链接// 把图片链接，img src标签显示图片的有效链接放到下面回调函数里console.log(url);success(url);} else {if (response && response.rtnMsg) {failure(response.rtnMsg);} else {failure('上传失败：未知错误');}}});}
};