CK Editor and Angular js

CK EDITOR AND ANGULAR JS

Easy 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="http://ckeditor.com/apps/ckeditor/4.2/ckeditor.js"></script>        
<script src="~/app/module.js"></script>

Note : script must be refer from http://ckeditor.com/apps/ckeditor/4.2/ckeditor.js

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.setData(ngModel.$viewValue);
            });

            ck.on('pasteState', function () {
                $scope.$apply(function () {
                    ngModel.$setViewValue(ck.getData());
                });
            });

            ngModel.$render = function (value) {
                ck.setData(ngModel.$modelValue);
            };
        }
    };
}]);

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