Make It Easy: Integration of CK-Editor to UI

Here I am going to explain how to integrate CK-Editor to UI , set the data to editor and how to remove some controls from CK-Editor. Minimum files required to integrate CK-Editor are CK-Editor.js, config.js, lang, plugins ( you can remove or add the plugin for your choice .For example smiley, special character, table etc.), skins, style.js .

You can download CK-Editor from here .

Controller

 
//Initialize the Editor
initEditor();

//Replace the <textarea id="editor1"> with an CKEditor instance.  
function initEditor()
{
CKEDITOR.replace( 'editor1', {

pluginsLoaded: function( evt ) 
{
 var doc = CKEDITOR.document, ed = evt.editor;
 if ( !ed.getCommand( 'bold' ) )
  doc.getById( 'exec-bold' ).hide();
 if ( !ed.getCommand( 'link' ) )
  doc.getById( 'exec-link' ).hide();
 }
  }
 });
}

View

 
<textarea cols="100"  id="editor1" name="editor1" rows="50">

</textarea>

How to set data to CK-Editor

For dynamic data you can try this

 
 CKEDITOR.instances['editor1'].setData(data);

Copying data to mouse pointer

For adding data to mouse pointer you can try this

 
 CKEDITOR.instances['editor1'].insertHtml( data );

While working with CK-Editor you may face issues like :-
Not displaying the data until we resize the Editor or Browser .In that case you can try this

 
 CKEDITOR.instances['editor1'].setData(data);

 CKEDITOR.instances.editor1.resize();

How to get data from CK-Editor

For taking data from editor you can try this

 
 $scope.data = CKEDITOR.instances.editor1.getData();

Remove some controls from CK-Editor

For removing some controls , open config.js

 
CKEDITOR.editorConfig = function( config ) {

// Define changes to default configuration here. For example:

// config.language = 'fr';

// config.uiColor = '#AADC6E';

 config.height = '96%';

 config.marginTop = '10px';

 config.removePlugins = 'save,a11yhelp,forms,etc';

 config.removeButtons = 'Styles,Anchor,Templates' ;

 config.resize_enabled = false;

};

1. Save highchart as binary image

2. Communicate with controllers in angular js

3. Angular routing

4. Rating Stars using angular js Directive concept

5. Loop concept in angular js

6. Filtering concept in angular js