12

Integration with TinyMCE 3.x

Naoki Sawada edited this page 2018-02-15 18:28:07 +09:00

Table of Contents

• Configure TinyMCE 3.x to use the elFinder file manager
• Update the elFinder page being called by TinyMCE 3.x

Configure TinyMCE 3.x to use the elFinder file manager

In the TinyMCE init code, add the following line:

file_browser_callback : 'elFinderBrowser'

Then add the following function (change the elfinder_url to the correct path on your system):

function elFinderBrowser (field_name, url, type, win) {
  var elfinder_url = '/elfinder/elfinder.html';    // use an absolute path!
  tinyMCE.activeEditor.windowManager.open({
    file: elfinder_url,
    title: 'elFinder 2.0',
    width: 900,  
    height: 450,
    resizable: 'yes',
    inline: 'yes',    // This parameter only has an effect if you use the inlinepopups plugin!
    popup_css: false, // Disable TinyMCE's default popup CSS
    close_previous: 'no'
  }, {
    window: win,
    input: field_name
  });
  return false;
}

Update the elFinder page being called by TinyMCE 3.x

Copy main.default.js to main.mce.js And edit a part opts = {...},.

opts = {
    getFileCallback : function(file, fm) {
        var win = tinyMCEPopup.getWindowArg('window'),
            URL = fm.convAbsUrl(file.url);

        // pass selected file path to TinyMCE
        win.document.getElementById(tinyMCEPopup.getWindowArg('input')).value = URL;

        // are we an image browser?
        if (typeof(win.ImageDialog) != 'undefined') {
            // update image dimensions
            if (win.ImageDialog.getImageData) {
              win.ImageDialog.getImageData();
            }
            // update preview if necessary
            if (win.ImageDialog.showPreviewImage) {
              win.ImageDialog.showPreviewImage(URL);
            }
        }

        // close popup window
        tinyMCEPopup.close();
    },
    url : 'php/connector.minimal.php', // connector URL (REQUIRED)
    lang: lang                         // auto detected language (optional)
},

Edit elfinder.html a part main.default.cke.js to main.mce.js

<script data-main="./main.mce.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>