CKEditor with JQuery UI Dialog - not showing up a second time

I am trying to implement CKEditor inside a jQuery UI dialog when the dialog is opened the first time it works perfectly.

When I open the dialog a second time, the text area as "style: hidden" and the editor does not load?

Dialog

MyApp.Dialog = $('<div></div>');
        MyApp.Dialog
        .dialog({
            modal: true,
            autoOpen: false,
            title: title,
            width: width,
            height: height,
            close:function(){
                $(this).find('textarea').ckeditorGet().destroy();
            },
            buttons: {
                'OK': function() {
                    form = $(this).find('form');
                    if (form.validate().form() == true) {
                        MyApp.submitFormWithAjax(form, $(this));
                    } else {
                        return false;
                    }
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });

        MyApp.Dialog.load(url, function() {
            EventManager.publish('showFormDialogLoaded');
        });

        MyApp.Dialog.dialog('open');

on my admin page I am waiting for the dialog to load.

$('.admin-create-article').click(function(event) {
       MyApp.showFormDialog($(this).attr('href'), 'Neuer Artikel', 700, 630);
       EventManager.subscribe('showFormDialogLoaded', function() {
             $('.editor').ckeditor( function() {}, { skin : 'v2' } );
       });
       event.preventDefault();
 });
+3
source share
2 answers

I had the same problem, but now it works for me.

You must do this in each dialog construct (create and destroy ckeditor):

if  (CKEDITOR.instances.editorD != null && CKEDITOR.instances.editorD != 'undefined')
     {
       CKEDITOR.instances.editorD.destroy();
     }

      CKEDITOR.replace( 'editorD',
      {
       language : 'fr',
       toolbar_Mytoolbardata :
       [
        ['Bold','Italic','Underline','Strike'],
        ['FontName','FontSize'],
        ['TextColor']// No comma for the last row.
       ],
       toolbar : 'Mytoolbardata',
       skin: 'v2',
       width : 403,      
       height : 25,
       disableObjectResizing : true,
       resize_enabled : false,
       shiftEnterMode : CKEDITOR.ENTER_BR,
       toolbarCanCollapse : false,
       forcePasteAsPlainText : true 
      });
+4
source

Script files do not load or conflict with some other scripts, such as jquery UI script.

0
source

Source: https://habr.com/ru/post/1787988/


All Articles