angular 6 中使用 tinymce

本地使用

添加：yarn add tinymce

将 node_modules/tinymce/skins 复制到资源文件下，我的是 assets

html 中使用

<textarea formControlName="descEditor" class="editor" ></textarea>

typescript 中使用

 1 import { Output, EventEmitter } from '@angular/core';
 2 import 'tinymce';
 3 import 'tinymce/themes/modern';
 4 
 5 import 'tinymce/plugins/table';
 6 import 'tinymce/plugins/link';
 7 import 'tinymce/plugins/textcolor';
 8 import 'tinymce/plugins/print';
 9 import 'tinymce/plugins/preview';
10 
11 declare var tinymce: any;
12 
13 export class className implements OnInit, OnDestroy {
14     @Output() editorContentChange = new EventEmitter();
15     public editor;
16 　　const self = this;
17     ngOnInit() {
18         tinymce.init({
19             selector: '#editor',
20             plugins: ['link', 'image', 'table', 'textcolor print preview'],
21             skin_url: '/assets/tinymce/skins/lightgray',
22             automatic_uploads: true,
23             images_upload_url: `${this.global.apiDomain}/uploads`,
24             images_reuse_filename: true,
25             toolbar: `insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify
26                         | bullist numlist outdent indent | link image | print preview fullpage | forecolor backcolor`,
27             images_upload_handler: function (blobInfo, success, failure) {
28                 let xhr;
29                 let formData;
30                 xhr = new XMLHttpRequest();
31                 xhr.withCredentials = false;
32                 xhr.open('POST', `${self.global.apiDomain}/uploads`);
33                 xhr.setRequestHeader('Authorization', `Bearer ${self.access_token}`);
34                 xhr.onload = function () {
35                     let json;
36                     if (xhr.status !== 200) {
37                         failure('HTTP Error: ' + xhr.status);
38                         return;
39                     }
40                     json = JSON.parse(xhr.responseText);
41                     if (!json || typeof json.msg !== 'string') {
42                         failure('Invalid JSON: ' + xhr.responseText);
43                         return;
44                     }
45                     success(json.msg);
46                 };
47                 formData = new FormData();
48                 formData.append('folder', 'news');
49                 formData.append('file', blobInfo.blob(), blobInfo.filename());
50                 xhr.send(formData);
51             },
52             setup: editor => {
53                 this.editor = editor;
54                 editor.on('keyup change', () => {
55                     const content = editor.getContent();
56                     this.editorContentChange.emit(content);
57                 });
58             }
59         });
60     }
61     ngOnDestroy() {
62         tinymce.remove(this.editor);  // 销毁富文本
63     }
64 }

在线使用

添加：yarn add @tinymce/tinymce-angular

html 中使用

<editor formControlName="remark" [init]="initTiny" apiKey="tcg6l9almi9wf9bxzvgwvkka25uki0wjjgvesb73ln53xery" class="editor"
                cloudChannel="stable"></editor> -->

typescript 中使用

shared 模块中引入

import { EditorModule } from '@tinymce/tinymce-angular';
@NgModule({
    exports: [
       EditorModule,
    ],
})

某个组件中使用

 1 export class className implements OnInit, OnDestroy {
 2     public initTiny: any;
 3     this.initTiny = {
 4         plugins: ['link', 'image', 'table', 'textcolor emoticons print preview media'],
 5         height: 200,
 6         automatic_uploads: true,
 7         images_upload_url: `${this.global.apiDomain}/uploads`,
 8         images_reuse_filename: true,
 9         toolbar: `insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify
10             | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons`,
11         images_upload_handler: function (blobInfo, success, failure) {
12             let xhr;
13             let formData;
14             xhr = new XMLHttpRequest();
15             xhr.withCredentials = false;
16             xhr.open('POST', `${self.global.apiDomain}/uploads`);
17             xhr.setRequestHeader('Authorization', `Bearer ${self.access_token}`);
18             xhr.onload = function () {
19                 let json;
20                 if (xhr.status !== 200) {
21                     failure('HTTP Error: ' + xhr.status);
22                     return;
23                 }
24                 json = JSON.parse(xhr.responseText);
25                 if (!json || typeof json.msg !== 'string') {
26                     failure('Invalid JSON: ' + xhr.responseText);
27                     return;
28                 }
29                 success(json.msg);
30             };
31             formData = new FormData();
32             formData.append('folder', 'news');
33             formData.append('file', blobInfo.blob(), blobInfo.filename());
34             xhr.send(formData);
35         }
36     };
37 }