tinymce editor is paid editor to use in our application. tinymce has many toolbar, plugins, and events to use in our application. today we add in our angular app.
Setup and installation
import { NgModule } from '@angular/core';
import 'tinymce';
import 'tinymce/themes/modern';
import 'tinymce/plugins/table';
import 'tinymce/plugins/link';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { EditorModule } from '@tinymce/tinymce-angular';
import { TinyEditorComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule, EditorModule ],
declarations: [ TinyEditorComponent ],
providers: [],
bootstrap: [ TinyEditorComponent ]
})
export class AppModule { }
Setup editor configuration
import {
Component,
AfterViewInit,
EventEmitter,
OnDestroy,
Input,
Output,
} from '@angular/core';
declare var tinymce: any;
@Component({
selector: 'tinymce-editor',
template: `<textarea id="editor"></textarea>`,
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
@Output() onEditorContentChange = new EventEmitter();
editor;
ngAfterViewInit() {
tinymce.init({
selector: '#editor',
plugins: ['link', 'table'],
skin_url: 'assets/skins/lightgray',
setup: (editor) => {
this.editor = editor;
editor.on('keyup change', () => {
const content = editor.getContent();
this.onEditorContentChange.emit(content);
});
},
});
}
ngOnDestroy() {
tinymce.remove(this.editor);
}
Add editor event
ngAfterViewInit() {
tinymce.init({
selector: '#local-upload',
plugins: 'image code',
toolbar: 'undo redo | image code',
/* we override default upload handler to simulate successful upload*/
images_upload_handler: function (blobInfo, success, failure) {
setTimeout(function () {
/* no matter what you upload, we will turn it into TinyMCE logo :)*/
success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
}, 2000);
},
});
}
Top comments (0)