CODEWITHSUNDEEP
javascriptckeditor
Coder
Coder

Reputation: 3130

Ckeditor Inline Dynamically modifying the toolbar for contenteditable

I am using ckeditor inline for my contenteditable div.

The HTML looks like 

<div class="content" contenteditable="true">
  <p>Test</p>
  <p>Test</p>
</div>

I would like to change the buttons in toolbar on button click.I call following function to change the toolbar

function changeToolBar(){
  var myToolBar = [{ name: 'verticalCustomToolbar', groups: [ 'basicstyles'], items: [ 'Blockquote'] }];
 var config = {};
 config.toolbar = myToolBar;
 CKEDITOR.instances.editor1.destroy();//destroy the existing editor
 CKEDITOR.replace('content', config);       

}

This one does not seem to work.

JSFiddle http://jsfiddle.net/RKPYw/17/

Thanks in advance

Upvotes: 1

Views: 988

Answers (1)

Coder
Coder

Reputation: 3130

Fixed it by changing the code to following

function changeToolBar() {
 var myToolBar = [{ name: 'verticalCustomToolbar', groups: [ 'basicstyles'], items: [ 'Bold'] }];
 var config = {};
 config.toolbar = myToolBar;
 CKEDITOR.instances.test.destroy();//destroy the existing editor
 CKEDITOR.inline('test', config);      
}

The CKEditor.inline function expects the id of the element

JSFiddle here http://jsfiddle.net/RKPYw/18/

Upvotes: 1

Related Questions