elfinder with tinymce4集成 - 设置菜单工具栏

时间:2018-03-28 14:33:09

标签: javascript php symfony-1.4 tinymce-4 elfinder

我想将elFinder Plugin集成到TinyMCE4中,我是按照wiki页面进行的,我已经安装了elFinder V:2.1.35: Integration with TinyMCE 4.X 。它工作正常,但我想设置工具栏选项,如下所示:

uiOptions : {
            // toolbar configuration
            toolbar : [
                ['back', 'forward'],
                ['reload'],
                ['mkdir', 'upload'],
                ['search'],
                ['view']
            ],

            // directories tree options
            tree : {
                // expand current root on init
                openRootOnLoad : true,
                // auto load current dir parents
                syncTree : true
            },

            // navbar options
            navbar : {
                minWidth : 150,
                maxWidth : 500
            },

            // current working directory options
            cwd : {
                // display parent directory in listing as ".."
                oldSchool : false
            }
        }

但我仍然可以获得完整选项栏: Full options bar

以下是表单页面中file_picker_callback的代码:

function elFinderBrowser (callback, value, meta) {
        tinymce.activeEditor.windowManager.open({
            file: '/js/lib/tinymce/plugins/elfinder/elfinder.html',
            title: 'elFinder 2.1',
            width: 900,
            height: 450,
            resizable: 'no',
            uiOptions : {
                // toolbar configuration
                toolbar : [
                    ['back', 'forward'],
                    ['reload'],
                    ['mkdir', 'upload']
                    ['search'],
                    ['view']
                ],

                tree : {
                    openRootOnLoad : true,
                    syncTree : true
                },

                navbar : {
                    minWidth : 150,
                    maxWidth : 500
                },

                cwd : {
                    oldSchool : false
                }
            }
        }, {
            oninsert: function (file, fm) {
                var url, reg, info;

                url = fm.convAbsUrl(file.url);

                info = file.name + ' (' + fm.formatSize(file.size) + ')';

                // Provide file and text for the link dialog
                if (meta.filetype == 'file') {
                    callback(url, {text: info, title: info});
                }

                if (meta.filetype == 'image') {
                    callback(url, {alt: info});
                }

                if (meta.filetype == 'media') {
                    callback(url);
                }
            }
        });
        return false;
    }

有人知道如何传递这些选项并让它运作起来吗?

1 个答案:

答案 0 :(得分:0)

如果您关注integration with TinyMCE 4.X并下载了main.mce.js或已创建它,并希望使用以下命令设置工具栏选项:'back', 'forward','reload','mkdir','upload','search','view'或其他命令

您可以修改main.mce.js文件并将以下代码段用于opts

opts = {
   //...Your settings (getFieCallback,url,lang,etc.)
   uiOptions: {
       // toolbar configuration
       toolbar: [ //Here you set up the options on toolbar
           ['back', 'forward', 'up'], ['reload', 'home'],
           ['undo','redo'],
           ['mkdir', 'upload'], ['getfile','|','quicklook'],
           ['search'],
           ['view', 'sort']
       ],    
       // directories tree options
       tree: {
           // expand current root on init
           openRootOnLoad: true,
           // auto load current dir parents
           syncTree: true
        },    
       // navbar options
       navbar: {
           minWidth: 150,
           maxWidth: 500
       },    
       // current working directory options
       cwd: {
       // display parent directory in listing as ".."
          oldSchool: false
       }
   }
}