inline editor (div contenteditable) when loaded hidden, doesn't work.

I had the same issue, posted a bug report @ http://dev.ckeditor.com/ticket/9814 please comment on that to bump the issue :)

Have you found any kind of workaround for webkit browsers?

Any word on this?  Found a fix?  I'm having the same issue.

Thanks!

Hi,

I had the same issue. 
The problem is chrome makes contenteditable false when the parent div is hidden.

I found 2 way to get around this.
First is with some css:
 

-webkit-user-modify: read-write;

The second is with some jquery:

$('.text').click(function() {
	var name;
	for(name in CKEDITOR.instances) {
		var instance = CKEDITOR.instances[name];
		if(this && this == instance.element.$) {
			return;
		}
	}
	$(this).attr('contenteditable', true);
	CKEDITOR.inline(this);
});

Hope this helps.

Cheers

I was able to reproduce this in Chrome.

If an element is set to contenteditable=true, but the element is invisible, the contenteditable attribute is set to false.  The solution I found was, when the element becomes visible, destroy the existing CKEDITOR and re-create using...similar to the method above, but not re-using the existing CKEDITOR object:

$('.text').click(function() {
        if($(this).attr("contenteditable") == "false"){
		var name;
		for(name in CKEDITOR.instances) {
			var instance = CKEDITOR.instances[name];
			if(this && this == instance.element.$) {
				instance.destroy;
			}
		}

		$(this).attr('contenteditable', true);
		CKEDITOR.inline(this);
	}
});

This worked for me (need Jquery)

$('div[contenteditable="true"]:hidden').click(function() {
	if($(this).attr("contenteditable") == "false"){
		var name;
		for(name in CKEDITOR.instances) {
			var instance = CKEDITOR.instances[name];

			if(this && this == instance.element.$) {
				instance.destroy();
				$(this).attr('contenteditable', true);
				CKEDITOR.inline(this);
			}
		}
		;
	}
});

If anyone is wondering, this issue happens due to a bug in Chrome - https://code.google.com/p/chromium/issues/detail?id=313082. Previously this bug also concerned Safari, but it was fixed in Safari 7.1. So now only Chrome remains but unfortunately there's little happening with it.

This was the easiest, cleanest way of working around this that I could find.

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

Thanks! I copied this workaround to the ticket.