ng.ckeditor

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. Enhance your website experience with our community maintained editor.

by Vipin Goyal

HTML

<script src="//cdn.ckeditor.com/4.4.6/standard/ckeditor.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//miamarti.github.io/ng.ckeditor/assets/ng-ckeditor-1.0.1.min.js"></script>
<div ng-app="example">
    <div ng-controller="controller">
      |{{htmlEditor}}|
      <input type="button" value="Disable" ng-click="editorDIsabled=true">
      <input type="button" value="Enable" ng-click="editorDIsabled=false">
      <hr>
      <ng-ckeditor ng-model="htmlEditor" ng-disabled="editorDIsabled" skin="moono" remove-buttons="Image" remove-plugins="iframe,flash,smiley" msn-count="
Number of typed characters:"></ng-ckeditor>
    </div>
</div>

JavaScript

(function (window, document) {
    "use strict";
    (angular.module('ng.ckeditor', ['ng']))
    .directive('ngCkeditor', function () {
    
        CKEDITOR.on('instanceCreated', function (event) {
            var editor = event.editor,
            element = editor.element;
            
            if (element.getAttribute('class') == 'simpleEditor') {
                editor.on('configLoaded', function () {
                    editor.config.removePlugins = 'colorbutton,find,flash,font, forms,iframe,image,newpage,removeformat, smiley,specialchar,stylescombo,templates';
                    editor.removeButtons = 'About';
                    editor.config.toolbarGroups = [{
                        name: 'editing',
                        groups: ['basicstyles', 'links']
                    }, {
                        name: 'undo'
                    }, {
                        name: 'clipboard',
                        groups: ['selection', 'clipboard']
                    }];
                });
            }
        });
    
        return {
            restrict: 'E',
            scope: {
              ngModel: '=ngModel',
              ngChange: '=ngChange',
              ngDisabled: '=ngDisabled',
              ngConfig: '=ngConfig'
            },
            link: function (scope, elem, attrs) {
            	elem[0].innerHTML = '<div class="ng-ckeditor"></div> <div class="totalTypedCharacters"></div>';
              
            	var elemEditor = elem[0].querySelectorAll('.ng-ckeditor');
              var config = {
                removeButtons: (attrs.removeButtons != undefined) ? 'About,' + attrs.removeButtons : 'About',
                readOnly: scope.ngDisabled ? scope.ngDisabled : false
              };
              if (attrs.removePlugins != undefined) {
                config.removePlugins = attrs.removePlugins;
              }
              if (attrs.skin != undefined) {
                config.skin = attrs.skin;
              }
              if...