Using custom editor to edit files within elfinder

edit command supports any (I hope) WYSIWYG.

Here is simple example for TinyMCE v3.x:

// 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).

And here is simple example for TinyMCE v 4.x 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 "$('#finder').elfinder({});" add:

tinymce.init({});

3. inside the 'elfinder options':

  commandsOptions : {
    edit : {
      mimes : ['text/plain', 'text/html', 'text/javascript'], //types to edit
      editors : [
        {
          mimes : ['text/html'],  //types to edit with tinyMCE
          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.

Others WYSIWYGs examples are welcome.