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

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay