angular 10 使用 tinymce 编辑器-zodream梦想开源/个人编程日记

使用 tinymce 提供的云编辑器

即真正的 tinymce 编辑器脚本都放到他们的服务器上，

但访问速度真的不行

使用方法

npm i @tinymce/tinymce-angular

然后在模块里加载

 import { EditorModule } from '@tinymce/tinymce-angular';
 import { AppComponent } from './app.component';

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     EditorModule // 这就是编辑器模块
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

123456789101112131415

在页面上使用，这里需要填上你在 www.tiny.cloud 上注册生成的 apiKey

 <editor
    apiKey="your-api-key"
   [init]="{
     height: 500,
     menubar: false,
     plugins: [
       'advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table paste code help wordcount'
     ],
     toolbar:
       'undo redo | formatselect | bold italic backcolor | \
       alignleft aligncenter alignright alignjustify | \
       bullist numlist outdent indent | removeformat | help'
   }"
 ></editor>

12345678910111213141516

本地打包

则需要安装 tinymce 编辑器本体

npm i tinymce

然后配置 angular.json 复制脚本文件，及引用脚本

 "assets": [
   { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
 ],
  "scripts": [
    "node_modules/tinymce/tinymce.min.js"
  ]

123456

在模块加载

  import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
  /* ... */
  @NgModule({
    /* ... */
    imports: [
      EditorModule
    ],
    providers: [
      { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
    ]
  })

1234567891011

使用

<editor [init]="{
    base_url: '/tinymce', // Root for resources
    suffix: '.min'        // Suffix to use when loading resources
  }"></editor>

1234

加载语言包

从官网下载语言包

复制 zh_CN.js 到 src/assets/tinymce/langs 目录下

然后再使用时加上配置

<editor [init]="{
    base_url: '/tinymce',
    suffix: '.min',
    language_url: '../../../../../assets/tinymce/langs/zh_CN.js',
    language: 'zh_CN',
  }"></editor>

123456

PS：这里的；路径为根目录，如果为二级目录backend，则需要修改为

base_url: '/backend/tinymce',
suffix: '.min',
language_url: '../../../../../backend/assets/tinymce/langs/zh_CN.js',
language: 'zh_CN',

1234

图片上传

更改使用时的配置，添加 imagetools 插件

{
    height: 500,
    base_url: '/backend/tinymce',
    suffix: '.min',
    language_url: '../../../../../backend/assets/tinymce/langs/zh_CN.js',
    language: 'zh_CN',
    plugins: [
      'advlist autolink lists link image imagetools charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
    ],
    toolbar:
       'undo redo | formatselect | bold italic backcolor | \
       alignleft aligncenter alignright alignjustify | \
       bullist numlist outdent indent | removeformat | help',
    image_caption: true,
    paste_data_images: true,
    imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
    images_upload_handler: (blobInfo, success: (url: string) => void, failure: (error: string) => void) => {
      const form = new FormData();
      form.append('file', blobInfo.blob(), blobInfo.filename());
      // 这里时是上传的具体方法
      this.httpClient.post<any>('upload/image', form).subscribe(res => {
        success(res.url);
      }, err => {
        failure(err.error.message);
      });
    },
}

1234567891011121314151617181920212223242526272829

images_upload_handler 为自定义上传方法，

这样就可以上传图片了

转载请保留原文链接： https://zodream.cn/blog/id/189.html