Toolbar config doesn't work with inline CKEditor

Question

I try to apply a very simple toolbar config to an inline CKEditor. The goal is to only show a Bold button, but it doesn't work. Why?

CKEDITOR.inline(el.get(0),
{
  toolbar:
  [
     { name: 'basicstyles', items: [ 'Bold' ] }
  ]  
});

https://jsfiddle.net/adrianrosca/q6x6s6ga/

Answer 1

I've forked and updated your fiddle: https://jsfiddle.net/Comandeer/q6x6s6ga/30/

$( function() {
    var el = $( '#editor1' );
    el.attr( 'contenteditable', true );

    CKEDITOR.inline( el.get( 0 ),
    {
        toolbar: [ [ 'Bold' ] ]
    } );
} );

There were two problems with your code:

1. You did not take into account fact that CKEditor automatically converts all [contenteditable=true] elements into its instances and you must disable it first. Therefore it's easier to add [contenteditable] right in your JS code and then create an inline editor.
2. Your syntax for the toolbar was wrong. The configuration option takes array or string as a parameter – not object.

Edit: version with CKEDITOR.disableAutoInline https://jsfiddle.net/Comandeer/q6x6s6ga/31/

The problem was in waiting for onload event. If you just put that code on the end of body, everything is working fine.

Answer 2

You can solve updating the CKEDITOR source, i.e.

http://cdn.ckeditor.com/4.5.7/standard/ckeditor.js

And editing your code as follows:

$(function()
 {
     var el = $("div");
     CKEDITOR.disableAutoInline = true;

  for (var inst in CKEDITOR.instances) {
     CKEDITOR.instances[inst].destroy();
   }

  CKEDITOR.inline(el.get(0),
  {
    toolbar:
    [
        { name: 'basicstyles', items: [ 'Bold' ] }
    ]  
  });
});