TinyMCE Insert/edit 图片源按钮

Question

我正在使用 tiny mce，并希望在插入图像对话框中有一个指向特殊页面的按钮

在源代码后面输入一个简单的 link 到在新浏览器中打开的不同页面 window。我怎样才能做到这一点？

Answer 1

八个人使用 tinymce 核心插件的副本创建自己的插件，或者在创建对话后将其添加到 DOM。

Answer 2

TinyMCE 有一个名为 file_browser_callback 和 file_picker_callback 的初始化选项，允许您将自己的文件浏览功能添加到插入对话框中：

https://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/

例如，您可以在 init 中执行以下操作：

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

然后 imageFilePicker 函数将调用一个函数来完成打开 window 以进行选择的实际工作：

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

TinyMCE Insert/edit 图片源按钮

TinyMCE Insert/edit image source button

html

tinymce

tinymce-4