javascript - TinyMCE4 file_picker_callback - 返回附加参数

Question

我正在使用我自己的自定义文件选择器和 TinyMCE 4 的新 file_picker_callback 函数。这方面的文档不是很好，所以感谢 Fred 让我走到这一步 - https://stackoverflow.com/a/24571800/2460995

自定义文件选择器正在运行，当您单击图像时，它会填充“来源”和“尺寸”。我只是想知道是否有任何方法可以自动填写“图像描述”字段。

图像的信息是从数据库表中生成的，所以我已经有了一个描述，如果能自动为用户填写它会很好。在尝试了各种传回数据的方法后，我一直在努力理解如何做到这一点。

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 知识还不是最丰富的，因为我对它还很陌生，所以如果你能用例子和/或清晰的逻辑来说明任何答案，那将非常有用并且非常感谢。

Answer 1

我遇到了同样的问题，并提出了以下解决方案:

1. 将您的 myImagePicker 函数更新为(注意 oninsert 函数的新 objVals 参数):

   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);
           }
       });
   };
   

2. 将您的 mySubmit 函数更新为(注意传递给 oninsert 的 objVals 参数):

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

3. 更新您调用mySubmit 的地方以填充objVals 对象。

   例如:

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

   要为 objVals 填充的属性根据调用对话框的类型而变化，并且(部分)记录在案 here .

   对于链接对话框:

   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'});