WYBISYG – What You Bake Is What You Get – CakePHP + FCKEditor

XHTML
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.

  1. Find the following file: fckeditor\editor\filemanager\connectors\php\config.php
  2. Set $Config[‘Enabled’] to true.
  3. 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.
  4. 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.
  5. 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.

Comments

  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?

  2. 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!

  3. Joshan John says:

    For your info.
    Now the FCKEditor is changed to CKEditor with the relase of CKEditor 3.0.
    Integrating latest version of FCKEditor(CKEditor) with cake php is very easy. You
    can see the simple steps here.
    Integrating CKEditor with CakePHP

  4. I have inserted Ckeditor 3.x in my page and i submit my form data (along with the text area)to the controller. I am trying to save data to Mysql database but not able to save. I wonder if this is a correct way of doing it.

    Form name = Admin
    Field name = content
    Controller name = Admins
    Modelname = Admin

    mycontroller code:
    $grn3 = $this->data[‘Admin’][‘content’] ;
    $this->Session->setFlash($grn3);
    $this->Admin->set($this->data ); //setting data to model
    $this->Admin->saveField(‘content’, $grn3); //saving single field

    Setflash method flashes the data content, but save is not working. I am not sure if this is the way of saving text editor data to database. Please show me how to save editor data to datatbase.

    Thankx
    John M.