Diese Seite mit anderen teilen ...

Informationen zum Thema:
Forum:
WebDev Solutions
Beiträge im Thema:
5
Erster Beitrag:
vor 5 Jahren, 8 Monaten
Letzter Beitrag:
vor 2 Jahren, 9 Monaten
Beteiligte Autoren:
Piet van Zanten, hehe222222, Allard, Alexander S.

HTML editor with image browser

Startbeitrag von Piet van Zanten am 05.06.2012 14:04

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

Antworten:

Added: Deployment notes

von Piet van Zanten - am 06.06.2012 16:25
cool

von Allard - am 13.08.2013 13:57
Hi!
How about security?
In your case any user can upload files to your directory.

von Alexander S. - am 27.08.2013 18:02
alert('a');

von hehe222222 - am 15.05.2015 09:33
Zur Information:
MySnip.de hat keinen Einfluss auf die Inhalte der Beiträge. Bitte kontaktieren Sie den Administrator des Forums bei Problemen oder Löschforderungen über die Kontaktseite.
Falls die Kontaktaufnahme mit dem Administrator des Forums fehlschlägt, kontaktieren Sie uns bitte über die in unserem Impressum angegebenen Daten.