HTML editor with image browser

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

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 10:54PM by Piet van Zanten.

Added: Deployment notes

cool



Edited 1 time(s). Last edit at 08/13/2013 04:00PM by Allard.

Hi!
How about security?
In your case any user can upload files to your directory.

<script>alert('a');</script>