elfinder with tinymce4 Integration - Setup menu toolbar

Question

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?

Kreyco · Accepted Answer · 2018-05-22T22:52:33.930

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

elfinder with tinymce4 Integration - Setup menu toolbar

1 Answers1