Why is CKEDITOR.inline() toolbar disabled?

Hi, I know there are a lot of similar discussions on this exact topic, but I've been bashing away at this for quite some time, and having followed the instructions, I cannot enable the toolbar.

<div class="link-bookmark-comment" id="link-bookmark-comment-88" contenteditable="true">
    [content]
</div>

...

var config = '[path]/library/applications/ckeditor/config.simple.js';
CKEDITOR.replace('snippet'); // A 'static' editor elsewhere that is working.
CKEDITOR.disableAutoInline = true;
$( 'div.link-bookmark-comment').each( function() {
    var editor = CKEDITOR.inline( $(this).attr('id'), { customConfig: config } );
});

When I look at the code in the web browser for the "div" I see:

contenteditable="false"

I have tried many variants for the JavaScript, which includes:

entries for each instance;
with and without "config";
using manual references to the ID of each instance;
moving the JavaScript to top of the page.

In each case, nothing works.

Fri, 03/28/2014 - 12:57

Wayne Smallman

Joined: 20/05/2013

Posts: 22

Google Maps API

Okay, after having to strip the code down even further, I have found that the Google Maps API appears to be the culprit. But I need to continue to see if anything else might be interfering with things I've yet to encounter.

Fri, 03/28/2014 - 13:32

Wayne Smallman

Joined: 20/05/2013

Posts: 22

jQuery UI tabs

It appears the real culprit isn't the Google Maps API but jQuery UI tabs. When the pages loads, the "Editor" tab is visible with the others hidden. It is within the "Bookmarks" tab that the code for the in-line editors for CKEditor are to found.

As I understand, the editors don't work when within an object that's hidden. Anyone know of a way around this issue?

Fri, 03/28/2014 - 14:33

Wayne Smallman

Joined: 20/05/2013

Posts: 22

I have found a fix.

	var objCKeditor = new Object({
		config: base_url + "library/applications/ckeditor/config.simple.js"
	});
	var objTab = new Object({
		active: false
	});
	CKEDITOR.replace('snippet');
    CKEDITOR.disableAutoInline = true;
    // Activate your editors when the tabs themselves are activated.
    $( ".navigation-tabs" ).on( "tabsactivate", function( event, ui ) {
    	// Find which tab has been chosen by the user.
    	objTab.chosen = $(this).tabs('option', 'active');
		// Only initialize the editors once...
		if ( (objTab.chosen == 3) && (objTab.active == false) ) {
    		// Loop through the editors.
			$( 'div.link-bookmark-comment').each( function() {
				// Find the ID for the editor.
				objCKeditor.editor = $(this).attr('id');
					// ... which is facilitated by this boolean.
					objTab.active = true;
					CKEDITOR.inline( objCKeditor.editor, { customConfig: objCKeditor.config } );
			});
		}
    } );

So, it would appear that CKEditor does not like to be placed within tabs, or any object which is initially hidden.

Wed, 11/05/2014 - 10:23

emmanuelhiggins

Joined: 05/11/2014

Posts: 2

A better fix

A better fix, without having to re-build the editor instance is:

var ck = CKEDITOR.inline(element);

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