27

Integration with TinyMCE 4.x

Naoki Sawada edited this page 2019-01-28 09:44:30 +09:00

Table of Contents

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

NEWS: It is easier to integrate using the tinymceElfinder integrator. It supports TinyMCE 4 and 5.

The following is the previous integration method.

---

Configure TinyMCE 4.x to use the elFinder file manager

In the TinyMCE init code, add the following line:

plugins: "image, link, media", // example
toolbar: "link image media",   // example
file_picker_callback : elFinderBrowser

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

function elFinderBrowser (callback, value, meta) {
  tinymce.activeEditor.windowManager.open({
    file: '/elfinder/elfinder.html',// use an absolute path!
    title: 'elFinder 2.1',
    width: 900,  
    height: 450,
    resizable: 'yes'
  }, {
    oninsert: function (file, fm) {
      var url, reg, info;

      // URL normalization
      url = fm.convAbsUrl(file.url);
      
      // Make file info
      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});
      }

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

      // Provide alternative source and posted for the media dialog
      if (meta.filetype == 'media') {
        callback(url);
      }
    }
  });
  return false;
}

Update the elFinder page being called by TinyMCE 4.x

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

opts = {
    getFileCallback : function(file, fm) {
        // pass selected file data to TinyMCE
        parent.tinymce.activeEditor.windowManager.getParams().oninsert(file, fm);
        // close popup window
        parent.tinymce.activeEditor.windowManager.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>

• this integration demo