Simple FCK Editor helper

by psykro
FCK Editor is my favourite HTML editor, mainly used for website cms. There is already another great article on the topic (http://bakery.cakephp.org/articles/view/using-fckeditor-with-cakephp) which helped me a great deal, but I wanted to find a simpler way to create a reusable FCK editor within CakePHP.

Installation

1) Copy fckeditor folder to app/webroot/js/
2) Copy fckeditor.php, fckeditor_php4.php, fckeditor_php5.php to app/vendors/

Setup


1) Create app/views/helpers/fck.php with the following code


App::import('Vendor', 'fckeditor');

class FckHelper extends AppHelper { 
               
    /**
    * creates an fckeditor textarea
    * 
    * @param array $namepair - used to build textarea name for views, array('Model', 'fieldname')
    * @param stirng $basepath - base path of project/system
    * @param string $content
    */
    function fckeditor($namepair = array(), $basepath = '', $content = ''){
        $editor_name = 'data';
        foreach ($namepair as $name){
            $editor_name .= "[" . $name . "]";
        }

        $oFCKeditor = new FCKeditor($editor_name) ;
        $oFCKeditor->BasePath = $basepath . '/js/fckeditor/' ;
        $oFCKeditor->Value = $content ;
        $oFCKeditor->Create() ;            
    }      


2) add configuration options as described at http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/PHP#Configuration_Options or in /js/fckeditor/fckconfig.js

Usage


1) Add the fck helper to your controller

var $helpers = array('Html', 'Form', 'Fck');

2) Use the following line in your views to display the fckeditor

echo $fck->fckeditor(array('Model', 'field'), $html->base, $yourContentVariable);

This is my very first attempt at creating a component for Cake so any comments/suggestions are welcome.

Edit: Thanks to all the comments and suggestions, they helped in making this a better article

Report

More on Helpers

Advertising

