DEV Community

Cover image for TINYMCE Editor with angular
Deepak Jaiswal
Deepak Jaiswal

Posted on

5 1 1 1 2

TINYMCE Editor with angular

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


Enter fullscreen mode Exit fullscreen mode

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);
  }
Enter fullscreen mode Exit fullscreen mode

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);
      },
    });
  }
Enter fullscreen mode Exit fullscreen mode

Hide toolabr & menubar

Add domain in tinymce cloud

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay