angular集成tinymce

1.前言

    我使用的是angular的7.x版本,和之前的低版本集成方式有所区别。这里记录下基本的集成步骤.

2.集成步骤

2.1安装tinymac包

npm install tinymce --save

2.2在node_modules管理包文件夹下找到tinymce的包,将skins拷贝到项目的assets下 文件夹路径层次为src/assets/skins。src为文件源文件根目录(自定义目录/与node_modules同级)。

2.3创建模块

ng g m tiny-editor //创建模块
ng g c tiny-editor //创建组件

?

1 2 3 4 5 6 7 8 9 10 11 12 13

import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {TinyEditorComponent} from './tiny-editor.component';   @NgModule({     declarations: [TinyEditorComponent],     imports: [         CommonModule     ],     exports: [TinyEditorComponent] }) export class TinyEditorModule { }

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

import {     Component,     AfterViewInit,     EventEmitter,     OnDestroy,     Input,     Output } from '@angular/core';   import 'tinymce';   import 'tinymce/plugins/table'; import 'tinymce/plugins/link'; import 'tinymce/themes/silver/theme'; declare var tinymce: any;   @Component({     selector: 'app-tiny-editor',     template: `<textarea id="{{elementId}}"></textarea>` }) export class TinyEditorComponent implements AfterViewInit, OnDestroy {     @Input() elementId: String;     @Output() onEditorContentChange = new EventEmitter();     editor;       ngAfterViewInit() {         tinymce.init({             selector: '#' + this.elementId,       // id 属性绑定在父组件上             plugins: ['link', 'table'],             language: 'zh_CN',             content_css : '/assets/skins/content/default/content.css',             skin_url: '/assets/skins/ui/oxide',   // 这里是刚才移动的主题文件             theme: 'silver',             branding: false,             setup: editor => {                 this.editor = editor;                 editor.on('keyup change', () => {                     const content = editor.getContent();                     this.onEditorContentChange.emit(content);   // 通过keyup change事件将textarea 发送到父组件，可以自定义事件                 });             }         });     }       ngOnDestroy() {         tinymce.remove(this.editor);        // 组件移除时销毁编辑器     } }

3.页面引用(不要忘了在引用界面的模块中引用富文本的模块)

?

1 2 3 4

<app-tiny-editor      [elementId]="'my-editor'"      (onEditorContentChange)="keyupHandler($event)"> </app-tiny-editor>

4.总结。这是最基本的继承方式,引用音频等媒体请查看官网,引入插件以及相应方法即可。