CKEditor Helper for CodeIgniter
Using CKEditor as a plugin into your CodeIgniter applications
CKEditor is a powerfull WYSIWYG text editor licensed under the GPL, LGPL and MPL open source licenses. CKEditor can easilly be added to any web page, you will find below a simple way to integrate CKeditor to your CodeIgniter applications.
Downloading CKEditor
The first step is to download the CKEditor editor package, note that the helper have only be tested over CKEditor 3.0.2. Once done, you should consider to remove the _samples and _sources directories from the uncompressed files.
Then, place the entire ckeditor directory into a /js/ folder. You can place it anywhere but remember to set the correct path when initializing the helper.
Adding the CKEditor helper for CodeIgniter
Download and place the ckeditor_helper.php file into the CodeIgniter’s system/application/helpers folder.
This helper can manage all CKEditor’s available configuration options, custom styles definitions, multiple intances of the editor on the same page and extra config parameters such as toolbar definition.
Creating the controller
First of all, we are going to create a controller that will set all the helper’s configuration options. In this exemple, we are going to instanciate two CKEditors with different configuration values. You are able to set all CKEditor’s available configuration options inside the config array. We are also going to define custom styles to replace the CKEditor’s default styles. Note that the id must match the textarea’s id in the view. Since the 2010-08-28 version, each styles definitions are applied to the associated CKEditor instance, allowing you to use different option set by instance. Since this version, you can also add severals CKEditor instance on the same page and define custom toolbars (thanks to the ronan’s patch ;)).
That’s all ! If you’ve followed all the steps correctly, two CKEditors should shows up in the view. Please note that I assume that you are loading also a correct header and footer view with all the xHTML required stuff.
Downloading the tutorial
Source files of this tutorial (controller, helper, and view) can be downloaded here.
Changelog
- 2010-08-28: Ronan’s patch for custom toolbar definition added (thanks dude!).
- 2010-08-28: Configuration options are now only applied on the associated CKEditor.
- 2010-08-28: Several editors can now be displayed on the same page.
- 2010-01-12: All the stuff moved out of system/plugins.
- 2010-01-30: Fixed Internet Explorer compatibility issue.
Troubleshooting
- If you are using the .htaccess file given by the CodeIgniter’s user guide and have placed the ckeditor’s folder into system/plugins, be sure to allow the directory system to be called via HTTP in order to allow access to the plugins directory
Licence
CKEditor plugin for CodeIgniter by Samuel Sanchez is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Permissions beyond the scope of this license may be available at https://nukium.com/contact-nukium-developpeur-france/.
I have tried your tutorial, but it doesnt work. Should the textarea id same on both controller and view? You have mentioned in controller « contenu » and in the view « content » ?? can you please help me? thanks
It was an error, both id have to match, sorry about that !
How can I do to avoid writing the same code in each controller function?
I mean, one thing would be to autoload the ckeditor helper…
but I’d like to know how to avoid creating the $this->data[‘ckeditor’] array each time I want to send ckeditor to a view…
thanks! @kabeza
Hi, you should use a config file for the helper in order to build the config array. Then, put $this->data[‘ckeditor’] = $this->config->item(‘ckeditor_config’); in a pre_controller, or in a hook, or in your constructor 😉
See http://codeigniter.com/user_guide/libraries/config.html for more informations. Good luck !
The controller example have been updated to put all the initialization stuff into the constructor. The helper have also been updated to work outside system/plugins. Use the ‘path’ key to locate your own ckeditor folder.
What does this path means in helper?
CKEDITOR_BASEPATH = ‘ » . base_url() . « system/plugins/ckeditor/’;
Hi Vova, thanks for the bug report, this was an old line from the previous release. This CKEditor’s var is now correctly setted with the dynamic path.
Hi, first thank you for the helper! It works great, except for one small thing, I don’t know if anyone else had this problem.
IE6 and IE7 (IE8 doesn’t bother) throws an error on the page, because of the last comma at the config values part (and I assume also at the styles values, which I haven’t used yet, but it’s basically the same syntax).
So I modified the helper (at the Adding config values part) and checked for the last element of the config values array, not to put the extra comma at the end.
Thanks to RegularJohn for the bug report. The files have been updated to work with Internet Explorer. More stuff for this helper is coming 😉
Ok, I understand how I am suppose to display the editor, but how am I suppose to show the output?
Can I add class from css to styles, and how?
Tanks
Hi Johny, I think CKEditor don’t support the possibility to add CSS classes to styles. You might find a way for doing that in the docs : http://docs.cksource.com/CKEditor_3.x/Developers_Guide
Hi Samuel,
Thanks for the awesome helper. I added a function ‘get_ck_config’ to the helper to make the config easier to set, so on the view we can just call
makes it easier to have multiple textareas in one view.
Thanks again.
.tre.
Thanks very much for posting this. I followed your steps and was able to get ckeditor working in my CodeIgniter app within about 20 minutes, including customization. Very helpful!
Thanks 🙂
Excellent Guide Sanchez Muchos Gracias Senor! I have got working in ten min, using smarty php templating too on front end. Thanks for your help…very much appreciated.
Hi. Thanks for the tutorial, it was very helpfull. Can i set this, to multiple textareas in the same view? How?
Thanks again,
Ricardo
Thanks for the tutorial, it works fine! But do you have any idea how to use the editor as a form input field. I’m using the CI form helper and would like to replace some existing input fields with the editor, until now without succes. Any hint very much appreciated!
Hi Glarry, the editor is inserted in a textarea that the value can be accessed via $this->input->post(‘name_of_the_editor »), you can also add your form validation rules like you would normally do with a textarea 🙂
Forget about previous message. Replacing the form_input() with textarea was doing the trick. Thanks again!
Hi, i’m just trying your helper and i have a little side note about it:
This helper do not provide support for extra config parameters, like custom toolbar.
So i’ve added a function to retrieve toolbar data.
this is how i’ve made modifications: http://pastie.org/977809
Dummy example, in the controller file you provided, you can pass toolbar infos like this:
http://pastie.org/977816
Hope it helps
Thanks for the tutorial……but one problem,i want to add 2 ckeditors in the same page…how can i do that…..
@Muhammad Nauman Using $this->data[‘ckeditor_1’], $this->data[‘ckeditor_2’] with two different IDS doesn’t work ?
Yes Nukium i have used $this->data[‘ckeditor_2’] , $this->data[‘ckeditor_1’] from my controoler for two different editors on the view page…..but it does’nt work….
it display only first ckeditor not second……
when i apply bold property to the text of first editor it does’nt appy on first but on second editor……while the second editor work fine……what about first editor of the page….i have not found any solution yet….
@Muhammad Could you send me by the contact form an URL to your web page that I can debug ?
Hi!,
I was just about to post the same problem as Muhammad described. When I added 2 editors on the same page, only the second one worked normally. After searching for the source of the problem I found out that when I added the second editor, it added a second javascript path to ckeditor.js which seemed to « crash » the first one. So I needed a little bit of tweaking to only add once the ckeditor.js. Now it works great. Hope it helps someone.
Just tested and working perfectly on CI 1.7.2 and CKEditor 3.4!
Thanks!
Can you modify the demo to show how to access the HTML created by CKEditor. I tried using the form_validation rules but it’s not working for me, and I’m a CI novice.
Thanks
-Brad
thanks… you showed a very simple way to integrate ckeditor.
hi!
thanks for the tutorial. But i have an issue on I.E 7 the editor doesn’t display. I saw the code written for the helper and i think there is one problem in following code
[code]
//Adding config values
if(isset($data[‘config’])) {
foreach($data[‘config’] as $k=>$v) {
$temp .= $k . » : ‘ » . $v . « ‘, »;
}
}
[/code]
when the loop runs it also adds ‘,’ at the last of this string which gives problem in I.E 7(works fine on FF3 ).
Its just to bring to your notice.
Others might have same problem
Thanks for the notice, I will update the sources !
Thanks man. It works really fine.
Hi,
Great tutorial!!!!
Could you make one integrating CKfinder to CKEditor and Codeigniter.
Thanks!!
Very good work, man!! Thank you so much! 🙂
I had problems with the language files not loading. According to
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Specifying_the_Editor_Path, CKEDITOR_BASEPATH should be defined before ckeditor.js is called.
I had to edit the cke_initialize() function in the helper and moved the CKEDITOR_BASEPATH line to before the ckeditor.js line.
Hello sir,
It’s very nice article to use ck editor with ci. I have configured it and it’s working fine but can you please tell me how can I make costume uploading path. i.e. browse server is not working in my ck editor. I have start this from plugin->images-> and something inside. but that browse server button is not working. please help me.
regards,
Mahendra
Sir,
I integrated this CKeditor and shows as full page load. it has hidden the other controls , form texts etc,
how can i display it?
Sir,
I thanks you very much! I’ve tried TinyMCE once for a simple CMS. Although it worked, on the next website it gave me a lot of *****. First try on CKEditor (always in combination with CI). Guess what, worked straight away! Love the CI helper, love CKEditor! Keep up the good work
Hi how about integration of CKFinder using this helper?
How can i integrate CKFinder to this helper?
@Narenda : a note have been added for CI 2.x users. The Controller class have been renamed to CI_Controller so extend CI_Controller instead of Controller and call parent::__construct(); instead of parent::Controller();
Fatal error: Class ‘Controller’ not found in C:xampphtdocsWorkbachexampleCKEditorCKEditorCKEditorsystemapplicationcontrollersckeditor.php on line 3
help me..
Hi,
Thanks for the helper, very good job.
On CKFINDER, could you tell me if it’s possible to define size formats to resize image during the upload.
I saw a resize image plugin and I would have (like in wordpress) 3 size predefined (thumb/medim/large and original for example)
If someone already seen that…
Thanks a lot
:: Vinz
Nice work here, thank you!
There is something missing though: when we want to add an image we don’t have the option to upload it from PC. Can you provide some guidelines for such a code?
this is nice but i want add ck editor in another view page
Hi,
Thanks a lot, great work :).
I am working on a project and I added two text areas using ckeditor. But one become a link to the other one. So only one of them can actually be used and the other one does not work at all. Have one one seen that and how do I go about solving it
Many many thanks, I have gone through many sites but this blog helps me to integrate in codeigniter 2. But still I’m unable to integrate ckfinder. Can you help me please?
I’m a layout maker for xanga, and I’m having a little trouble with html. I made a layout, but I have no clue how to post it so people can use it. I want it in a scroll box, but when I post that in an html entry, the layout becomes one with the entry! I need help on finding a code that will allow me to post html into a scroll box.. . Thanks!.
Thanks.!
Just wanted to sat thanx, this made things a bit simpler for me.
hello, i need to upload image, how to browse image to upload ?
Hi ari, you need to use CKfinder or any open source equivalent.
Very useful tutorial, thanks !
Works for me to with #CodeIgniter
I need the ckeditor be array and dynamic so i can have as many editor in my site………….how can i do this….??
I am new to codeignator, your tutorila helped me to learn lot…anywaz Thank you for uplaod…
Nice tutorial..Thanks 🙂
How can i disable the resize with your helper.. everything is fine accept i can’t disable the resize…
i found the way in
http://docs.cksource.com/CKEditor_3.x/Howto/Disabling_Editor_Resize
but adding the value to the array doesn’t affecting anything…
i need help about include Ckfinder to ckeditor on Codeignitor.
Plesae!
Thanks so much!
Hi, I’ve not made any plugin for CKFinder yet. Some are available over the web 😉
This is ckfinder’s websites. Who can install to ckeditor please help for me!
Bonjour,
Je recherche un bon developpeur en CodeIgniter pour finir et optimiser un site.
Votre formulaire de contact ne fonctionne pas, pouvez-vous me contacter ?
Merci de votre retour,
Cordialement,
Hallo Nukium,
thanks for this tutorial, working nice on me…
i have question,
how to integrate with kceditor.?
i have add:
config.filebrowserBrowseUrl = ‘./kcfinder/browse.php?type=files’;
config.filebrowserImageBrowseUrl = ‘./kcfinder/browse.php?type=images’;
config.filebrowserFlashBrowseUrl = ‘./kcfinder/browse.php?type=flash’;
config.filebrowserUploadUrl = ‘./kcfinder/upload.php?type=files’;
config.filebrowserImageUploadUrl = ‘./kcfinder/upload.php?type=images’;
config.filebrowserFlashUploadUrl = ‘./kcfinder/upload.php?type=flash’;
on my ckeditor/config.js
my kceditor on ckeditor/kceditor
Thanks
after many hours,
‘filebrowserBrowseUrl’ => ‘../js/ckeditor/kcfinder/browse.php?type=files’,
‘filebrowserImageBrowseUrl’ => ‘../js/ckeditor/kcfinder/browse.php?type=images’,
‘filebrowserFlashBrowseUrl’ => ‘../js/ckeditor/kcfinder/browse.php?type=flash’,
‘filebrowserUploadUrl’ => ‘../js/ckeditor/kcfinder/upload.php?type=files’,
‘filebrowserImageUploadUrl’ => ‘../js/ckeditor/kcfinder/upload.php?type=images’,
‘filebrowserFlashUploadUrl’ => ‘../js/ckeditor/kcfinder/upload.php?type=flash’
on ‘config’ $data[‘ckeditor’]
🙂
thanks a lot!
it works very well on ckeditor_3.6.2.
Thanks for the helper. I am having one issue however. In Firebug I am getting the following error:
uncaught exception: [CKEDITOR.editor] The instance « content » already exists.
But the editor does appear.
If I html comment out the textarea then it says it doesn’t exist.
What do I do? With this error it’s breaking all other javascript on the page.
Could it be the version I am working with: CKEditor 3.6.3 (revision 7474)
Ja estou usando o CKEditor no meu site. Ele é otimo.
can you please suggest me how to integrate ckfinder for image upload with ckeditor in codeigniter.
@kamlesh Hi, the trick is simple, CKFinder give you a basic native PHP connector, you have to rebuild this connector with the CodeIgniter framework (by using Upload Library for exemple). Next you have to configure CKFinder to use correct URI for the upload. Unfortunally I have not made a full bundle for CKFinder yet.
thanks
that usefully for codeigniter developer
tnx for this. it really helps me a lot.
Thanks for your instruction.
Furthermore, how do I add ckfider to the editor?
i’m triingto add font sizes and styles to ckeditor in my project pleas help me
How can I add dynamically ckeditors to my textarea’s when we use ‘AddMore’ Option for loading more editors.
Thanks
Venkat B
@This is shit: This post has been written 2010 and have helped many CI developpers as you can see by reading comments.
If you want a fit well CKEditor integration I can make you an estimate 😉
Thanks you! Years after, this is still very useful! 🙂
Hi! I hope you can help me with my problem with integrating ckeditor in codeigniter. I downloaded the Standard package for the editor, however it’s the Basic package that appears. How do I make it work?
Great work dear !! 🙂 🙂
I used from ckeditor in codigniter. but I have some problems.
I want to show some codes in the front end of my website for tutorial like you. but I cant.
My page that want to show codes in it is « rtl » but the codes are « ltr » so it shows wrong and disarranged.
another problem is : when I want to edit my text from database shows the codes in ckeditor in compiled. I cant see these code to edit or .
I don’t see any thing instead of first and one input text instead of code.
please guide me what should I do now?
please excuse me for my English language.
Does it allow post values? I am having trouble with text editor with codeigniter as CI is unable to read data from textareas that has an editor attached.
Post values are always blank..