Difference between revisions of "CKEditor upgrade"

From GLMWiki
Jump to: navigation, search
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
This checklist upgrades a site from the FCKeditor to CKEditor using Pear Libraries
 
This checklist upgrades a site from the FCKeditor to CKEditor using Pear Libraries
  
 +
'''NOTE:''' Not for sites on WS1
  
 
1) Verify GLM_APP_BASE and GLM_APP_BASE_URL is defined in setup.phtml
 
1) Verify GLM_APP_BASE and GLM_APP_BASE_URL is defined in setup.phtml
  
 
2)  add to the top function in setup.phtml (or setup_functions.phtml)
 
2)  add to the top function in setup.phtml (or setup_functions.phtml)
 +
<pre>
 
<script type="text/javascript" src="'.GLM_APP_BASE_URL.'ckeditor/current/ckeditor.js"></script>   
 
<script type="text/javascript" src="'.GLM_APP_BASE_URL.'ckeditor/current/ckeditor.js"></script>   
 
<script type="text/javascript" src="'.GLM_APP_BASE_URL.'libjs/jquery-1.3.2.min.js"></script>     
 
<script type="text/javascript" src="'.GLM_APP_BASE_URL.'libjs/jquery-1.3.2.min.js"></script>     
 
<script type="text/javascript" src="./cktoolbox.js "></script>   
 
<script type="text/javascript" src="./cktoolbox.js "></script>   
 
+
</pre>
 
3) Add the function __autoload($className) to setup.phtml
 
3) Add the function __autoload($className) to setup.phtml
  
Line 16: Line 18:
  
 
6) Set up client on the image server and add to setup.phtml:
 
6) Set up client on the image server and add to setup.phtml:
 +
<pre>
 
     /**
 
     /**
 
     * Now using new Image Server
 
     * Now using new Image Server
Line 30: Line 33:
 
     */
 
     */
 
     define('IS_OWNER_PW', 'Password');
 
     define('IS_OWNER_PW', 'Password');
 +
    $fileServerUrl
 +
        = ($_SERVER['HTTPS'] == 'on')
 +
        ? 'https://is0.gaslightmedia.com/'
 +
        : 'http://is0.gaslightmedia.com/';
 +
    define('FILE_SERVER_URL', $fileServerUrl);
 
     /**
 
     /**
 
     * Toolbox image URLS
 
     * Toolbox image URLS
Line 44: Line 52:
 
     * tbs1,tbs2,tbs3 (do this before uploading the image will help)
 
     * tbs1,tbs2,tbs3 (do this before uploading the image will help)
 
     */
 
     */
     define('ORIGINAL', "http://is0.gaslightmedia.com/".IS_OWNER_ID."/original/");
+
     define('ORIGINAL', FILE_SERVER_URL.IS_OWNER_ID."/original/");
     define('RESIZED', "http://is0.gaslightmedia.com/".IS_OWNER_ID."/tbs1/");
+
     define('RESIZED', FILE_SERVER_URL.IS_OWNER_ID."/tbs1/");
     define('MIDSIZED', "http://is0.gaslightmedia.com/".IS_OWNER_ID."/tbs2/");
+
     define('MIDSIZED', FILE_SERVER_URL.IS_OWNER_ID."/tbs2/");
     define('THUMB',   "http://is0.gaslightmedia.com/".IS_OWNER_ID."/tbs3/");
+
     define('THUMB', FILE_SERVER_URL.IS_OWNER_ID."/tbs3/");
     define('IMAGE_MANAGER',   "http://is0.gaslightmedia.com/".IS_OWNER_ID."/imgMgr/");
+
     define('IMAGE_MANAGER', FILE_SERVER_URL.IS_OWNER_ID."/imgMgr/");
 
+
    //  CKImage image rules
 
+
    /**
 +
    * This is the rule used to create the Maximum Allowed Size image
 +
    * we allow for CKEditor Images, which is (700x500)
 +
    *
 +
    * If the user resizes (edits) the image, it can be smaller
 +
    */
 +
    define('CKIMAGE', FILE_SERVER_URL.IS_OWNER_ID."/CKImage/");
 +
    define('CKIMAGE_ORIGINAL', TOOLBOX_ORIGINAL);
 +
    define('CKIMAGE_RESIZED', TOOLBOX_RESIZED);
 +
    define('CKIMAGE_MIDSIZED', TOOLBOX_MIDSIZED);
 +
    define('CKIMAGE_THUMB', TOOLBOX_THUMB);
 +
