TinyMCE File Manager

PHP class, JSON API and a TinyMCE plugin. Chain: TinyMCE → xcmsfilemanager → XcmsFilemanager.openModal → api.php → uploads/.

Download plugin (zip)

Public demo: each visitor gets a private folder. Uploads expire after 6 hours. Limit: 20 files / 8 MB, JPG PNG GIF WEBP only. The downloadable zip is the plain plugin — no sandbox.

1. TinyMCE editor

The gallery button on the toolbar inserts an <img>. The folder icon in the image dialog uses the same modal (file_picker_callback).

plugin xcmsfilemanager · file_picker_callback · modal

2. Form field

Same modal, data-filemanager-field attribute. The input gets a relative path, the preview gets the URL.

3. Standalone grid

Same UI as a gallery file-manager page. Drop in an empty element with data-xcms-filemanager.

Drop it into your project

Download the zip, point config.php at a public images folder, include the CSS/JS and the TinyMCE plugin. TinyMCE can stay on a CDN or local files.

tinymce.init({
  selector: '.editor',
  plugins: 'image link lists',
  external_plugins: { xcmsfilemanager: 'PLUGIN_URL' },
  toolbar: 'link image xcmsfilemanager',
  file_picker_types: 'image',
  file_picker_callback: function (callback) {
    window.XcmsFilemanager.openModal({
      onSelect: function (item) {
        callback(item.url, { alt: item.name || '' });
      }
    });
  }
});