Skip to content
This repository has been archived by the owner on Sep 7, 2021. It is now read-only.
eitzenbe edited this page Feb 22, 2015 · 9 revisions

How to migrate open manager to work with tineMCE v4

Intro

Till i get write access to the git repo here is how to get the open manager to work with tinymce 4:

you'll need to modify the following files:

  • index.php (adapt to tinymcev4)
  • encodeexplorer.php (fix but with images now shown due to lowercasing of filenames)

and create one new file for the v4 plugin api

  • plugin_min.js (the file isnt actually minified ;)

Detailed modifications

in the index.php:

@@ -51,23 +51,22 @@
        $resultspp = 15;
        $nopages = ceil($nofiles/$resultspp);
        
-       $tabno = (int)$_GET['tab'];
-       if($tabno==0)
+       if(isset($_GET['tab']))
        {
-               $tabno = 1;
+         $tabno = (int)$_GET['tab'];
+       }
+       else
+       {
+         $tabno = 1;
        }
        
 ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
        <title>{#elvtimage_dlg.title}</title>
-       <script type="text/javascript" src="../../tiny_mce_popup.js" ></script>
+       <script type="text/javascript" src="../../tinymce.min.js" ></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
-       if(typeof tinyMCEPopup !== 'undefined')
-       {//for debug
-               tinyMCEPopup.requireLangPack();
-       }
        $(window).load(function()
        {
                if($("#filebrowser").length > 0)
@@ -324,19 +323,19 @@
                });
                                
                function ClosePluginPopup (strReturnURL) {
-                       var win = tinyMCEPopup.getWindowArg("window");                                          // insert information now
+                       var win = top.tinymce.activeEditor.windowManager.getParams().window;                                          // insert information now
                        if (!win)
-                               tinyMCE.activeEditor.execCommand('mceInsertContent', false, strReturnURL);
+                               top.tinyMCE.activeEditor.execCommand('mceInsertContent', false, strReturnURL);
                        else
                        {
-                               win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = strReturnURL;   
+                               win.document.getElementById(top.tinymce.activeEditor.windowManager.getParams().input).value = strReturnURL;     
                                if (typeof(win.ImageDialog) != "undefined")                                             // are we an image browser
                                {               
                                        if (win.ImageDialog.getImageData) win.ImageDialog.getImageData();                   // we are, so update image dimensions and preview if necessary
                                        if (win.ImageDialog.showPreviewImage) win.ImageDialog.showPreviewImage(strReturnURL);
                                }       
                        }
-                       tinyMCEPopup.close();                                                                       // close popup window
+                       top.tinymce.activeEditor.windowManager.close();                                                                 // close popup window
                }
                
                $(".mce-insert").live("click",function(){
@@ -822,8 +821,8 @@ uploadfolder/media</pre>
                <!--<button type="submit" class="btn btn-success start disabled" value="{#insert}" onclick="ElvtImageDialog.insert();" disabled="disabled">
                        <i class="icon-upload icon-white"></i> {#insert}
                </button>-->
-               <button type="submit" class="btn btn-danger start" onclick="tinyMCEPopup.close();">
-                       <i class="icon-ban-circle icon-white"></i> {#cancel}
+               <button type="submit" class="btn btn-danger start" onclick="top.tinymce.activeEditor.windowManager.close();">
+                       <i class="icon-ban-circle icon-white"></i> Cancel
                </button>
        </div>
 </body>

These changes will fix: BUGFIX o fixed warning when accessing $_GET['tab'] if not set, so check before reading it o replaced {#cancel} with "Cancel" as there is no support for language packs currently anyway

FEATURE migrated to tinyMCE v4
o updated tinyMCE js include
o updated calls to tinyMCEPopup to new API

MISC
o removed call to lang pack as its not supported currently anyway

and in the encodeexplorer.php:

2299c2299
<               $l = strtolower($l);
---
>               //$l = strtolower($l);

This change will fix:

BUGFIX
o on non windows server platforms lowercasing filenames is NOT a good idea! 
  so img.jpg != IMG.jpg Thus images that contained upper case letters were 
  shown as not broken url images

Anf finally add a plugin.min.js to the tinyMCE/plugins/openmanager folder

/**
 * plugin.js
 * 
 * (c) Thomas Eitzenberger, thomas@eitzen.at
 * License: AGPL v3
 */

/* global tinymce:true */

// this function can get called from the plugin in init (above) or from the
// callback on advlink/advimg plugins..
// in the latter case, win and type will be set.. In the first case, we will just
// update the main editor window with the path of the uploaded file
function openmanager(field_name, url, type, win) {
  // get the path to the uploader plugin
  var strPluginPath = tinyMCE.activeEditor.plugins.openmanager.getPluginURL();
  // the path to the uplaoder script
  var strUploaderURL = strPluginPath + "/index.php"; // generate
  // the relative upload path
  var strUploadPath = encodeURI(tinyMCE.activeEditor.getParam('open_manager_upload_path')); // get

  // were called without any GET params
  if (strUploaderURL.indexOf("?") < 0) // if we
    strUploaderURL = strUploaderURL + "?type=" + type + "&d=" + strUploadPath; 

  // else add our own params
  else
    strUploaderURL = strUploaderURL + "&type=" + type + "&d=" + strUploadPath;

  // open the plugin popup
  tinyMCE.activeEditor.windowManager.open({ 
    file : strUploaderURL,
    title : 'Open Manager',
    width : 720,
    height : 450,
    resizable : "no",
    inline : 1, // This parameter only has an effect if you
    // use the inlinepopups plugin!
    close_previous : "no"
  }, {
    window : win,
    input : field_name
  });

  return false;
}

tinymce.PluginManager.add('openmanager', function(editor, url) {
  function openmanagerdlg() {

    editor.windowManager.open({
      title : 'TinyMCE site',
      url : url + '/index.php?d=' + encodeURI(tinyMCE.activeEditor.getParam('open_manager_upload_path')),
      width : 720 + parseInt(editor.getLang('openmanager.delta_width', 0)),
      height : 450 + parseInt(editor.getLang('openmanager.delta_height', 0)),
    }, {
      plugin_url : url, // Plugin absolute URL
      some_custom_arg : 'custom arg' // Custom argument
    });
  }

  editor.addCommand('mceElvtImage', openmanagerdlg);

  editor.addButton('openmanager', {
    icon : 'save',
    text : 'Files',
    context : 'file',
    cmd : 'mceElvtImage',
    disabled : false
  });

  editor.addShortcut('ctrl+s', '', 'mceElvtImage');

  console.log("added openmanager");
});

How to activate it

$('#your_textarea').tinymce({
  script_url: 'tinymce/tinymce.min.js',
  plugins: [
      "openmanager .......any other plugins you want"
  ],
  open_manager_upload_path: '../../../documents/<?= $prjid ?>/', /* rel path starting from tinymce/plugins/openmanager */

  menu : { // this is the complete default configuration
    file   : {title : 'File'  , items : 'ajaxsave | openmanager | print'},
    ..... any other menu items
  }
..... any other config params
});

VOILA DONE ;)

PS: I am using the JQuery tineMCE version. If you use the js only you'll have to adapt the init section accordingly.

Clone this wiki locally