TinyMCE插入/编辑图像源按钮

时间:2016-02-23 11:03:58

标签: html tinymce tinymce-4

我正在使用小型mce,并希望在插入图像对话框中有一个特殊页面的按钮

enter image description here

在源代码后面输入一个指向在新浏览器窗口中打开的不同页面的简单链接。我怎么能实现呢?

2 个答案:

答案 0 :(得分:5)

TinyMCE有一个名为file_picker_callbackhttps://www.tinymce.com/docs/configure/file-image-upload/#file_browser_callback https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_callback https://www.tinymce.com/docs/configure/file-image-upload/ 的初始化选项,允许您将自己的文件浏览功能添加到插入对话框中:

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

例如,您可以在init中执行以下操作:

var imageFilePicker = function (callback, value, meta) {               
    tinymce.activeEditor.windowManager.open({
        title: 'File and Image Picker',
        url: '/myapp/getfilesandimages',
        width: 700,
        height: 600,
        buttons: [{
            text: 'Insert',
            onclick: function () {
                //do some work to select an item and insert it into TinyMCE
                tinymce.activeEditor.windowManager.close();
            }
        }, 
        {
            text: 'Close',
            onclick: 'close'
        }],
    }, 
    {
        oninsert: function (url) {
            callback(url); 
        }
    });
};

然后imageFilePicker函数只会调用一个函数来完成打开窗口进行选择的实际工作:

i

答案 1 :(得分:0)

Eighter使用tinymce核心插件的副本创建自己的插件,或者在创建对话后将其添加到DOM中。