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

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

Setup CKEditor 4 React Integration

Following commands in the exact sequence will create sample react application

npm install -g create-react-app
create-react-app ckeditor-react-demo
cd ckeditor-react-demo
npm install ckeditor4-react

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

import React, { Component } from 'react';
import CKEditor from 'ckeditor4-react';

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 4 in React</h2>
                <CKEditor
                    data="<p>Jay Swaminarayan!</p>"
                />
            </div>
        );
    }
}

export default App;

Test the application using following command

npm run start

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

Setup PramukhIME CKEditor Plugin Integration

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

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

import React, { Component } from 'react';
import CKEditor from 'ckeditor4-react';

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 4 in React</h2>
                <CKEditor
                    data="<p>Jay Swaminarayan!</p>"
					config={ {
						extraPlugins: 'pramukhime',
						toolbarGroups: [
						  // Here name has no effect but groups has
						  { name: 'pramukhime', groups: ['pramukhime'] },
						  { name: 'basicstyles', groups: ['basicstyles', 'list', 'indent', 'align', 'links'] }
						]
					} }
					onNamespaceLoaded={ CKEDITOR => {
							CKEDITOR.plugins.addExternal( 'pramukhime', '/pramukhime/plugin.js' );
						}
					}
                />
            </div>
        );
    }
}

export default App;

That’s it. Now you can see a first dropdown in CKEditor 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 CKEditor 4 React example.

Download CKEditor 4 React Example

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

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

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

Run the following command to run the application

npm run start

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