Now i doubt it has crossed anyone’s mind to use CakePHP to create a custom content management system (CMS). Even though you’re not designing a full blown CMS, sometimes it’s nice to give novice users a way to create HTML content for a website or web application. The simplest way to do this is to integrate a WYSIWYG (What You See Is What You Get) editor.
When it comes to WYSIWYG editors, they are a dime a dozen. There is of course the world famous TinyMCE. There is already an article in the bakery on how to use TinyMCE with CakePHP. There’s htmlArea and even openWYSIWYG.
Although I generally love TinyMCE, for my last project I needed to give the user the option to upload images. FCKeditor is the only editor that offers this functionality for free. Some say that it’s bloated, but you can always trim it down to only what you need. Actually the new (October 10th, 2007) version is pretty snazzy. They’ve done away with the font tag and just made it a lot cleaner.
Dump It In And Configure
Pretty simple. You download FCKeditor and dump it in the webroot/js folder. That’s it. How easy is that? If you want to get file and image uploads working, there’s a small configuration that you need to change.
- Find the following file: fckeditor\editor\filemanager\connectors\php\config.php
- Set $Config['Enabled'] to true.
- Set $Config['UserFilesPath'] to the path that you’re browsing to, relative to the root folder. If you’re going straight to the images folder, and not allowing users to browse elsewhere, this needs to be ‘/images’. This is what it uses to create the src and href attributes of your tags, so make sure they match what they should.
- Most importantly, $Config['UserFilesAbsolutePath'] needs to point to the absolute path. You could get away with not entering it, but then your URLs come out all funky.
- Check the configurations at the bottom of the file to make sure they match what you want. For example, I usually change $Config['FileTypesPath']['Image'] to map to images instead of image.
Set Up the Element
Now there is an article in the bakery that talks about integrating CakePHP with FCKeditor. They use a fancy element that replaces only the textarea you want it to.
Well, this was written for CakePHP 1.1 and the modifications listed for CakePHP 1.2 doesn’t work for me. In any case, it’s not that important. I just use an element that replaces all TextAreas on the screen. Things are simpler that way :D.
So here’s my element: fckeditor.ctp:
[JAVASCRIPT] [/JAVASCRIPT]
I simply dump this right after my $form->end() or something like that. It doesn’t really matter.
An there you have it. CakePHP and FCKEditor. Have fun with it.
If you're new here, you may want to subscribe to my Full RSS feed. Thanks for visiting!
Lynn (2)
Alan Whitney (1)
Benjamin Sterling (1)
choncon (1)
Chris (1)
denis (1)
dental (1)
incremen (1)
Jacklee (1)
Hi
interesting, but I cannot get it to work with Cake beta from January: I am using the same download of FCKeditor you are using too (october 2007).
I get a couple of errors - FCKEditor si nto defined, and if I add a Script tag linking to the fckeditor directory it gives me an error from Cake as if it thinks there is a missing Js Controller.
:/
I am not sure if I also need to add a call to the FCKEditor script source — I realise you have a basepath in your function to handle this, but it is not working for me.
any ideas?
should I remove certain files from the fckeditor directory ? Like the .html ones etc?
it’s OK I got it; you need to add this in the view (not the layout!) before the renderElement is called:
echo $javascript->link(’fckeditor/fckeditor’,false);
which utilises the scripts for layout, and is placed into the head of the HTML this way. Thanks!