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

Creative Commons License
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/.

  1. Karel says:

    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

  2. Nukium says:

    It was an error, both id have to match, sorry about that !

  3. Kabeza says:

    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

  4. Nukium says:

    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 !

  5. Nukium says:

    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.

  6. Vova says:

    What does this path means in helper?
    CKEDITOR_BASEPATH = ‘ » . base_url() . « system/plugins/ckeditor/’;

  7. Nukium says:

    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.

  8. RegularJohn says:

    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.

  9. Nukium says:

    Thanks to RegularJohn for the bug report. The files have been updated to work with Internet Explorer. More stuff for this helper is coming 😉

  10. Trevor says:

    Ok, I understand how I am suppose to display the editor, but how am I suppose to show the output?

  11. Johny says:

    Can I add class from css to styles, and how?

    Tanks

  12. Nukium says:

    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

  13. tre says:

    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.

  14. Lenwood says:

    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!

  15. Nukium says:

    Thanks 🙂

  16. Matthew Fedak says:

    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.

  17. Ricardo says:

    Hi. Thanks for the tutorial, it was very helpfull. Can i set this, to multiple textareas in the same view? How?

    Thanks again,
    Ricardo

  18. Glarry says:

    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!

  19. Nukium says:

    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 🙂

  20. Glarry says:

    Forget about previous message. Replacing the form_input() with textarea was doing the trick. Thanks again!

  21. ronan says:

    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

  22. Muhammad Nauman says:

    Thanks for the tutorial……but one problem,i want to add 2 ckeditors in the same page…how can i do that…..

  23. Nukium says:

    @Muhammad Nauman Using $this->data[‘ckeditor_1’], $this->data[‘ckeditor_2’] with two different IDS doesn’t work ?

  24. Muhammad Nauman says:

    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……

  25. Muhammad Nauman says:

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

  26. Nukium says:

    @Muhammad Could you send me by the contact form an URL to your web page that I can debug ?

  27. wazelin says:

    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.

  28. Jônatan Fróes says:

    Just tested and working perfectly on CI 1.7.2 and CKEditor 3.4!
    Thanks!

  29. Brad says:

    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

  30. supal says:

    thanks… you showed a very simple way to integrate ckeditor.

  31. uday says:

    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

  32. Nukium says:

    Thanks for the notice, I will update the sources !

  33. Marcos says:

    Thanks man. It works really fine.

  34. elin3t says:

    Hi,
    Great tutorial!!!!
    Could you make one integrating CKfinder to CKEditor and Codeigniter.

    Thanks!!

  35. deste says:

    Very good work, man!! Thank you so much! 🙂

  36. Mart says:

    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.

  37. Mahendra says:

    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

  38. logudotcom says:

    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?

  39. Joey van den Brink says:

    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

  40. Jeremy says:

    Hi how about integration of CKFinder using this helper?

  41. Richard says:

    How can i integrate CKFinder to this helper?

  42. Nukium says:

    @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();

  43. Narendra says:

    Fatal error: Class ‘Controller’ not found in C:xampphtdocsWorkbachexampleCKEditorCKEditorCKEditorsystemapplicationcontrollersckeditor.php on line 3
    help me..

  44. Orangevinz says:

    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

  45. AndrewStarlike says:

    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?

  46. anant says:

    this is nice but i want add ck editor in another view page

  47. Waqar Ahmed says:

    Hi,

    Thanks a lot, great work :).

  48. Emanuel Feryzu says:

    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

  49. Kiran Dangol says:

    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?

  50. Avelina Nasca says:

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

  51. Hang says:

    Thanks.!

  52. Zac Rogerson says:

    Just wanted to sat thanx, this made things a bit simpler for me.

  53. ari says:

    hello, i need to upload image, how to browse image to upload ?

  54. Nukium says:

    Hi ari, you need to use CKfinder or any open source equivalent.

  55. Benoît says:

    Very useful tutorial, thanks !

  56. cosmin says:

    Works for me to with #CodeIgniter

  57. suraj says:

    I need the ckeditor be array and dynamic so i can have as many editor in my site………….how can i do this….??

  58. Nigeria Web design says:

    I am new to codeignator, your tutorila helped me to learn lot…anywaz Thank you for uplaod…

  59. karthi says:

    Nice tutorial..Thanks 🙂

  60. Passer says:

    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…

  61. cutypn says:

    i need help about include Ckfinder to ckeditor on Codeignitor.
    Plesae!
    Thanks so much!

  62. Nukium says:

    Hi, I’ve not made any plugin for CKFinder yet. Some are available over the web 😉

  63. cutypn says:

    This is ckfinder’s websites. Who can install to ckeditor please help for me!

  64. Samuel says:

    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,

  65. Doni says:

    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

  66. Doni says:

    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’]

    🙂

  67. blackknight says:

    thanks a lot!
    it works very well on ckeditor_3.6.2.

  68. Andrew Christensen says:

    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)

  69. Domingos Nunes says:

    Ja estou usando o CKEditor no meu site. Ele é otimo.

  70. kamlesh says:

    can you please suggest me how to integrate ckfinder for image upload with ckeditor in codeigniter.

  71. Nukium says:

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

  72. thanks
    that usefully for codeigniter developer

  73. jho says:

    tnx for this. it really helps me a lot.

  74. thang tran says:

    Thanks for your instruction.
    Furthermore, how do I add ckfider to the editor?

  75. sara says:

    i’m triingto add font sizes and styles to ckeditor in my project pleas help me

  76. venkat says:

    How can I add dynamically ckeditors to my textarea’s when we use ‘AddMore’ Option for loading more editors.

    Thanks

    Venkat B

  77. Nukium says:

    @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 😉

  78. Deepali says:

    Thanks you! Years after, this is still very useful! 🙂

  79. Josh says:

    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?

  80. Noushad says:

    Great work dear !! 🙂 🙂

  81. fatima says:

    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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *