Creating Your Own File Browser for CKEditor in PHP

I am going to talk to anyone out there about how you can create your own file browser for CKEditor. Before you say it CKEditor to provide a file browser and uploader called CKFinder that you can purchase for $59. This article is not about how to develop a file browser to replace this because you don’t want to pay for CKFinder as frankly CKEditor on it’s own is worth paying that for. No, this article is about writing your own file browser because you need something different (although there is no reason why you couldn’t build your own). My only gripe with the boys at CKEditor is although there support guide are detailed they aren’t quite there yet, but as they are probably spending most of their time developing a great product who am I to complain. Instead I am happy to try and help them out with this post.

Firstly it is useful if you get a feel for how CKEditor recommend you to develop your own file browser and uploader. If you go to their support article on it here and have a quick read.

I am also only showing you an example for the image upload area, but you can change this for the flash or general browser. It will work the same. I have tested it.

I use the JQuery adapter to initiate CKEditor, so I will start their with my initiation code (for more information on this visit Initiating CKEditor with JQuery and Using JQuery UI Dialog):

The filebrowserImageBrowseUrl is the URL that you would use. The content displayed for this page is displayed in the pop-up that appears when you click the browse button. Adding this config variable will add the browse button to the image dialog. The other URLs you can also develop are:

• filebrowserBrowseUrl
• filebrowserImageBrowseUrl
• filebrowserFlashBrowseUrl
• filebrowserUploadUrl
• filebrowserImageUploadUrl
• filebrowserFlashUploadUrl

I am going to keep things simple and give you the basics, so you can take this further and will simply add a couple of links to the pop-up that will load into the image dialog.

My image PHP file looks like this:

  Google Logo

  WordPress Logo

So let’s go through it!

There are two links that when clicked call the loadFile function passing an image URL. The first line of the function is where I cam so stuck with the documentation from CKEditor. In their documentation it says:

window.opener.CKEDITOR.tools.callFunction(
  funcNum, fileUrl [, data] );

The issue here is window.opener! Very messy for cross-browser compatibility. I have added a check to the DOM that then selects the right object.

The second line contains the ‘CKEditorFuncNum’ variable that is pushed to your dialog box from clicking the browse button in the image dialog box through the query string. This variable basically tells CKEditor what object you are working on and where to send the URL back to. On this line you can see the CKEditor function that passes back the object instance function through CKEditorFuncNum variable as the first parameter. The second parameter is the URL to the image file and the third parameter can be a message. I kept things simple, but you can take this further and provide a message in here if things go wrong. The message is ignored if the URL parameter is not blank, but if the URL parameter is blank the message is displayed in an alert box. This could be useful if you develop your own upload tool. It is this line that sends the URL back to the image dialog box.

The third line simply closes our dialog box.

That should be that in a nutshell. Hopefully it will give you enough to overcome the issues I had to start with. Let me know if you need any further help.

Installing Image Magick and Imagick for PHP for MAMP

Now this is one topic I am glad I have got through. This caused me no end of grief.

I think before we get to the nitty gritty of installing and configuring the software it is important to understand what Image Magick and Imagick are. I thought at first it was the same thing. Oh how wrong!

Image Magick is a command-line suite of tools to manipulate images. For further information on this visit the Image Magick site.

Imagick is an extension of PHP that consists of a number of classes and functions for working with Image Magick.

It basically means we need to install Image Magick first and then compile the Imagick extension in PHP that is dependent on Image Magick.

1. Installing MacPorts

To make life easy I installed MacPorts, which made it very easy to install Image Magick. You will need MacPorts in order to follow this post. Don’t worry if you haven’t installed MacPorts yet as you can find out how easy it is to install by viewing my “Installing MacPorts” post.

Please note that if you have Mac OS X 10.5.x or later you need to have Xcode 3.1.4 installed or later.

EDIT: Big thank you to Mike Puchol and his article Getting MAMP 1.9 to work with Image Magick, imagick.so and other flora for the next snippet for making MacPorts build universal binaries.

vi /opt/local/etc/macports/variants.conf

Add the following to the end of the file:

+universal

Save the file:

?wq

2. Installing Image Magick

Using MacPorts we simply need to enter:

sudo port install ImageMagick

Now I would suggest putting your feet up, grab something to eat, grab a beer or something else more interesting as this process takes about 30 minutes to finish. There are a number of dependencies that have to be installed.

Here’s One I Prepared Earlier…

Once that is all sorted you then need to update the environment $PATH variable in your user profile. To access your profile enter:

vi ~/.profile

Enter the following line:

export PATH="$PATH:/opt/local/bin"

For more information on this see “Updating Your Export Path in OS X”.

Close terminal and re-open it again. Then test Image Magick to see if it is working:

convert -version

If you get an error then there is a problem. Drop me a comment and I will see what I can do.

3. Now Installing The Tricky Imagick!

We now need to install the Imagick extension using PECL:

sudo pecl install imagick

