Welcome! Log In Create A New Profile

Advanced

HTML editor with image browser

Posted by Piet van Zanten 
Piet van Zanten
HTML editor with image browser
June 05, 2012 02:04PM
Hi,

Here's a tutorial to integrate CKEditor in Webdev 17.
To be able to upload images and select images stored on the server I found PDW File Browser, a free PHP based plugin.
This tutorial will show you how to install and configure them.

Step 1. Download CKEditor
Unzip it to a folder located below your Project_WEB folder. In this tutorial I'm assuming you are using the folder name "ckeditor".

Step 2. Download PDW File Browser
Unzip it to a folder located below your Project_WEB folder. In this tutorial I'm assuming you are using the folder name "pdw_file_browser". Now create a folder for your uploaded images: MyProject_WEB/my_images.
Finally edit the config.php file in the pdw_file_browser root folder.
Locate the UPLOAD PATH section, uncomment the "$uploadpath =" line and modify it to
$uploadpath = "/MyProject_WEB/my_images/";
Exit and save the file.

Step 3. Check if PHP is installed on your machine. If not, download and install it. I used php-5.2.17-Win32-VC6-x86.msi under Apache 2.2. Stop the Apache service before installing PHP.
In my case I had to manually edit the httpd.conf file, because the PHPIniDir was not added by the setup program.It should look like this, depending on where you installed PHP.
#BEGIN PHP INSTALLER EDITS - REMOVE ONLY ON UNINSTALL
PHPIniDir "C:\Program Files (x86)\PHP"
LoadModule php5_module "C:\Program Files (x86)\PHP/php5apache2_2.dll"
#END PHP INSTALLER EDITS - REMOVE ONLY ON UNINSTALL
Restart the Apache service.
Now with all components installed, the fun begins smiling smiley

The Webdev part
Create an multiline edit control somewhere on your page.
In the page description go to the advanced tab, Javascript tab.
Click the + Add button and browse to YourProject_WEB\ckeditor\ckeditor.js
Leave the encoding to Not defined.

Now go to the Browser Load code of your page and enter this code:
LOCAL
	sParam,sUploadDir is string 
	
sParam="/MyProject_WEB/pdw_file_browser/index.php?editor=ckeditor"
sUploadDir="/MyProject_WEB/"+"/my_images/"

JSMethod("CKEDITOR","replace",edt_Text1..Alias)   //edt_Text1 is the edit control
//JSProperty("CKEDITOR.config","filebrowserBrowseUrl")=sParam
JSProperty("CKEDITOR.config","filebrowserImageBrowseUrl")=sParam+"&filter=image
//JSProperty("CKEDITOR.config","filebrowserFlashBrowseUrl")=sParam+"&filter=flash
JSProperty("CKEDITOR.config","filebrowserWindowWidth")=1000
JSProperty("CKEDITOR.config","filebrowserWindowHeight")=720
Behold, your edit control has turned into a full blown HTML WYSIWYG editor.:cool:

For more configuration options check the CKEDITOR and the PDW file browser sites.

Deployment notes

Don't forget to set read/write rights to the pdw_file_browser/cache folder and the upload folder.

To prevent Webdev from handling the PHP files as Webdev files, add the following lines at the end of the Webdev17.conf file, located in the /etc/httpd/conf folder:
<Files YourApp_Name/pdw_file_browser>  
	ForceType None
</Files>
(this is for Apache, don't know about IIS)
The YourApp_Name is the name of your site as stated in the <Files YourApp_Name> Forcetype statement in the Webdev17.conf file.

Some tweaking.

I was not happy to have a single folder in the config.php file for all users and needed to be able to define different folders for each user. To accomplish this here are some further instructions.
Modify the pdw_file_browser\config.php as below:
// $uploadpath = "/VZTC_WEB_WEB/02303/my_images/"; // absolute path from root to upload folder (DON'T FORGET SLASHES)

// Modified PVZ : $uploadpath becomes a parameter when calling index.php
// Get upload path
if(!empty($_REQUEST['upload_path'])) {
    $uploadpath = $_REQUEST['upload_path'];
    $_SESSION['upload_path'] = $uploadpath;
} elseif (isset($_SESSION['upload_path'])) {
    $uploadpath = $_SESSION['upload_path'];
} else {
    $uploadpath = "";
}
Now we can go to Webdev and add the upload path as a parameter in code.
Note that sVerNr is a global string holding the user code, which is also the name of the users directory on the server. Also note that the upload_path parameter is added to the configuration.
LOCAL
	sParam,sUploadDir is string 
	
sParam="/MyProject_WEB/pdw_file_browser/index.php?editor=ckeditor"
sUploadDir="/MyProject_WEB/"+sVerNr+"/my_images/"

JSMethod("CKEDITOR","replace",edt_Text1..Alias)
//JSProperty("CKEDITOR.config","filebrowserBrowseUrl")=sParam+"&upload_path="+sUploadDir
JSProperty("CKEDITOR.config","filebrowserImageBrowseUrl")=sParam+"&filter=image&upload_path="+sUploadDir
//JSProperty("CKEDITOR.config","filebrowserFlashBrowseUrl")=sParam+"&filter=flash&upload_path="+sUploadDir
JSProperty("CKEDITOR.config","filebrowserWindowWidth")=1000
JSProperty("CKEDITOR.config","filebrowserWindowHeight")=720
Well, I hope this is clear and wish you happy developping.
If you have any questions or remarks, please let me know.

Regards,
Piet



Edited 2 time(s). Last edit at 06/07/2012 08:54PM by Piet van Zanten.
Piet van Zanten
Re: HTML editor with image browser
June 06, 2012 04:25PM
Added: Deployment notes
Allard
Re: HTML editor with image browser
August 13, 2013 01:57PM
cool



Edited 1 time(s). Last edit at 08/13/2013 02:00PM by Allard.
Alexander S.
Re: HTML editor with image browser
August 27, 2013 06:02PM
Hi!
How about security?
In your case any user can upload files to your directory.
hehe222222
Re: HTML editor with image browser
May 15, 2015 09:33AM
<script>alert('a');</script>
Author:

Your Email:


Subject:


Spam prevention:
Please, enter the code that you see below in the input field. This is for blocking bots that try to post this form automatically. If the code is hard to read, then just try to guess it right. If you enter the wrong code, a new image is created and you get another chance to enter it right.
Message: