javascriptphpsymfony-1.4tinymce-4elfinder

elfinder with tinymce4 Integration - Setup menu toolbar


I want to integrate elFinder Plugin into TinyMCE4, I did it following the wiki page and I have installed elFinder V: 2.1.35 : Integration with TinyMCE 4.X . It works fine but I want to setup toolbar options like this:

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

But I still get full options bar: Full options bar

Here is the code from my file_picker_callback inside the form page:

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

Someone knows how to pass that options and get it working?


Solution

  • If you followed the integration with TinyMCE 4.X and downloaded the main.mce.js or created it, and want to setup toolbar options using the following commands: 'back', 'forward','reload','mkdir','upload','search','view' or another one.

    You can edit main.mce.js file and use the following snippet into 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
           }
       }
    }