TinyMCE4 file_picker_callback - 返回额外的参数 [英] TinyMCE4 file_picker_callback - return additional params

问题描述

我正在使用我自己的自定义文件选择器和 TinyMCE 4 的新 file_picker_callback 函数.这方面的文档不是很好，所以感谢 Fred 让我走到这一步 - https://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 - https://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.

推荐答案

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

I was having the same problem, and came up with the following solution:

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

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 函数更新为(注意传递给 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 的地方以填充 objVals 对象.

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

对于媒体对话:

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

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