Skip navigation

Custom Installation

Installation Options

Unpack then move the rgeEditor folder within the administration directories on your server, the location can be of your choosing but the config_rgeEditor.js file will need to be configured for this location.

Within your administration php code, you will need to add the link to the config_rgeEditor.js (preferably in the head of your admin html) located within the rgeEditor directory in your install location.

You will need to locate the textarea object utilised by any default editor that may already exist (TinyMCE / CKEditor etc) and take note of its unique ID. Dependent on the editor you currently have, you will need to disable it / remove or comment the javascript code that initiates the editor. 

Generally, at the same location in your javascript code that an existing editor is initiated, you can add the function call to initiate rgeEditor using the ID reference from the aforementioned textarea. createRgeEditor('textAreaID',{'value':'Launch Editor','class':'CssClassForButton','id':'newIdForButton','access':'Administrator'}); The CssClassForButton can be a new or an existing class used inside your CMS for button styling or one you would like to create for the rgeEditor launch button. 

The newIdForButton is a unique ID (anything that you like, but ensure it is unique) that will assigned to the button. The access levels within the custom installation of rgeEditor are preset to: Administrator, Editor, Author and Contributor. If you want to utilise these access levels, dynamically cross matching them to any your CMS may have or you could simply set different access levels for different instances of the editor - you can do so within the function call by changing:  'access':'xxxxx'.

Configuration Notes

Once your rgeEditor folder has been placed and uploaded within your administration area, you can access our configuration helper file.
http:// [your domain here] / [ your admin paths ] /rgeEditor/rgeConfig_generator.php

Configuration options:

You will be given a unique KEY for your account that corresponds to your registered domains with us, enter this here. Your websites full URL including http / https The relative path from the CMS administration to the rgeEditor directory The absolute or relative path to the rgeImgEditor directory The relative or absolute path to the root Returns file locations from the resource manage either an absolute path or a relative path from the root Default is EN, other languages will be available soon The absolute or relative path to the rgeTemplates.xml (or other file) Category name within templates file to initially display Array of absolute paths to all of the CSS files required by your website / webpage If you are editing content elements as opposed to pages, you may require the "wrapper" to be assigned specific classes to ensure inheritance is adhered to, ensuring your content is displayed correctly. You cannot use #id as a wrapper, it must be class based. Boolean, true or false, default true. Display the inline tools when editing text. Within your CMS you may be able to create an output in JSON format detailing the sitemap / page links. This will enable you to select specific pages as links from within the create / edit link dialogue box.
 An example output:
{"list":[{"title":"Home","path":"/Home"},{"title":"About Us","path":"/About Us"},{"title":" - Contact Us","path":"/About+Us/Contact+Us"},{"title":"How it Works","path":"/How it Works"}]}
You can define multiple colours as available options within the editor either as named css colours, hex values, rgb or rgba values in an array such as: ['teal','gold','black','#fff','rgba(255,100,25,0.5)','darkGrey','rgb(0,255,150)'] (Any files such as XML, JS or CSS you would like to be editable from directly within the rgeEditor environment can be passed here as an array of URLS, names and fie types [ html, javascript, xml ]. These files must have the permissions set correctly [ 7 5 5 ] to allow the server to open, edit and save. This is an extremely useful tool, especially during the development process, but may not be required once the site is live and could cause security issues if left open. The local path from the root to rgeFileManager directory The local path from the root to the plugin.js file Boolean, true or false. Enabling you to override the rgeEditor logo and title. Full URL to the image file (max 320px wide by max 320px high) Replacement title for the editor Boolean, true or false. Full URL to a demo control file, the rgeEditor basic demo is at: http://www.rgeeditor.ninja/build/1.0/rgeDemo.js An array of preset width and height canvas sizes for the Image uploader, enabling you to customise the preset cropping sizes.

Click Generate file

Then copy the two sections from the generated code and replace the corresponding code blocks within config_rgeEditor.js and upload to your server. If all has gone well... rgeEditor should now work. 

Other Configuration Files

This install is set up on the premise that your administration directory is on the root, and is called 'admin'. If this is not the case you will need to ensure that the paths are configured correctly in the config_rgeEditor.js file (above) for any referenced resources within the rgeEditor directory.

There are two additional config.php files that reside within the rgeImgEditor  and rgeFileManager directories within the rgeEditor installed directory. Both of these files contain several strings that will need updating to match your admin file path / rgeEditor installation location.

Added Security

If you’re administration area is not behind a protected folder and relies on sessions / cookies for security, then you will need to add the code: includes ('rgeeditor/includes/rgeAddedSecurity.php'); - ensuring the pathing is correct within the administration php code to this file. This file requires that you add both your USERKEY (with spaces either side as noted) and a secret phrase. 

Within the file > rgeEditor > includes > rgeSecurity.php you will need to uncomment the code (as noted in the file) lines 23 to 27, doing this will add another layer of security within rgeEditors file management functions. You will also need to add your USERKEY (with spaces either side as noted) and the exact phrase used in aforementioned file.

Other Options

The resource manager can be access from outside of rgeEditor if you have other elements within your CMS that may require an image or file upload. You can access this by including the below code into your administration javascript (updating the path to the rgeEditor directory) and use the getImage function call, passing the input object ID - this will allow the resource manager to return the file path of the chosen uploaded or selected file and set the value of the object. These functions rely on jQuery for object selection and window width/height detection - they can be easily adapted to work without jQuery if your administration area does not support it.

function getImage(id){ var i = window.open('rgeEditor/rgeImgEditor/index.php?myID='+id+'','_win','width='+($(window).width()*0.9)+',height='+($(window).height()*0.9)); }
function thisImage(url,myid){ $('#'+myid).val(url); } 

Then call getImage('myInputObjectId'); to initiate a new pop-up window that will return the image / resource path back using the thisImage() function. 


Download the rgeEditor
Custom Install in ZIP format

Download Now