I am currently trying to add an inline ckeditor to some text.

No javascript errors occour but unfortunately all tools are disabled and I can't edit the text.

/

Any one have a clue as to what I am doing wrong?

I am currently trying to add an inline ckeditor to some text.

No javascript errors occour but unfortunately all tools are disabled and I can't edit the text.

http://fiddle.jshell/5LuyD/

Any one have a clue as to what I am doing wrong?

• javascript
• ckeditor

6 Answers 6

What you're missing is contenteditable="true" attribute for your element. If you want to have the editor customized (i.e. ran via CKEDITOR.inline( element, cfg )), set CKEDITOR.disableAutoInline = true; first.

With CKEDITOR.disableAutoInline = true;, all the contenteditable="true" elements must be initialized manually to bee an editor instance. See the official guide for inline instances.

You missed the contenteditable="true" attribute for the tags that are editable!

Here is the fiddle. http://fiddle.jshell/5LuyD/1/

For anyone having this issue despite setting contenteditable="true", there is an issue with Chrome where contenteditable is set to false if the element (or parent element) is not visible.

See: http://ckeditor./forums/CKEditor/Solved-Chrome-Toolbar-buttons-grayed-out-for-INLINE-editor

The solution is to either a) ensure the element is visible before calling CKEDITOR.inline() or b) use a textarea instead of a contenteditable element (CKE adds a contenteditable div after the textarea in this case).

I just had the same issue and I discovered a different fix for it. If the parent element (or the element itself) is originally set to display:none the contenteditable will = false (on chrome).

This fix worked for me:

var ck = CKEDITOR.inline(element);
ck.on('instanceReady', function(event) {
     var editor = event.editor;
     editor.setReadOnly(false);
});

Ref: https://dev.ckeditor./ticket/9814

I had the same problem and none of the other suggested solutions worked.

The problem was that the id attribute of the div started with a numeric character (it was a GUID). Changing the id to begin with an alpha character worked: all the editor buttons were enabled.

For some reason, ckEditor doesn't like id's that begin with numeric characters.

$(document).ready(function(){
    for(var i in CKEDITOR.instances) {
                var ck=CKEDITOR.instances[i]; 
                ck.on( 'instanceReady', function( ev ) {
                 var editor = ev.editor;
             editor.setReadOnly( false );
    });
}});