Using custom editor to edit files within elfinder

edit command supports any (I hope) WYSIWYG.

Here is simple example for TinyMCE:

// init 
tinyMCE.init({});

// elfinder options
var opts = {
  commandsOptions : {
    edit : {
      editors : [
        {
          mimes : ['text/html'],  // add here other mimes if required
          load : function(textarea) {
            tinyMCE.execCommand('mceAddControl', true, textarea.id);
          },
          close : function(textarea, instance) {
            tinyMCE.execCommand('mceRemoveControl', false, textarea.id);
          },
          save : function(textarea, editor) {
            textarea.value = tinyMCE.get(textarea.id).selection.getContent({format : 'html'});
            tinyMCE.execCommand('mceRemoveControl', false, textarea.id);
          }
        },
        {...} // probably other editors for other mime types
      ]
    }
  }
}

Options

• mimes - enable current editor only on next mime types
• load - calls after edit dialog shown
• close - before dialog close
• save - before send textarea content to backend

This is just example to get the idea how it works (I'm not TinyMCE guru so maybe somebody can fix the code).

Others WYSIWYGs examples are welcome.

tinyMCE 4.0.1 as custom editor

In file 'elfinder.html':

1. on head section add:

<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>

2. inside the '$().ready(function()' after elfinder options add:

tinymce.init({});

3. inside the 'elfinder options':

  commandsOptions : {
    edit : {
      editors : [
        {
          mimes : ['text/html'],  // add here other mimes if required
          load : function(textarea) {
            tinymce.execCommand('mceAddEditor', false, textarea.id);
          },
          close : function(textarea, instance) {
            tinymce.execCommand('mceRemoveEditor', false, textarea.id);
          },
          save : function(textarea, editor) {
            textarea.value = tinyMCE.get(textarea.id).selection.getContent({format : 'html'});
            tinymce.execCommand('mceRemoveEditor', false, textarea.id);
          }
        },
        {...} // probably other editors for other mime types
      ]
    }
  }

With this method you don't have to download tinyMCE because you get it from CDN site.