TinyMCE 4 + Angular + PramukhIME Integration: Type in 23 Indian Languages in TinyMCE 4

Do you have Angular app with TinyMCE 4? Do you want to allow your users to type in 23 Indian languages? This is a quick guide for it.

Setup TinyMCE 4 Angular Integration

Most of the steps are already given at https://www.tiny.cloud/docs/integrations/angular/ so I am borrowing the same steps for quick reference.

Following 3 commands will create a new Angular application, changes the current working directory, and adds TinyMCE to your Angular application.

ng new --defaults --skip-git tinymce-angular-demo
cd tinymce-angular-demo
npm install --save @tinymce/tinymce-angular

Open the /path/to/tinymce-angular-demo/src/app/app.module.ts and replace the contents with:

import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { EditorModule } from '@tinymce/tinymce-angular';
 import { AppComponent } from './app.component';

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     EditorModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

Using a text editor, open /path/to/tinymce-angular-demo/src/app/app.component.html and replace the contents with:

<h1>TinyMCE 4 Angular Demo</h1>
 <editor
   cloudChannel="4-stable"
   [init]="{
     height: 500,
     menubar: false,
     plugins: [
       'advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table paste code help wordcount'
     ],
     toolbar:
       'undo redo | formatselect | bold italic backcolor | \
       alignleft aligncenter alignright alignjustify | \
       bullist numlist outdent indent | removeformat | help'
   }"
 ></editor>

Test the application using following command:

ng serve --open

Setup PramukhIME TinyMCE Plugin Integration

Once you download the plugin, unzip the plugin so that the plugin path is /path/to/tinymce-angular-demo/src/assets/pramukhime/plugin.min.js

Using a text editor, open /path/to/tinymce-angular-demo/src/app/app.component.html and replace the contents with:

 <h1>TinyMCE 4 Angular Demo</h1>
 <editor
	cloudChannel="4-stable"
   [init]="{
     height: 500,
     menubar: false,
     plugins: [
       'advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table paste code help wordcount',
     ],
	 external_plugins: {'pramukhime': '/assets/pramukhime/plugin.min.js'},
     toolbar:
		'pramukhime pramukhimehelp pramukhimesettings | \
       undo redo | formatselect | bold italic backcolor | \
       alignleft aligncenter alignright alignjustify | \
       bullist numlist outdent indent | removeformat | help'
   }"
 ></editor>

That’s it. Now you can see a first dropdown in TinyMCE which contains a list of Indian languages. Select the language and start typing in your favourite Indian language.

Demo

Click on the following button to download TinyMCE 4 Angular example.

Download TinyMCE 4 Angular Example

Once you download it, use the following commands to install necessary Angular dependency.

cd "/path/to/demo/folder"
npm install

Once you download PramukhIME TinyMCE Plugin zip file, unzip the plugin so that the plugin path is /path/to/tinymce-angular-demo/src/assets/pramukhime/plugin.min.js

Run the following command to run the application.

ng serve --open

You can see a first dropdown in TinyMCE which contains a list of Indian languages. Select the language and start typing in your favourite Indian language.