tinymce editor

官方文档：
https://github.com/tinymce/tinymce
https://github.com/tinymce/tinymce-angular
https://www.tiny.cloud/docs/integrations/angular/
参考文档：
http://tinymce.ax-z.cn/slime.php

1. 安装
   Angular 9+:
   npm install @tinymce/tinymce-angular@^4.0.0
   Angular 5 - Angular 8:
   npm install @tinymce/tinymce-angular@^3.0.0
2. app.module.ts

import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { EditorModule } from '@tinymce/tinymce-angular';
 import { AppComponent } from './app.component';

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     EditorModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

3.html

4.ts

import { Component } from '@angular/core';
import tinymce from 'tinymce';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'tinymce-angular-upload';

  // 编辑器内容
  editorContent = '';

  // 编辑器配置
  editorConfig = {
    base_url: '/tinymce',
    height: 500,
    menubar: 'file edit insert view format table tools help',  // 一级菜单
    plugins: ['image paste media', 'pageembed code preview',],  // 指定需加载的插件 'quickbars':  快捷工具需配置
    toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment', // 取值：String / Array / false
    toolbar_location: '', // 工具栏位置
    language: 'zh_CN',
    language_url: '/tinymce/lang/zh_CN.js',
    automatic_uploads: false,
    images_upload_url: 'http://localhost:4200/',
    paste_data_images: true,
    readonly: false, // 只读模式
    mobile: { // 移动端配置 当tinymce检测到当前环境为移动设备时，该参数允许你配置在移动设备生效配置参数。
      plugins: [ 'autosave', 'lists', 'autolink' ],
      toolbar: [ 'undo', 'bold', 'italic', 'styleselect' ]
    },
    placeholder: 'test', // 初始化展示文本
    preview_styles: false, // 菜单预览样式 默认： font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow
    // quickbars_insert_toolbar: 'quickimage quicktable', // 插入快捷工具栏
    // quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote',  // 选择快捷工具栏
    resize: 'both', // 调整编辑器大小工具  可选值为：true（仅允许改变高度）, false（完全不让你动）, 'both'（宽高都能改变，注意引号）
    skin: 'oxide', // 主题 默认：oxide | oxide-dark
    statusbar: true, // 显示隐藏状态栏
    style_formats: [  // 自定义段落样式格式
      {title: 'Bold text', inline: 'b'},
      {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
      {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
      {title: 'Example 1', inline: 'span', classes: 'example1'},
      {title: 'Example 2', inline: 'span', classes: 'example2'},
      {title: '首行缩进', block: 'p', styles: {'text-indent': '2em'}},
      {title: 'Table styles'},
      {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
   ]

    
  };

  constructor(private http: HttpClient) { }

  postContent(): void {
    const editor = tinymce.get('editorID');
    console.log(editor);
    editor.uploadImages(success => {
      const url = 'http://localhost:4200/upload';
      console.log('调用了此回调函数');
      this.http.post(url, this.editorContent).subscribe(res => console.log(res));
    });
  }

  contentInfo(): void {
    console.log('编辑器的内容：', this.editorContent);
  }
}