Integrating MCImageManager into TinyMCE

  • Download and install TinyMCE according to the WebYep-Documentation
  • Download the plugin and unpack it (note that you will get the download link after you purchased MCImageManager)
    • You will get a folder named "imagemanager"; move this folder in the plugins directory of TinyMCE:
      /webyep-system/program/opt/tinymce/jscripts/tiny_mce/plugins
    • Detailed configuration options can be found at the Moxiecode Wiki
  • Open the configuration file of MCImageManager: /webyep-system/program/opt/tinymce/jscripts/tiny_mce/plugins/imagemanager/config.php
    • find the line that reads
      $mcImageManagerConfig['filesystem.rootpath'] = 'files';
      and replace it with
      $mcImageManagerConfig['filesystem.rootpath'] = preg_replace('|program/opt/.+$|', 'data/userfiles', __FILE__);
    • find the line that reads
      $mcImageManagerConfig['SessionAuthenticator.logged_in_key'] = "isLoggedIn";
      and replace it with
      $mcImageManagerConfig['SessionAuthenticator.logged_in_key'] = 'WebYepIsAuthorized';
    • for security reasons, delete or comment out the 2 entries under "ExternalAuthenticator config":
      // ExternalAuthenticator config
      $mcImageManagerConfig['ExternalAuthenticator.external_auth_url'] = "auth_example.jsp";
      $mcImageManagerConfig['ExternalAuthenticator.secret_key'] = "someSecretKey";
    • Finally create a folder named "userfiles" in your data folder (/webyep-system/data/userfiles).
  • If you've created an option file tinymce_init.php in your /webyep-system/program/opt folder, then you need to add 'imagemanager' to the list of available plugins:
      …
    plugins : "safari,style,table,advhr,advlink,iespell,imagemanager,insertdatetime,searchreplace, …",
      …

Did it work?

To check whether the installation was successful, do the following:

  • Create a WebYep page containing a RichText element and upload this page to your server.
  • Open this page in your browser and switch to edit mode.
  • Klick the 'Edit' Button of the RichText element. A new window with TinyMCE should pop up.
  • In the toolbar click on "Insert/edit image". The dialogue "Insert/edit image" should appear.
  • If the installation of MCImageManager was successful, you'll now have a new button "Browse" next to the URL input field.

Adding language support

  • MCImageManager only ships with an english language file.
    • If you want another language than English, you can download the neccesary file from Moxiecode
    • Put it in this folder: /webyep-system/programm/opt/tinymce/jscripts/tiny_mce/plugins/imagemanager/language/im
  • Open the configuration file of MCImageManager: /webyep-system/programm/opt/tinymce/jscripts/tiny_mce/plugins/imagemanager/config.php
    • Find the line that reads $mcImageManagerConfig['general.language'] = "en"; and change "en" accordingly.
      So if you want your filemanager to speak french, write:
      $mcImageManagerConfig['general.language'] = "fr";
© 2011, Objective Development