How to integrate TinyMCE rich text editor in angular application

By Ankur Hack | Views: 1849

TinyMCE is a rich-text editor that will allow you to create formatted content through your application. It will allow you to create more attractive content by using its large set of plugins. The output generated by TinyMCE is in HTML5 and can includes list, table, images and other useful elements, depend on the configuration of the editor.

TinyMCE is completely free of cost and very easy to integrate in an application. It has premium plugin also.

To integrate TinyMCE in an angular application follow the below steps:

1)  Install tinymce and tinymce-angular packages using the below command.

npm install --save tinymce @tinymce/tinymce-angular

2)  Import EditorModule and TINYMCE_SCRIPT_SRC from ‘@tinymce/tinymce-angular’ in app.module.ts and register in imports and providers like below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { EditorModule, TINYMCE_SCRIPT_SRC  } from '@tinymce/tinymce-angular'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    EditorModule,
    FormsModule
  ],
  providers: [
    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3)  Add the below code to the assets property in angular.json file like shown in image1:

"assets": [
  { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/"}
]

Image1:

4)  Add the tinymce.min.js file reference in angular.json file like shown in image2

"scripts": [
  "node_modules/tinymce/tinymce.min.js"
]

Image2:

After following above four steps tinymce is ready to use. Now open app.component.ts file and add configuration variable for the editor like below:

editorConfig = {
        base_url: '/tinymce',
        suffix: '.min',
        plugins: 'lists link image table wordcount'
    };

And in app.component.html file add the below code:

<editor [init]="editorConfig"></editor>

After adding all the code run the angular application by using ng serve -o command and once the application build succeed it will show you the below output.

Thank you for your feedback!