</pre>
 
7) add file cktoolbox.js to admin/Toolbox
 
7) add file cktoolbox.js to admin/Toolbox
  
 
8) add to function mySubmit in admin/Toolbox/edit_bus.phtml:
 
8) add to function mySubmit in admin/Toolbox/edit_bus.phtml:
var MemberToolbox =
+
<pre>
{
+
    var MemberToolbox =
    init: function()
+
 
     {
 
     {
 +
      init: function()
 +
      {
 
         if ($('#description').is('textarea')) {
 
         if ($('#description').is('textarea')) {
 
             //  Only try to replace the textarea if the
 
             //  Only try to replace the textarea if the
Line 69: Line 89:
 
                         filebrowserImageBrowseUrl : '../../Toolkit/CKImages/browser.php?folder=1',
 
                         filebrowserImageBrowseUrl : '../../Toolkit/CKImages/browser.php?folder=1',
 
                         filebrowserImageUploadUrl : '../../Toolkit/CKImages/connector.php?command=Upload',
 
                         filebrowserImageUploadUrl : '../../Toolkit/CKImages/connector.php?command=Upload',
filebrowserImageWindowWidth : '760',
+
                        filebrowserImageWindowWidth : '760',filebrowserImageWindowHeight : '500'
filebrowserImageWindowHeight : '500'
+
 
                     });
 
                     });
 
             }
 
             }
 
         }
 
         }
    }
+
    }
};
+
  };
 
+
</pre>
 
+
 
+
 
9) copy Toolkit/CKImages/ to site root
 
9) copy Toolkit/CKImages/ to site root
  
Line 85: Line 102:
 
11) copy Image folder to Toolkit
 
11) copy Image folder to Toolkit
  
12) run the Toolkit/CKImages/database/ckeditorImages.sql file against the site db.
+
12) run the Toolkit/CKImages/Database/application.sql file against the site db.
  
 
13) run psql -U postgres -E -f /usr/share/postgresql/8.2/contrib/tablefunc.sql <database> to add postgres functions
 
13) run psql -U postgres -E -f /usr/share/postgresql/8.2/contrib/tablefunc.sql <database> to add postgres functions
Line 93: Line 110:
  
 
15) Remove the htmlcode() function from bottom of admin/Toolbox/edit_bus and edit_bus_category.phtml
 
15) Remove the htmlcode() function from bottom of admin/Toolbox/edit_bus and edit_bus_category.phtml
 +
 +
 +
'''To get the toolbox image upload in sync:'''
 +
Remove the old defines for ORIGINAL etc from setup.phtml
 +
 +
Replace old process_image function with new from demo
 +
 +
Mod the case Update  in admin/toolbox/update_bus_category and update_bus to call the image server
 +
 +
Mod the case Insert. Change $image_name to $image_name = GLM_TOOLBOX::process_image('image');
 +
 +
Mod the case Delete. Replace the unlinks with the Image server functions

Latest revision as of 09:35, 12 October 2012

This checklist upgrades a site from the FCKeditor to CKEditor using Pear Libraries

NOTE: Not for sites on WS1

1) Verify GLM_APP_BASE and GLM_APP_BASE_URL is defined in setup.phtml

2) add to the top function in setup.phtml (or setup_functions.phtml)

	<script type="text/javascript" src="'.GLM_APP_BASE_URL.'ckeditor/current/ckeditor.js"></script>   
	<script type="text/javascript" src="'.GLM_APP_BASE_URL.'libjs/jquery-1.3.2.min.js"></script>     
	<script type="text/javascript" src="./cktoolbox.js "></script>  

3) Add the function __autoload($className) to setup.phtml

4) add the global variable, $flexyOptions to setup.phtml

5) add $dbh to setup

