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 //创建组件

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 {
}

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.页面引用(不要忘了在引用界面的模块中引用富文本的模块)

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

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