TinyMCE4 file_picker_callback - 返回其他参数 [英] TinyMCE4 file_picker_callback - return additional params

问题描述

我使用我自己的自定义文件选择器与TinyMCE 4的新的file_picker_callback函数。关于这方面的文档不是很好，所以信任到弗雷德让我这么远 - http://stackoverflow.com/a/ 24571800/2460995

I am using my own custom file picker with TinyMCE 4's new file_picker_callback function. The documentation on this isn't great, so credit goes to Fred for getting me this far - http://stackoverflow.com/a/24571800/2460995

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

The custom file picker is working and when you click on an image it fills in the "Source" and also the "Dimensions". I'm just wondering if there is any way to automatically fill in the "Image description" field as well.

图像的信息是从数据库表生成的，所以我已经有一个描述，这将是很高兴自动填充它为用户。在尝试各种传递数据的方式后，我很难理解如何做。

The information for the images is generated from a database table, so I already have a description and it would be nice to automatically fill it in for the user. After trying various ways of passing the data back I'm struggling to understand how it can be done.

TinyMCE的代码：

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

自定义文件选择器的代码：

Code for the Custom File Picker:

$(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知识不是最大的，

My javascript knowledge isn't the greatest yet as I'm quite new to it, so if you could please illustrate any answers with examples and/or clear logic that would be very useful and much appreciated.

推荐答案

1. 更新您的 myImagePicker oninsert 函数的 objVals 参数）： p>
   
   

1. Update your myImagePicker function to be (note the new objVals parameter to the oninsert function):

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 be（注意传递给 oninsert 的 objVals 参数）：

Update your mySubmit function to be (note the objVals parameter that is passed to oninsert):

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

更新您呼叫的地方 mySubmit

Update the places that you call mySubmit to fill-in the objVals object.

例如：

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

要填写的属性 objVals 根据调用对话框的类型进行更改，并且（部分）记录此处。

The properties to fill-in for objVals change based on the type of calling dialog, and are (partially) documented here.

对于链接对话框：

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

对于图像对话框：

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

对于mediadialog：

For the mediadialog:

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

这篇关于TinyMCE4 file_picker_callback - 返回其他参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！