ckeditor - кнопка просмотра сервера вызывает функцию, а не всплывающее окно?

Question

я создал файловый браузер для ckeditor .. если открыть его во всплывающем окне, это крайне запутанно ..

как мне связать событие click на сервере просмотра, чтобы запустить браузер файлов в модальном режиме и т. Д.

в основном смотрит на что-то вроде

config.filebrowserClick = function(){
// do stuff here that happens when the button gets clicked
}

Answer 1

Это возможно на 100%, и другие люди делают это. Вы можете видеть, что эта функция работает как запросы OP на Mailchimp.com

«Мэтт Болл» отредактировал вопрос и ответил, что это невозможно, но, по-видимому, он не знаком с CKEditor и CKFinder, и вместо этого думает, что ОП хочет использовать браузерский «файл обзора» - но это явно не то, что ищет ОП.

OP имеет файловый браузер, такой как CKFinder, работающий во всплывающем окне. Вместо того, чтобы вызывать всплывающее окно, он хотел бы вызвать файловый браузер как модальное окно.

Я также смотрю на то, как это сделать, и я подозреваю, что это потребует редактирования файлов в _source / plugins / image и изменения дочернего браузера (это технический термин для вызова CKFinder), чтобы вместо этого загружаться как модальный , Проблема номер один здесь - это нарушение инкапсуляции, поскольку код Jquery для модальных окон не принадлежит CKEditor ...

Answer 2

Ответ @ 1I111I1 был очень полезен для меня, но недостатком является то, что он будет вести себя одинаково во всех случаях.Если вам нужна особая конфигурация для каждого экземпляра (например, каждый экземпляр может иметь свой путь по умолчанию для своего корневого каталога), это будет непросто.Кроме того, файловый менеджер будет лучше знать, хотите ли вы изображение или файл, потому что им потребуется другой метод просмотра (например, режим миниатюр для выбора изображения).

Итак, я отредактировал его так, чтобы он запускалсянастраиваемые события для каждого экземпляра на основе режима просмотра (изображение / ссылка).

CKEDITOR.on('dialogDefinition', function (event) {
var dialogName = event.data.name,
    dialogDefinition = event.data.definition,
    infoTab,
    browse;

// Check if the definition is from the dialog window you are interested in (the "Image" dialog window).
if (dialogName == 'image' || dialogName == 'link') {
    // Get a reference to the "Image Info" tab.
    infoTab = dialogDefinition.getContents('info');

    // Get the "Browse" button
    browse = infoTab.get('browse');

    // Override the "onClick" function
    browse.onClick = function () {
        var me = this,
            dialog = me.getDialog(),
            editor = dialog.getParentEditor(),
            callBack = editor._.filebrowserFn,
            win;

        // This may or may not be needed.  Got it from ckeditor docs. 
        editor._.filebrowserSe = me;

        // when the button gets clicked fire appropriate event 
        if (dialogName == 'image') {
            dialog.getParentEditor().fire('browseImageRequest', callBack);
        } else {
            dialog.getParentEditor().fire('browseLinkRequest', callBack);
        }



    }

}

});

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

    CKEDITOR.instances['myinstance'].on('browseImageRequest', (event)=> {
        // Call back to CKEDITOR with new path to image (i.e. replace path below with new url for image)
        window["CKEDITOR"].tools.callFunction(event.data, 'images/noimage.jpg');
    });

    CKEDITOR.instances['myinstance'].on('browseLinkRequest', (event) => {
        // Call back to CKEDITOR with new path to image (i.e. replace path below with new url)
        window["CKEDITOR"].tools.callFunction(event.data, 'http://www.google.com');
    });

Также обратите внимание, что перед всем этим вы должны активировать кнопку обзора с конфигурацией, которая требуется для режима всплывающих окон, тогда этот обходной путь переопределит действие onClick и вместо открытия всплывающих оконбудет срабатывать соответствующее событие

CKEDITOR.replace( 'editor1', {
                filebrowserBrowseUrl: '#',
                filebrowserImageBrowseUrl: '#'
});

Answer 3

Недавно мне пришлось сделать что-то очень похожее, и я решил выяснить это самостоятельно. Как только я это сделал, я сделал себе записку, чтобы вернуться и опубликовать решение. Это было 3 месяца назад, но вот упрощенная версия того, что я сделал, которая в основном переопределяла функцию onClick с измененным кодом из функции browseServer ckeditor (также включенной ниже).

CKEDITOR.on( 'dialogDefinition', function( event ) {
    var dialogName      = event.data.name,
        dialogDefinition = event.data.definition,
        infoTab,
        browse;

    // Check if the definition is from the dialog window you are interested in (the "Image" dialog window).
    if ( dialogName == 'image' ) {
        // Get a reference to the "Image Info" tab.
        infoTab = dialogDefinition.getContents( 'info' );

        // Get the "Browse" button
        browse = infoTab.get( 'browse' );

        // Override the "onClick" function
        browse.onClick = function () {
            var  me      = this,
                dialog   = me.getDialog(),
                editor   = dialog.getParentEditor(),
                callBack = editor._.filebrowserFn,
                win;

            // This may or may not be needed.  Got it from ckeditor docs. 
            editor._.filebrowserSe = me;

            // do stuff here that happens when the button gets clicked

            // Call back to CKEDITOR with new path to image (i.e. replace path below with new url for image)
            window.CKEDITOR.tools.callFunction( callBack, 'path' );

        }

    }

});

Вот функция browseServer, которую я получил из документации ckeditor, которую можно найти здесь - http://docs.ckeditor.com/source/plugin33.html.

function browseServer() {
    var dialog = this.getDialog();
    var editor = dialog.getParentEditor();

    editor._.filebrowserSe = this;

    var width = editor.config[ 'filebrowser' + ucFirst( dialog.getName() ) + 'WindowWidth' ] || editor.config.filebrowserWindowWidth || '80%';
    var height = editor.config[ 'filebrowser' + ucFirst( dialog.getName() ) + 'WindowHeight' ] || editor.config.filebrowserWindowHeight || '70%';

    var params = this.filebrowser.params || {};
    params.CKEditor = editor.name;
    params.CKEditorFuncNum = editor._.filebrowserFn;
    if ( !params.langCode )
        params.langCode = editor.langCode;

    var url = addQueryString( this.filebrowser.url, params );
    // TODO: V4: Remove backward compatibility (#8163).
    editor.popup( url, width, height, editor.config.filebrowserWindowFeatures || editor.config.fileBrowserWindowFeatures );
}

Надеюсь, это поможет. Извините, я не ответил раньше.

(Примечание: я использую ckeditor 4.4.7, но я предполагаю, что он должен быть аналогичным для других версий)

Answer 4

Если я понимаю, что вы пытаетесь сделать, это невозможно. Из соображений безопасности JavaScript в браузере помещен в «песочницу», поэтому у него нет доступа к локальной файловой системе.