Html/css J query Javascript

CK Editor and Angular js


ckeditorEasy way to implement ck editor with angular js.

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It’s a WYSIWYG editor that brings common word processor features directly to your web pages.

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you currently have to write.


1. First add reference of ck editor

<script src=""></script>        
<script src="~/app/module.js"></script>

Note : script must be refer from

2. Create directive with module

myapp.directive('ckEditor', [function () {
    return {
        require: '?ngModel',
        link: function ($scope, elm, attr, ngModel) {

            var ck = CKEDITOR.replace(elm[0], {
                toolbar: [
                { name: 'basicstyles', groups: ['basicstyles', 'cleanup'], items: ['Bold', 'Italic', 'Underline'] },
                { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'], items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'] },
                { name: 'clipboard', groups: ['clipboard', 'undo'], items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] }
                height: '350px'

            if (!ngModel) return;

            ck.on('instanceReady', function () {

            ck.on('pasteState', function () {
                $scope.$apply(function () {

            ngModel.$render = function (value) {

3. set-up your text box at page

   <textarea ck-editor required name="editor" ng-model="modal.editor"></textarea>

Note : “ck-editor” must with element



Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.