CODEWITHSUNDEEP
javascriptjquery-uickeditor
user1173706
user1173706

Reputation: 2752

CKEditor 4 broken in jquery dialog when editor created before dialog

If I create a CKEditor (4.3.1) instance and then show it in a jquery ui dialog the editor contents field is blank, not editable, and any interaction with the editor menu shows a js error in the console:

Uncaught TypeError: Cannot call method 'getSelection' of undefined

There are several similar questions on SO. This is almost an exact duplicate, except this problem was reported for an earlier version of CKEditor (3.x.x). None of the workarounds suggested there are successful when using 4.3.1.

The problem appears to be creating the editor before creating the dialog. If I create the dialog before creating the instance then it works OK. I would prefer not to instantiate the editor after the dialog; is there another way to get this working?

Javascript (jqery.ui 1.10.2, jquery 1.9.0, CKEditor standard package 4.3.1):

$(document).ready(function () {
    CKEDITOR.replace('editor1');
    $('#opendialog').on('click', function () {
        $("#dialog" ).dialog();
    });
});

Html:

<body>
    <button id="opendialog">Open Dialog</button>
    <div id="dialog" style="display:none">
        <textarea id="editor1" class="textarea">some content</textarea>
    </div>
</body>

Upvotes: 1

Views: 395

Answers (1)

Pierre-Olivier Pignon
Pierre-Olivier Pignon

Reputation: 747

I solved the problem by instantiating the CKEditor after having opened the jquery dialog.

may it could help

Upvotes: 1

Related Questions