在ng-alain项目中使用富文本组件ngx-tinymce（包括汉化+图片上传）

参考文档：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.php
          branding: 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('上传失败：未知错误');
        }
      }
    });
  }
};