Как в creditor создать второе диалоговое окно при нажатии OK на первом окне?

Question

[SlimSavernake]

При клике по кнопке на панели кнопок я хочу открыть диалоговое окно, указать там нужную мне информацию и при нажатии ОК открыть новое диалоговое окно. Второе окно у меня не открывается. Подскажите как правильно это сделать?

plugin.js

CKEDITOR.plugins.add( 'gallery', {
        icons: 'simplebox',
        init: function( editor ) {
            editor.addCommand('gallery', new CKEDITOR.dialogCommand('galleryDialog'));

            editor.ui.addButton('Gallery', {
                label: 'Insert gallery',
                command: 'gallery',
                toolbar: 'insert',
                icon: this.path + 'images/image.png'
            });

            CKEDITOR.dialog.add( 'galleryDialog', this.path + 'dialogs/gallery.js' );
        }
    } );

dialogs/gallery.js

CKEDITOR.dialog.add( 'galleryDialog', function( editor ) {
    return {
        title: 'Edit Simple Box',
        minWidth: 200,
        minHeight: 100,
        contents: [
            {
                id: 'info',
                elements: [
                    {
                        id: 'align',
                        type: 'html',
                        html: '<div id="myDiv">Sample <b>text</b>.</div><div id="otherId">Another div.</div>',
                        commit: function( widget ) {
                            console.log(1);
                        }
                    },

                ]
            }
        ],
        onOk: function(ee) {

// ТУТ Я ПЫТАЮСЬ СОЗДАТЬ ВТОРОЕ ДИАЛОГОВОЕ ОКНО

            CKEDITOR.dialog.add( 'mydialog', function( editor) {
                // CKEDITOR.dialog.definition

                return {
                    title: 'Sample dialog',
                    minWidth: 390,
                    minHeight: 130,
                    contents: [
                        {
                            id: 'tab1',
                            label: 'Label',
                            title: 'Title',
                            expand: true,
                            padding: 0,
                            elements: [
                                {
                                    type: 'html',
                                    html: '<p>This is some sample HTML content.</p>'
                                },
                                {
                                    type: 'textarea',
                                    id: 'textareaId',
                                    rows: 4,
                                    cols: 40
                                }
                            ]
                        }
                    ],
                    buttons: [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ],
                    onOk: function() {
                        // "this" is now a CKEDITOR.dialog object.
                        // Accessing dialog elements:
                        var textareaObj = this.getContentElement( 'tab1', 'textareaId' );
                        alert( "You have entered: " + textareaObj.getValue() );
                    }
                };
            } );


// ТУТ Я ПЫТАЮСЬ ЗАПУСТИТЬ СОЗДАННОЕ ДИАЛОГОВОЕ ОКНО
            CKEDITOR.instances.editor1.openDialog( 'mydialog' );
        }
    };
} );

Answer 1

[Karen Ananiev]

Прежде всего, перенесите добавление диалога из файла с диалогом в функцию init() в файл с плагином - вам не нужно каждый раз добавлять диалог. Дальше - замените CKEDITOR.instances.editor1.openDialog( 'mydialog' ) на просто editor.openDialog( 'mydialog' ) - инстанс редактора передается в функцию инициализации диалога, вам не нужно его получать таким вот образом. И последнее - верните false из функции onOK() - это предотвратит закрытие первого диалога и позволит открыть второй. Потом вам нужно будет закрыть первый диалог руками - в инстансе второго диалога будет на него ссылка - dialog._.parentDialog.

Comments

[SlimSavernake]

спасибо большое!! Заработало!

[SlimSavernake]

Подскажите, пожалуйста, как мне передать данные "html" из первого диалога во второй?

[Karen Ananiev]

У функции editor.openDialog() возможно указать callback вторым параметром. Она вызовется в скоупе инстанса второго диалога - там и передавайте.

[SlimSavernake]

karena, Я прошу прощения за глупые вопросы, с программированием у меня туговато.
Так и не смог понять, как получить данные в во втором окне.

Дописал я функцию обратного вызова, которая для примера возвращает 1234.

onOk: function() {
            editor.openDialog( 'mydialog', function () {
                return 1234;
            } );
            return false;
        }

А как получить этот 1234 во втором окне я все равно не понял.

Да и куда писать тоже не пойму - то ли в setup, то ли в onLoad, в сам диалог или в элементы.

Пожалуйста, напишите пример кода, если не трудно.

А вообще у меня задача такая - в первом окне есть набор картинок. Я выделяю нужные мне, жму ОК. Открывается окно с выбранными изображениями, в этом окне я их сортирую в нужном порядке и вставляю в редактор в виде разметки для какой-нибудь JS галереи.

[Karen Ananiev]

Тогда в колбэке вам нужно прописать что-то вроде

onOk: function() {
    const selectedImages = []; // здесь получаете выделенные картинки первого диалога
    editor.openDialog( 'mydialog', function () {
        // this - инстанс диалога mydialog
        this.selectedImages = selectedImages; // передаете их во второй диалог
    } );
    return false;
}

А во втором диалоге в onShow() у вас уже должно быть доступно this.selectedImages, с которым дальше делаете то, что вам нужно.

[SlimSavernake]

karena, Спасибо огромное, Вы мне очень помогли!

[SlimSavernake]

Karen Ananiev, здравствуйте. Я тут подумал, что если виджеты можно перетаскивать, то проще сделать каждую картинку виджетом внутри общего виджета и сортировать прямо в редакторе, не добавляя отдельный диалог для сортировки. То есть в моей разметке:

<ul class="lightgallery">
   <li><img src="img.jpg"></li>
   <li><img src="img.jpg"></li>
   <li><img src="img.jpg"></li>
</ul>

<ul class="lightgallery"> будет виджетом, и каждый <li><img src="img.jpg"></li> в нем тоже будет виджетом.

Можно ли так делать? вкладывать виджеты друг в друга.

[Karen Ananiev]

Похоже, что CKEditor позволяет вкладывать виджеты друг в друга. Попробуйте. Хотя, я бы сделал один виджет и добавил бы свой обработчик drag and drop для картинок внутри него.