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

Do you have React 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 React Integration

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

Following commands in the exact sequence will create sample react application

npm install -g create-react-app
create-react-app tinymce-react-demo
cd tinymce-react-demo
npm install --save @tinymce/tinymce-react

Using a text editor, open /path/to/tinymce-react-demo/src/App.js and replace the contents with:

 import React from 'react';
 import { Editor } from '@tinymce/tinymce-react';

 class App extends React.Component {
   handleEditorChange = (content, editor) => {
     console.log('Content was updated:', content);
   }

   render() {
     return (
       <Editor
         initialValue="<p>This is the initial content of the editor</p>"
         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'
         }}
         onEditorChange={this.handleEditorChange}
       />
     );
   }
 }

 export default App;

Test the application using following command

npm run start

At this moment you will see TinyMCE Editor. Now let’s integrate PramukhIME TinyMCE plugin so you can type in Indian languages within TinyMCE.

Setup PramukhIME TinyMCE Plugin Integration

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

Using a text editor, open /path/to/tinymce-react-demo/src/App.js and replace the contents with:

import './App.css';
import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

class App extends React.Component {
   handleEditorChange = (content, editor) => {
     console.log('Content was updated:', content);
   }

   render() {
     return (
       <Editor
         initialValue="<p>This is the initial content of the editor</p>"
		 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': '/pramukhime/plugin.js'},

           toolbar: 'pramukhime pramukhimehelp pramukhimesettings | \
			 undo redo | formatselect | bold italic backcolor | \
             alignleft aligncenter alignright alignjustify | \
             bullist numlist outdent indent | removeformat | help'
         }}
         onEditorChange={this.handleEditorChange}
       />
     );
   }
 }

 export default App;

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 React Demo

Once you download it, unzip the content into tinymce-react-demo folder and use the following commands to install necessary React dependency.

cd "/path/to/tinymce-react-demo/folder"
npm install

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

Run the following command to run the application.

npm run start

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.