在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>

应该已经可以看到我们实现的富文本编辑器了
在ng-alain项目中使用富文本组件ngx-tinymce(包括汉化+图片上传)_第1张图片

第四步:可能出现报错

但是也有可能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代码
    

//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('上传失败:未知错误');
        }
      }
    });
  }
};

在ng-alain项目中使用富文本组件ngx-tinymce(包括汉化+图片上传)_第2张图片

你可能感兴趣的:(在ng-alain项目中使用富文本组件ngx-tinymce(包括汉化+图片上传))