angular 6 中使用 tinymce

本地使用

添加：yarn add tinymce

html 中使用

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

typescript 中使用

 1 import 'tinymce';
 2 import 'tinymce/themes/modern';
 3 
 4 import 'tinymce/plugins/table';
 5 import 'tinymce/plugins/link';
 6 import 'tinymce/plugins/textcolor';
 7 import 'tinymce/plugins/print';
 8 import 'tinymce/plugins/preview';
 9 
10 declare var tinymce: any;
11 
12 export class className implements OnInit, OnDestroy {
13 　　tinymce.init({  // 初始化富文本
14         selector: '#editor',
15         plugins: ['link', 'table', 'textcolor print preview'],
16         skin_url: '/assets/tinymce/skins/lightgray',
17         toolbar: `insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify
18             | bullist numlist outdent indent | link | print preview fullpage | forecolor backcolor`,
19         setup: editor => {
20             this.editor = editor;
21             editor.on('keyup change', () => {
22                 const content = editor.getContent();
23                 this.editorContentChange.emit(content);
24             });
25         }
26     });
27     tinymce.remove(this.editor);  // 销毁富文本
28 }

在线使用

添加：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 }