Comments

  • AlbAsk posted on 03/04/10 02:06:50 AM
    Hello,

    I'm newbie in cakePhp.

    I'm getting this error, even after I created the file as suggested :

    Error: The helper class FckHelper can not be found or does not exist.

    Error: Create the class below in file: app\views\helpers\fck.php

    class FckHelper extends AppHelper {

    }
    ?>

    What could be the problem?
    • psykro posted on 03/04/10 02:32:02 AM
      Hello,

      I'm newbie in cakePhp.

      I'm getting this error, even after I created the file as suggested :

      Error: The helper class FckHelper can not be found or does not exist.

      Error: Create the class below in file: app\views\helpers\fck.php

      class FckHelper extends AppHelper {

      }
      ?>

      What could be the problem?

      Please check that a) you have created the file app/views/helpers/fck.php and that b) you have the code outlined in step one in that file.
  • double07 posted on 07/08/09 11:42:30 PM
    You could also use:
    echo $fck->fckeditor(array('Post', 'body'), $html->base, $this-data['Post']['body']);

    i.e. so you don't have to define a separate variable in your controller.

    PS Nice work Jonathan, a lot simpler than other implementations I used in the past.
  • jorgepedret posted on 07/08/09 07:53:34 PM
    Hi, this might me a noob question since I don't see anybody asking it, but I'm getting a Missing Controller Error for this url: /js/fckeditor/editor/fckeditor.html?InstanceName=data[Product][description]&Toolbar=Default

    I guess is something I have to change in the routes, or in the .htaccess, but I haven't found any information regarding this problem.

    Is it something stupid I'm doing? Please if anybody can gimme a hand I'd appreciate it!

    Thanks! :)
  • jorgepedret posted on 07/08/09 07:52:27 PM
    Hi, this might me a noob question since I don't see anybody asking it, but I'm getting a Missing Controller Error for this url: http://pgm/js/fckeditor/editor/fckeditor.html?InstanceName=data[Product][description]&Toolbar=Default

    I guess is something I have to change in the routes, or in the .htaccess, but I haven't found any information regarding this problem.

    Is it something stupid I'm doing? Please if anybody can gimme a hand I'd appreciate it!

    Thanks! :)
    • psykro posted on 07/09/09 03:22:51 PM
      Hi, this might me a noob question since I don't see anybody asking it, but I'm getting a Missing Controller Error for this url: http://pgm/js/fckeditor/editor/fckeditor.html?InstanceName=data[Product][description]&Toolbar=Default

      I guess is something I have to change in the routes, or in the .htaccess, but I haven't found any information regarding this problem.

      Is it something stupid I'm doing? Please if anybody can gimme a hand I'd appreciate it!

      Thanks! :)

      Jorge, can you describe the steps you did to get that error, maybe I can duplicate it on my side and see whats going on.
      • MarkCoatsworth posted on 08/06/09 09:43:04 AM
        Hi, this might me a noob question since I don't see anybody asking it, but I'm getting a Missing Controller Error for this url: http://pgm/js/fckeditor/editor/fckeditor.html?InstanceName=data[Product][description]&Toolbar=Default

        I guess is something I have to change in the routes, or in the .htaccess, but I haven't found any information regarding this problem.

        Is it something stupid I'm doing? Please if anybody can gimme a hand I'd appreciate it!

        Thanks! :)

        Jorge, can you describe the steps you did to get that error, maybe I can duplicate it on my side and see whats going on.

        Jorge, I was having the same issue. You probably followed the other set of FCK Editor article first (like i did) which work a bit differently...

        The problem was that I had copied my FCK files (fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml, and /editor subfolder) directly into /app/webroot/js.

        You need to move these files into a fckeditor subfolder: /app/webroot/js/fckeditor. After this it should work.
  • DanNew posted on 07/05/09 04:59:04 PM
    Great article setup in no time atall :) One question - probably a stupid newb question ;) How do I get the data back? Or more specifically use it just like the normal $html->input('body') I have this in my add view;


    echo $fck->fckeditor(array('Model', 'body'), $html->base, $yourContentVariable); 

    From looking at it, and from what I understand it should just put the data into body? But I don't get anything. Also what is $yourContentVariable used for?

    Thanks for writing this tutorial.
    • psykro posted on 07/06/09 02:55:49 PM
      Great article setup in no time atall :) One question - probably a stupid newb question ;) How do I get the data back? Or more specifically use it just like the normal $html->input('body') I have this in my add view;


      echo $fck->fckeditor(array('Model', 'body'), $html->base, $yourContentVariable); 

      From looking at it, and from what I understand it should just put the data into body? But I don't get anything. Also what is $yourContentVariable used for?

      Thanks for writing this tutorial.

      Hey Daniel

      If you have a 'posts' table (and therefore a 'posts' model) with a 'body' field you could use the following in your add view

      echo $fck->fckeditor(array('Post', 'body'), $html->base, 'Enter your body content here');
      This will show the user an FCK editor with the line 'Enter your body content here' in the text area.

      The third parameter is the default display content of the fck editor.

      If you wanted to put this into your edit view (in order to edit saved data) you would have to setup that variable on your controller

      So in your posts_controller.php, if you have baked your view, you will have something like this


      if (empty($this->data)) {
          $this->data = $this->Post->read(null, $id);
      }
      You just need to change it to


      if (empty($this->data)) {
          $this->data = $this->Post->read(null, $id);
          $this->set('postBody', $this->data['Post']['body']);
      }

      which sets the variable $postBody for use in the view and then in your edit view

      echo $fck->fckeditor(array('Post', 'body'), $html->base, $postBody);
      Hope this makes sense.
  • Fanck posted on 06/14/09 05:35:11 AM
    Hi,

    It would be nice if it worked from the general vendors/js directory, so it would be shared over many application without having multiple fckeditor.

    Right now if I try putting it there, I got a "Missing JsController" until I put "RewriteRule ^vendors/.* - [L]" in .htaccess and change $basepath accordingly.

    I'd rather prefer not to have to change .htaccess ^^
  • anilkumar329 posted on 06/03/09 06:57:57 AM
    how can i set fck properties according to requirement..
  • yczhang posted on 05/22/09 02:45:29 PM
    Hello Jonathan Bossenger (psykro),
    I followed your post, but I met such error:

    Fatal error: Class 'FCKeditor' not found in /var/www/html/Makatto.com/Makatto.com/cake/app/views/helpers/fck.php on line 19

    line 19 is:
    $oFCKeditor = new FCKeditor($editor_name) ;

    I tried to move line 20 before line 19, it doesn't work eitheer.
    $oFCKeditor->BasePath = $basepath . '/js/fckeditor/' ;

    my js files are in:
    app/webroot/js/fckeditor/fckconfig.js
    app/webroot/js/fckeditor/fckeditor.js
    app/webroot/js/fckeditor/fckstyles.xml
    app/webroot/js/fckeditor/fcktemplates.xml
    app/webroot/js/fckeditor/editor/*

    Did I miss anything important?

    Any suggest will be appreciated!
    • psykro posted on 06/14/09 02:17:25 PM
      Hello Jonathan Bossenger (psykro),
      I followed your post, but I met such error:

      Fatal error: Class 'FCKeditor' not found in /var/www/html/Makatto.com/Makatto.com/cake/app/views/helpers/fck.php on line 19

      line 19 is:
      $oFCKeditor = new FCKeditor($editor_name) ;

      I tried to move line 20 before line 19, it doesn't work eitheer.
      $oFCKeditor->BasePath = $basepath . '/js/fckeditor/' ;

      my js files are in:
      app/webroot/js/fckeditor/fckconfig.js
      app/webroot/js/fckeditor/fckeditor.js
      app/webroot/js/fckeditor/fckstyles.xml
      app/webroot/js/fckeditor/fcktemplates.xml
      app/webroot/js/fckeditor/editor/*

      Did I miss anything important?

      Any suggest will be appreciated!

      Did you do step 2 of the Installation?

      2) Copy fckeditor.php, fckeditor_php4.php, fckeditor_php5.php to app/vendors/ 
  • beeman posted on 05/03/09 04:30:02 PM
    Great helper, it worked instantly...

    Now i only need a way to secure the PHP connector so it uses CakePHP authentication.
  • psykro posted on 04/02/09 02:24:27 PM
    Thanks for all the suggestions, comments etc. I have not had time to keep up with the comments, but I am going to be trying this out in the new CakePHP 1.2 stable soon, so I'll post any changes that I find.
  • kener posted on 02/12/09 04:38:09 PM
    Hi Jonathan, thanks for share your helper, very simple and works, i only have one error when i try to create folders for upload images from the image file manager of the fck, it was "Error creating folder redirect:/index.php/", and i cant create folders for upload my images, so this error was because the rewrite rules of the .htaccess file in the root need a little hack he he, so i add the following line:


    RewriteRule ^files/posts/.* - [L]

    This tells Apache that when it gets a request for userfiles/(the fck images directory), it should skip all further rule processing and handle the userfiles/ request as-is. That seemed to fix it.

    Finally always i has a warning from php in the views when i put the echo for the helper like this:

    echo $fck->fckeditor(array('Model', 'field')); 

    So i added a default value to the second parameter of the helper:

    Helper Class:

    <?php 
    function fckeditor($namepair$content ""){
    ...
    }
    ?>

    Sometimes I don't need to pass any value to the content var :-) and i don't want to increase my php logs with lots of warnings.

    thanks, sorry my bad English, I'm still learning he he! happy baking!
    • psykro posted on 04/04/09 06:37:25 AM
      Hi Jonathan, thanks for share your helper, very simple and works, i only have one error when i try to create folders for upload images from the image file manager of the fck, it was "Error creating folder redirect:/index.php/", and i cant create folders for upload my images, so this error was because the rewrite rules of the .htaccess file in the root need a little hack he he, so i add the following line:


      RewriteRule ^files/posts/.* - [L]

      This tells Apache that when it gets a request for userfiles/(the fck images directory), it should skip all further rule processing and handle the userfiles/ request as-is. That seemed to fix it.

      Finally always i has a warning from php in the views when i put the echo for the helper like this:

      echo $fck->fckeditor(array('Model', 'field')); 

      So i added a default value to the second parameter of the helper:

      Helper Class:

      <?php 
      function fckeditor($namepair$content ""){
      ...
      }
      ?>

      Sometimes I don't need to pass any value to the content var :-) and i don't want to increase my php logs with lots of warnings.

      thanks, sorry my bad English, I'm still learning he he! happy baking!

      Thanks for the tips, I have altered the fck function accordingly. I am not currently using the editor for image uploads but if I do I will refer to your notes.
  • blackmouse posted on 01/15/09 03:32:53 AM
    I made step by step your guide, but it's error. I used cakephp 1.2.
    ---------------------ERROR----------------------------------------


    Object not found!

    The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

    If you think this is a server error, please contact the webmaster.
    Error 404
    localhost
    01/15/09 16:24:35
    Apache/2.2.8 (Win32) DAV/2 mod_ssl/2.2.8 OpenSSL/0.9.8g mod_autoindex_color PHP/5.2.5
    ----------------------------------------------------------END


    Thank for your suggestion!
  • mudgilgaurav posted on 01/12/09 11:49:19 PM
    Hi

    I have gone through your article and i have integrated my FCK editor successfully. But when i upload any page of my website it gives my the following javascript error

    "Error: syntax error
    Source File: http://192.168.1.212/js/fckeditor.js
    Line: 1
    Source Code:
    "

    I could not figure out why i am getting this error.

    Please suggest for the same.

    Thanks
  • mhagedon posted on 11/19/08 12:45:56 PM
    It might be better to have $oFCKeditor->CreateHtml(); ?zw(ukj^Zܡם $oFCKeditor->Create();
    CreateHtml() returns the editor to the function or view that called it, while Create() echoes the editor straight from your helper.

    Minor point, otherwise this is excellent work and I was able to use it. Thanks!
    • psykro posted on 04/04/09 06:36:08 AM
      It might be better to have $oFCKeditor->CreateHtml(); ?zw(ukj^Zܡם $oFCKeditor->Create();
      CreateHtml() returns the editor to the function or view that called it, while Create() echoes the editor straight from your helper.

      Minor point, otherwise this is excellent work and I was able to use it. Thanks!

      If I use CreateHTML instead of Create then the editor does not display. Perhaps I am using it wrong?
      • Gottaname posted on 04/26/09 08:00:53 AM
        It might be better to have $oFCKeditor->CreateHtml(); ?zw(ukj^Zܡם $oFCKeditor->Create();
        CreateHtml() returns the editor to the function or view that called it, while Create() echoes the editor straight from your helper.

        Minor point, otherwise this is excellent work and I was able to use it. Thanks!

        If I use CreateHTML instead of Create then the editor does not display. Perhaps I am using it wrong?

        Use

        return $oFCKeditor->CreateHtml();

        CreateHtml does not echo the code out so you need to use a function return to send it out
  • stevieboy posted on 11/10/08 10:38:05 AM
    I think you can overcome the "root"-directory limitation by using the Helper HTML and its property base. This way you could determine the url-path to the app including subdirectories from the root.

    HTH,
    Stevie
    • psykro posted on 04/04/09 06:35:10 AM
      I think you can overcome the "root"-directory limitation by using the Helper HTML and its property base. This way you could determine the url-path to the app including subdirectories from the root.

      HTH,
      Stevie

      Thanks for the tip, altered the code accordingly
login to post a comment.