angular + Tinymce 富文本编辑器

一.引言
有时用户填写内容时既能上传图片，文件，还对内容有格式上的美化，此时就需要使用富文本编辑器。

二. 安装并配置Tinymce
1安装软件包

 $ npm install --save @tinymce/tinymce-angular

2在angular.json文件中做下配置引入相应文件

 "assets": [
   { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
 ]

如果未配置，会导致项目启动后看不见效果。
未配置：
配置后：
添加脚本

  "scripts": [
    "node_modules/tinymce/tinymce.min.js"
  ]

3使用
使用方法一 tinymce-angular把tinymce分装成angular的一个组件,安装引入后,添加一个editor标签就能直接使用。

使用方法二 将editor单独写成一个模块
editor.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {EditorComponent} from './editor.component';
import {EditorModule as TinyEditorModule, TINYMCE_SCRIPT_SRC} from '@tinymce/tinymce-angular';
import {ReactiveFormsModule} from '@angular/forms';


@NgModule({
  declarations: [
    EditorComponent
  ],
  imports: [
    CommonModule,
    TinyEditorModule,  // <--导入
    ReactiveFormsModule
  ],
  providers: [
    {provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js'}
  ],
  exports: [
    EditorComponent
  ]
})
export class EditorModule {
}

<editor
  [init]="init"
  [formControl]="formControl"
></editor>

[] & {{}}都用于给属性绑定值
Angular 官方文档在绑定属性几乎都是使用[]，而插值表达式{{}}更多是用于显示，两者最大的区别就是后者会将{{}}语句里执行完的值再转换string 类型。

(onInit)="onEditorInit($event)"，在初始化页面后自动调用的方法。

init: Record<string, any>;

this.init = {
      base_url: '/tinymce',
      // 后缀
      suffix: '.min',
      height: '500px',
      contextmenu: true,
      relative_urls: false,
      // 隐藏最上方菜单栏
      menubar: false,
      language: 'zh_CN',
      // 插件
      plugins: [ ],
      //工具栏
      toolbar: 
        `undo redo | formatselect | bold italic | ` +
        'alignleft aligncenter alignright alignjustify  | ' +
        'bullist numlist outdent indent | removeformat | help',
      // 允许拖拽图片
      paste_data_images: true, 
      // 拼写检查
      browser_spellcheck: true, 
      // 去水印
      branding: false, 
    };

toolbar: 可以使用“|”给工具栏分组，把某一类功能划分成一组

官方文档：https://www.tiny.cloud/docs/