Is that it I hear you say? Well let me tell you that it is at this point where I lost my rag given all the problems I had. I had got so lost I even nearly turned to the dark side and tried searching on Bing! To try and help I have added the issues I had and what I did to sort them.

A Make Error Occurs

I found this issue is likely to be down to the C compiler not being present. You will notice that there is an error relating to this, but it is right at the beginning of the make output. The easiest way to check if you have the C compiler is to type:

gcc

If you get a bash error then it is not installed. You can also check to see if the /usr/bin/gcc folder exists as that is where it should be.

So, to fix this issue you simply need to install the Xcode Tools. The quickest way to do this is on the installation disc that came with your Mac. It will be under the optional installs. If you can’t find the installation disc you can download the latest Xcode tools from the Apple Developer Connection site.

32bit and 64bit Architecture

As standard, MacPorts will not build universal binaries, which is what the PHP version run by MAMP uses. And as some versions of Mac OS X like Snow Leopard use 64bit architecture this can cause an issue. To get round this you can force MacPorts to build all the universal binaries by entering:

sudo port upgrade --force installed

Like installing Image Magick this will take a bit of time, so kick back and relax.

WARNING: php appears to have a suffix…

This is due to the PHP path being referenced twice or more in the environment variable $PATH. This is probably due to the /usr/bin and /Applications/MAMP/bin/php5.3/bin folders being present when they effectively point to the same place. You just need to remove the MAMP path. Restart terminal and you should be good to go. Don’t forget to check your $PATH enter:

echo $PATH

4. Are We There Yet?

Right, so the install of the Imagick extension has been successful. If so, you should see a message saying where the .so file was installed. You now need to copy that file over to the MAMP files:

cp /usr/lib/php/extensions/no-debug-non-zts-20060613/imagick.so /Applications/MAMP/bin/php5.3/lib/php/extensions/no-debug-non-zts-20090626/imagick.so

The above should be similar to yours, but will slightly differ, but you should be able to work it out.

The last bit then. We just need to add the new extension to the php.ini file. In MAMP select File -> Edit Templates and select the php.ini file you are using for your version. In the file add the Imagick extension:

extension=imagick.so

Apply the changes to MAMP, which should restart Apache and MySQL. Job done!!!

It has been emotional! This was a tough one, so if you need any help or have any suggestions just drop me some comments.

Installing Symfony in MAMP on OS X

At the time of writing I am on a MacBook Pro with OS X 10.5.8, MAMP PRO 1.9 and Symfony 1.4.

MAMP? Have you got it and is it installed? If not why not? MAMP is for me the best development environment (Mac, Apache, MySQL, PHP) for the Mac and for £20 you can’t go wrong. It installs with minimum fuss and gives you a pretty interface to manage your local sites.

If you need MAMP in your life visit the MAMP website.

I will now assume you have MAMP installed and we are ready to go. I will also assume that you know of the Symfony PHP framework as you are here reading this. If you need more information on it visit the Symfony website. All I will say in this article is rapid web development!

Before you do anything it is very important that we rejig the PHP libraries used by MAMP. MAMP uses its own libraries and not the standard libraries installed as default in Mac OS X. This may seem trivial, but if you want more that just PHP or if you want to add a number of PHP extensions like Imagick for example then this is critical. The issues boil down to the different versions using 32bit and 64bit compilations. I discuss this in more details in “Installing Image Magick and Imagick for PHP for MAMP”.

1. Creating a Host

Once you have MAMP up and running make sure you have setup a new host for the site.

MAMP Pro Hosts Page

When you visit your new site in your Browser you should be able to see a standard MAMP page.

2. Moving PHP

Firstly move the current PHP to a different location (we don’t need to delete it altogether):

sudo mv /usr/bin/php /usr/bin/php-old

Sudo is a command used to perform operations with the security privileges of the super user and is required for a lot of the main system changes we will be making. You will need to enter your login password when requested by terminal.

Now create a link to MAMPs PHP folder in the /usr/bin/php folder. This uses symlinks (or symbolic links) and tricks the system into thinking the PHP is there without moving MAMPs PHP files.

sudo ln -s /Applications/MAMP/bin/php5.3/bin/php /usr/bin/php

Please note that I have installed MAMP and configured it to use PHP 5.3. If you have not chosen to use version 5.3 just replace that in the command with whatever you have used (probably php5).

3. Moving PEAR

Move the current installation of PEAR to a different location:

sudo mv /usr/bin/pear /usr/bin/pear-old

You may not have PEAR installed in which case skip the above step. You will still need to setup the link below though.

sudo ln -s /Applications/MAMP/bin/php5.3/bin/pear /usr/bin/pear

At this point it will be also worth doing some house cleaning! Update your PEAR channel by entering the following:

pear channel-update pear.php.net

4. Moving PECL

Move the current installation of PECL to a different location:

sudo mv /usr/bin/pecl /usr/bin/pecl-old

You may not have PECL installed in which case skip the above step. You will still need to setup the link below though.

