官方文档：
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
- 安装
Angular 9+:
npm install @tinymce/tinymce-angular@^4.0.0
Angular 5 - Angular 8:
npm install @tinymce/tinymce-angular@^3.0.0 - 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
<editor id=editorID [init]="editorConfig" [(ngModel)]="editorContent"></editor>
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);
}
}
