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-angularOpen 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 --openSetup 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 installOnce 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