带有 ajax 内容的 tinymce 对话框

Question

我想为我的 CMS 创建一个 TinyMCE 插件。

我想制作一个通过 ajax（图像列表 + ajaxuploader）获取其内容的对话框。如果用户选择/上传图像，则应将图像粘贴到编辑器中。

我需要一个解决方案：将 ajax (jquery) 内容放入对话框并将所选图像放入编辑器。

有人知道一个很好的例子/教程吗？

对不起，我奇怪的英语。

Answer 1

我正在为自定义 tinymce 4+ 插件使用类似的东西。

现在我使用以下内容：

1. 点击插件按钮（或菜单项或其他）
2. 设置editor.setProgressState(1)（进行中）
3. 在使用tinymce.util.XHR 打开对话框之前执行ajax（类似于jquery ajax）
4. 在XHR 返回时，设置editor.setProgressState(0)（完成），然后打开带有ajax 内容的对话框
5. 在对话框关闭（或图像选择）时获取所选图像并使用editor.selection.setContent(..) 更新编辑器

这也是包含的image tinymce 插件的工作原理。

或者，您可以打开一个自定义的iframe 对话框（带有必要的jquery 库或其他任何东西）并在对话框本身内完成所有这些操作（作为一个迷你应用程序）。

这是使用自定义插件完成的，但我想使用更多 tinymce 原生方法。

示例插件代码

tinymce.PluginManager.requireLangPack('my_plugin');
tinymce.PluginManager.add('my_plugin', function( editor, url ) {
    var _ = tinymce.util.I18n.translate,
        plugin_url = url + ('/' === url.slice(-1) ? '' : '/')
    ;

    function insert_or_replace( content ) {
        editor.focus( );
        if ( editor.selection )
            editor.selection.setContent( content );
        else
            editor.insertContent( content );
    };

    function buildListItems(inputList, itemCallback, startItems) {
        function appendItems(values, output) {
            output = output || [];

            tinymce.each(values, function(item) {
                var menuItem = {text: item.text || item.title, value: ""};
                itemCallback(menuItem, item);
                output.push(menuItem);
            });

            return output;
        }

        return appendItems(inputList, startItems || []);
    }

    function ajax( ajaxurl, cb ) {
        return function( ) {
            editor.setProgressState( 1 ); // Show progress
            tinymce.util.XHR.send({
                url: ajaxurl,
                success: function( res ) {
                    editor.setProgressState( 0 ); // Hide progress
                    cb( !!res ? tinymce.util.JSON.parse( res ) : res );
                }
            });
        };
    };

    function popup( data ) {
        // Open editor window
        var listBox, win = editor.windowManager.open({
            title: _('Insert'),
            resizable : true,
            maximizable : true,
            width: 400,
            height: 300,
            body: [
            {
                type: 'listbox',
                name: 'my_control',
                label: _('Insert'),
                tooltip: _('Select item'),
                values: buildListItems(data, function( item, datum ) {
                    item.value = datum;
                    item.text = datum.title;
                }),
                onPostRender: function( ){
                    listBox = this;
                }
            }
            ],
            buttons: [
                { text: _('Insert'), subtype: 'primary', onclick: function( ){
                    var selected = listBox.value( );
                    if ( !!selected )
                        insert_or_replace( '[my-shortcode id="'+selected.id+'" title="'+selected.title+'"]' )
                    win.close( );
                }},
                { text: _('Cancel'), onclick: 'close' }
            ]
        });
    };

    editor.addButton('my_button', {
        title: _('Sample Button'),
        icon: 'my-icon',
        onclick: ajax(editor.settings.my_plugin.ajaxurl, popup)
    });

    editor.addMenuItem('my_menu', {
        icon: 'my-icon',
        text: _('Sample Menu'),
        context: 'insert',
        onclick: ajax(editor.settings.my_plugin.ajaxurl, popup)
    });
});