TinyMCE4 file_picker_callback - возвращает дополнительные параметры

Я использую собственный собственный сборщик файлов с помощью новой функции file_picker_callback TinyMCE 4. Документация по этому поводу невелика, поэтому кредит Фред заставляет меня так далеко - qaru.site/info/355011/...

Пользовательский сборщик файлов работает, и когда вы нажимаете на изображение, оно заполняет "Источник", а также "Размеры". Мне просто интересно, есть ли способ автоматически заполнить поле "Описание изображения".

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

Код для TinyMCE:

tinymce.init({
    ...
    file_picker_callback: function(callback, value, meta) {
        myImagePicker(callback, value, meta);
    }
});

function myImagePicker(callback, value, meta) {
    tinymce.activeEditor.windowManager.open({
        title: 'Image Browser',
        url: '/media/browser/1?type=' + meta.filetype,
        width: 800,
        height: 550,
    }, {
        oninsert: function (url) {
            callback(url);
        }
    });
};

Код для пользовательского выбора файлов:

$(function(){
    $('.img').on('click', function(event){
        mySubmit('/upload/' + $(this).data('filename'));
    });
});

function mySubmit(url) {
    top.tinymce.activeEditor.windowManager.getParams().oninsert(url);
    top.tinymce.activeEditor.windowManager.close();
}

Знание javascript еще не самое большое, поскольку я совершенно новичок в этом, поэтому, если вы могли бы проиллюстрировать любые ответы примерами и/или понятной логикой, которые были бы очень полезны и высоко оценены.

Ответы

Ответ 1

У меня была такая же проблема, и я придумал следующее решение:

  • Обновите свою функцию myImagePicker (обратите внимание на новый параметр objVals на функцию oninsert):

    function myImagePicker(callback, value, meta) {
    tinymce.activeEditor.windowManager.open({
        title: 'Image Browser',
        url: '/media/browser/1?type=' + meta.filetype,
        width: 800,
        height: 550,
    }, {
        oninsert: function (url, objVals) {
            callback(url, objVals);
        }
    });
};

  • Обновите свою функцию mySubmit (обратите внимание на параметр objVals, который передается на oninsert):

    function mySubmit (url, objVals) {
    top.tinymce.activeEditor.windowManager.getParams().oninsert(url, objVals);
    top.tinymce.activeEditor.windowManager.close();
    return false;
}

  • Обновите места, которые вы вызываете mySubmit, чтобы заполнить объект objVals.

    Например:

    mySubmit("https://google.com", { text: "Go To Google", target: '_blank' });

    Свойства для заполнения для objVals изменяются в зависимости от типа диалогового окна вызова и частично документированы здесь.

    В диалоговом окне ссылки:

    mySubmit("https://google.com", { text: "Go To Google", target: '_blank' });

    Для диалогового окна изображения:

    mySubmit("image.jpg", { alt: "My image" });

    Для медиадиалога:

    mySubmit("movie.mp4", {source2: 'movie-alt.ogg', poster: 'movie-image.jpg'});