WYSIWYG Rich Text Editor Using AngularJS

HTML does not give use many options when it comes to good quality writing experience, sure HTML has text area but it lacks many functionalities that a modern rich text editor should have, to overcome this problem we are going to use Ckeditor which is great web based WYSIWYG rich text editor, you can use it without AngularJS but if you are using AngularJS in your project then using Ckeditor is dead simple, this simple tutorial will show you how to add text editor in you page using AngularJS as well as get and set data in editor using model.

Directory Sturcture

project_root/
|    js/
|    |  Bower_components/
|    |  |  angular/
|    |  |  angular-ckeditor/
|    |  |  ckeditor/ 
|    |  editor.js
|    index.html
|

Install Dependencies

We need three dependencies to get started -  AngularJS, Ckeditor and angular-ckeditor directive by lemonde, we are going to use Bower to get them.

Open you terminal and Navigate to js folder of you project root folder, make sure you have bower installed.

AngularJS

bower install angular

Ckeditor

bower install ckeditor

Angular Ckeditor

bower install angular-ckeditor

Working with HTML ( Index.html )

First We need to add our dependencies in correct order in our page, make sure you have this order -

  • angular -js/bower_components/angular/angular.min.js
  • ckeditor - js/bower_components/ckeditor/ckeditor.js
  • angular-ckeditor - js/bower_components/angular-ckeditor/angular-ckeditor.min.js

Now Let's Create a Controller which will handle our ckeditor directive, We will call it CkeditorController.

We are going to create a button which will be used to get text editor data in it's html form and we are going to log it in  browser console.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>CKEditor Example</title>
	<script type="text/javascript" src="js/bower_components/angular/angular.min.js"></script>
	<script type="text/javascript" src="js/bower_components/ckeditor/ckeditor.js"></script>
	<script type="text/javascript" src="js/bower_components/angular-ckeditor/angular-ckeditor.min.js"></script>
</head>
<body>
	
	<div ng-controller="CkeditorController">
		<div ckeditor="options" ng-model="textdata" ready="onReady"></div>
		<br>		
		<button ng-click="getTextData()">Get Data</button>
	</div>
	
	<script type="text/javascript" src="js/editor.js"></script>
</body>
</html>

Working with Javascript ( editor.js )

This file will contain our AngularJS bootstrap code as well as code for CkeditorController which will be responsible for initializing ckeditor and set options.

angular.module('app', ['ckeditor'])
.controller('CkeditorController', function ($scope) {

  $scope.textdata = '';
  // you can set your configuration here 
  $scope.options = {
    language: 'en',
    allowedContent: true,
    entities: false
  };

  $scope.onReady = function () {
    //write you code here if you have to do something after editor is loaded    
  };
  
  // logging ckeditor textarea content in console
  $scope.getTextData = function() {
    console.log($scope.textdata);
  }
});

That's it folks, it's that simple, if you are wondering how to add, remove toolbars in your ckeditor, check ckeditor documentation to learn how to add custom toolbar or ask us in forum. IF you have some trouble and stuck somewhere please tell us in comment section or ask question in our forum. 

Something to say? Tell us in comment section.