sudo ln -s /Applications/MAMP/bin/php5.3/bin/pecl /usr/bin/pecl

5. Adding the Paths

Now we need to update the export path, so we can use the PHP, PEAR and PECL commands. For more information on this see “Updating Your Export Path in OS X”.

Open your local profile in vi by entering:

vi ~/.profile

Then add the following line into your file:

export PATH=/Applications/MAMP/bin/php5.3/bin:$PATH

Don’t forget to replace the version 5.3 with whatever version you have used.

Also remember that these paths won’t take affect until you close down terminal and re-open it. To test your paths are working type the following:

pear list-all

If you get an error then your paths are not set correctly. Drop me a comment and I will try and help.

6. Fixing MAMP Permissions

Unfortunately, there is a small known bug with the permissions used by the PHP, PEAR and PECL files in MAMP. Luckily for you I have done the hair pulling and can steer you through this. To fix the issue simply enter:

chmod -R 755 /Applications/MAMP/bin/php5.3/bin/

Again don’t forget to replace the version 5.3 with whatever version you have used.

7. Installing Symfony

You could install Symfony using the PEAR library, but I am just not comfortable with this. Any Symfony sites you build in this way then use the core files from the PEAR version of Symfony. If you use PEAR you can become stuck with that version. The reason being is that if you build a website using Symfony 1.0 and then decide for the next project you want to develop in Symfony 1.4 you will have to upgrade the PEAR library from version 1.0 to 1.4 What then happens to the site using the core files for version 1.0? I know that you can freeze the Symfony files, so the PEAR files aren’t used, but personally I just find this messy.

The PEAR Way

As always this is only my opinion on the matter, so if you do want to install the latest version of Symfony using PEAR you can do so by doing the following:

pear channel-discover pear.symfony-project.com
pear install symfony/symfony

From here you can follow the installation instructions from Symfony or you can follow my way below through the whole process.

…or I Did It My Way!

This is also how the developers at Symfony prefer you to do it. In their words: “It is not the recommended way of installing symfony, as you should prefer a dedicated installation for each of your projects.”.

My personal preference is to download the Symfony files directly from the Symfony site and go from there. You can download the latest version from the installation page at http://www.symfony-project.org/installation. I downloaded the file as a tgz file and saved it to the root directory of my local site. Create a new set of folders called lib/vendor:

cd /Applications/MAMP/htdocs/newsite/
mkdir -p lib/vendor

Remember to replace “newsite” with the directory of where your new site is stored locally.

You can create your own folder instead of lib/vendor, but this is deemed good practice and from the official Symfony instructions. Next move the tar file into the lib/vendor folder and extract it.

mv symfony-1.4.5.tgz lib/vendor/symfony-1.4.5.tgz
tar -xzvf lib/vendor/symfony-1.4.5.tgz

Then we need to rename the extracted folder to something simpler and remove the tar file:

mv lib/vendor/symfony-1.4.5 lib/vendor/symfony
rm lib/vendor/symfony-1.4.5.tgz

8. Creating a Symfony Project

Now we have installed Symfony we need to setup the project!

Make sure you are in terminal and you are in the directory of your new site. When you are there create a new project:

cd /Applications/MAMP/htdocs/newsite/
php lib/vendor/symfony/data/bin/symfony generate:project PROJECT_NAME

Remember to replace “newsite” with the directory of where your new site is stored locally. Replace PROJECT_NAME with the name of your project.

9. Configuring the Database

These next instructions are on the basis that you are going to use Doctrine instead of Propel. Doctrine and Propel are two database extraction layers that allow you to easily access and manipulate your database. Propel was used in the earlier versions of Symfony, but the developers of Symfony are now pushing Doctrine and I tend to agree with them. If you want to use Propel you can find out more how to setup Symfony with Propel by visiting the Symfony Installation Guide page.

./symfony configure:database "mysql:host=localhost;dbname=dbname" root password

There are many ways you can setup your database to work with Symfony. For more information on this see “Creating and Updating Your Database in Symfony” article.

10. Creating Your Application

Then you need to setup your first application:

./symfony generate:app frontend

You would think this would do now, but there is two more things you need to do.

1. Go back to MAMP and update the Disk location of the local site to now point to the “web” folder. It would have been something like “/Applications/MAMP/htdocs/newsite”. It now needs to be “/Applications/MAMP/htdocs/agentdunas/web” as the web folder in Symfony is the document root folder.
2. Apply the changes to MAMP PRO, which should result in Apache and MySQL being restarted.

Now if you go to the site you should see a nice formatted Symfony welcome page. Unfortunately, you won’t as Symfony’s default files are not yet tied up to our web folder! Fear not though a simple symlink should do the trick.

Not So Pretty Symfony Welcome Page

Try this:

ln -s /Applications/MAMP/htdocs/newsite/lib/vendor/symfony/data/web/sf/ web/sf

You should now see:

The Correct Symfony Welcome Page

That was a long one! As always drop me any questions or suggestions.