Simple FCK Editor helper
This article is also available in the following languages:
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
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.
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.
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! :)
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.
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);
}
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.
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 ^^
you can edit configuration options as described at http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/PHP#Configuration_Options by adding them in the fck.php file or in /js/fckeditor/fckconfig.js. I prefer to edit the fckconfig.js file
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/
Now i only need a way to secure the PHP connector so it uses CakePHP authentication.
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:
<?phpfunction 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.
---------------------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!
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
$oFCKeditor->CreateHtml();?zw(uçkjØ^®Ø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
HTH,
Stevie
Thanks for the tip, altered the code accordingly
Comments are closed for articles over a year old