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

Category: Developer Resource

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

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

ng new --defaults --skip-git ckeditor-angular-demo
cd ckeditor-angular-demo
npm install --save ckeditor4-angular

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from 'ckeditor4-angular';

import { AppComponent } from './app.component';

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

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

<h1>CKEditor 4 Angular Demo</h1>
<ckeditor data="<p>Jay Swaminarayan!</p>"></ckeditor>

Test the application using following command

ng serve --open

Setup PramukhIME CKEditor Plugin Integration

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

By default, CKEditor angular component loads CKEditor from CDN. Unfortunately it does not provide any event when the CKEditor Javascript library is loaded in DOM. (Reference: https://github.com/ckeditor/ckeditor4-angular/issues/142). As we don’t have a way to get notified when CKEditor is loaded, we must explicitly load CKEditor and immediately load external plugins.

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CkeditorAngularDemo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <!-- https://github.com/ckeditor/ckeditor4-angular/issues/142 add external plugin -->
  <script src="https://cdn.ckeditor.com/4.16.0/full/ckeditor.js"></script>
  <script>
    CKEDITOR.plugins.addExternal('pramukhime', '/assets/pramukhime/plugin.js');
  </script>
  <app-root></app-root>
</body>
</html>

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

<h1>CKEditor 4 Angular Demo</h1>
<ckeditor data="<p>Jay Swaminarayan!</p>" [config]="editorConfig"></ckeditor>

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  public editorConfig = {
    extraPlugins: 'pramukhime',
    toolbarGroups: [
      // Here name has no effect but groups has
      { name: 'pramukhime', groups: ['pramukhime'] },
      { name: 'basicstyles', groups: ['basicstyles', 'list', 'indent', 'align', 'links'] }
    ]
  }
  title = 'ckeditor-angular-demo';
}

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 Angular example.

Download CKEditor 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 CKEditor Plugin zip file, unzip the plugin so that the plugin path is /path/to/ckeditor-angular-demo/src/assets/pramukhime/plugin.js

Run the following command to run the application

ng serve --open

Share

0 comments

Your email address will not be published.