angular 6 中使用 tinymce
本地使用
添加：yarn add tinymce
将 node_modules/tinymce/skins 复制到资源文件下，我的是 assets
html 中使用
<textarea formControlName="descEditor" class="editor" id="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 }
