Question

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

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

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

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

对不起我的奇怪的英语。

Answer 1

我使用类似的自定义tinymce 4+插件。

现在我使用以下内容：

在插件按钮上单击（或菜单项或其他）
设置editor.setProgressState(1)（正在进行中）
在打开tinymce.util.XHR对话框之前执行ajax（类似于jquery ajax）
在XHR返回，设置editor.setProgressState(0)（完成），然后打开包含ajax内容的对话框
对话框关闭（或图像选择）获取所选图像并使用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)
    });
});

带有ajax内容的tinymce对话框

1 个答案: