CODEWITHSUNDEEP
phpjqueryckeditor
user3196424
user3196424

Reputation: 537

CKEditor Inline Editing on jQuery UI

I'm stuck on making CKEditor inline editing work on jQuery UI, especially on Tabs. Does anyone know how to make it work? Are there any plugins that will make CKEditor work on jQuery UI?

Upvotes: 2

Views: 605

Answers (2)

Richard Styles
Richard Styles

Reputation: 31

I had a similar issue and it turned out to be due to how the browsers were handling the "hidden" or "disabled" components which had yet to be rendered.

http://ckeditor.com/ticket/9814 gave a example of adding a listener to change the readOnly status when the instance becomes ready.

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

Upvotes: 3

Wayne Smallman
Wayne Smallman

Reputation: 1720

I've been struggling with the same problem since this morning, but I found a fix.

var objCKeditor = new Object({
    config: base_url + "library/applications/ckeditor/config.simple.js"
});
var objTab = new Object({
    active: false
});
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.

Upvotes: 1

Related Questions