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.總結。這是最基本的繼承方式,引用音頻等媒體請查看官網,引入插件以及相應方法即可。