6) Set up client on the image server and add to setup.phtml:

    /**
     * Now using new Image Server
     * http://is0.gaslightmedia.com/admin
     * setup new owner with owner_id and owner_pw
     * MUST BE DONE BEFORE uploading any images
     */
    /**
    * IS_OWNER_ID owner_id from image server config
     */
    define('IS_OWNER_ID', 'Owner');
    /**
     * IS_OWNER_PW owner_pw from image server config
     */
    define('IS_OWNER_PW', 'Password');
    $fileServerUrl
        = ($_SERVER['HTTPS'] == 'on')
        ? 'https://is0.gaslightmedia.com/'
        : 'http://is0.gaslightmedia.com/';
    define('FILE_SERVER_URL', $fileServerUrl);
    /**
     * Toolbox image URLS
     * NOTE: these don't change
     * There are 4 global "image styles"
     * original = used for original images no processing
     * tbs1     = used to be resized
     * tbs2     = used to be midsized
     * tbs3     = used to be thumb
     * check on http://is0.gaslightmedia.com/admin under owner _SYSTEM_
     * for their sizes
     * if you need a different size you'll need to create image style for 
     * your owner with new sizes just use one of set style names
     * tbs1,tbs2,tbs3 (do this before uploading the image will help)
     */
    define('ORIGINAL', FILE_SERVER_URL.IS_OWNER_ID."/original/");
    define('RESIZED', FILE_SERVER_URL.IS_OWNER_ID."/tbs1/");
    define('MIDSIZED', FILE_SERVER_URL.IS_OWNER_ID."/tbs2/");
    define('THUMB', FILE_SERVER_URL.IS_OWNER_ID."/tbs3/");
    define('IMAGE_MANAGER', FILE_SERVER_URL.IS_OWNER_ID."/imgMgr/");
    //  CKImage image rules
    /**
     * This is the rule used to create the Maximum Allowed Size image
     * we allow for CKEditor Images, which is (700x500)
     *
     * If the user resizes (edits) the image, it can be smaller
     */
    define('CKIMAGE', FILE_SERVER_URL.IS_OWNER_ID."/CKImage/");
    define('CKIMAGE_ORIGINAL', TOOLBOX_ORIGINAL);
    define('CKIMAGE_RESIZED', TOOLBOX_RESIZED);
    define('CKIMAGE_MIDSIZED', TOOLBOX_MIDSIZED);
    define('CKIMAGE_THUMB', TOOLBOX_THUMB);

7) add file cktoolbox.js to admin/Toolbox

8) add to function mySubmit in admin/Toolbox/edit_bus.phtml:

    var MemberToolbox =
    {
      init: function()
      {
        if ($('#description').is('textarea')) {
            //  Only try to replace the textarea if the
            //  CKEditor is compatible w/ the browser.
            if (CKEDITOR.env.isCompatible) {
                CKEDITOR.replace('description',
                    {
                        toolbar : 'Default',
                        width : 570,
                        height : 400,
                        filebrowserImageBrowseUrl : '../../Toolkit/CKImages/browser.php?folder=1',
                        filebrowserImageUploadUrl : '../../Toolkit/CKImages/connector.php?command=Upload',
                        filebrowserImageWindowWidth : '760',filebrowserImageWindowHeight : '500'
                    });
            }
        }
     }
   };

9) copy Toolkit/CKImages/ to site root

10) add Common.php and FormBuilder.php to the Toolkit folder

11) copy Image folder to Toolkit

12) run the Toolkit/CKImages/Database/application.sql file against the site db.

13) run psql -U postgres -E -f /usr/share/postgresql/8.2/contrib/tablefunc.sql <database> to add postgres functions

14) Replace description instances where textarea(fn) is called with: echo '<td><textarea name="description" id="description" cols="60" rows="60">'.$value.'</textarea></td>'; in edit_bus and edit_bus_category

15) Remove the htmlcode() function from bottom of admin/Toolbox/edit_bus and edit_bus_category.phtml


To get the toolbox image upload in sync: Remove the old defines for ORIGINAL etc from setup.phtml

Replace old process_image function with new from demo

Mod the case Update in admin/toolbox/update_bus_category and update_bus to call the image server

Mod the case Insert. Change $image_name to $image_name = GLM_TOOLBOX::process_image('image');

Mod the case Delete. Replace the unlinks with the Image server functions