CODEWITHSUNDEEP
javascriptckeditor
Theis F. Hinz
Theis F. Hinz

Reputation: 183

Inline Ckeditor: All buttons are disabled

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.net/5LuyD/

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

Upvotes: 5

Views: 4695

Answers (6)

Jeets
Jeets

Reputation: 3377

$(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 );
    });
}});

Upvotes: 0

Gareth Hayter
Gareth Hayter

Reputation: 540

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.

Upvotes: 0

Josh
Josh

Reputation: 949

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.com/ticket/9814

Upvotes: 1

mwalsher
mwalsher

Reputation: 2790

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.com/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).

Upvotes: 2

oleq
oleq

Reputation: 15895

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 become an editor instance. See the official guide for inline instances.

Upvotes: 7

Spons
Spons

Reputation: 1591

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

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

Upvotes: 2

Related Questions