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

102 réflexions au sujet de « CKEditor Helper for CodeIgniter »
  1. Karel

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

    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

  3. Nukium Auteur de l’article

    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.

  4. Vova

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

  5. Nukium Auteur de l’article

    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.

  6. RegularJohn

    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.

  7. Nukium Auteur de l’article

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

  8. Trevor

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

  9. tre

    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.

  10. Lenwood

    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!

  11. Matthew Fedak

    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.

  12. Ricardo

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

    Thanks again,
    Ricardo

  13. Glarry

    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!

  14. Nukium Auteur de l’article

    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 🙂

  15. Glarry

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

  16. ronan

    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

  17. Muhammad Nauman

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

  18. Nukium Auteur de l’article

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

  19. Muhammad Nauman

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

  20. Muhammad Nauman

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

  21. Nukium

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

  22. wazelin

    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.

  23. Brad

    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

  24. uday

    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

  25. elin3t

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

    Thanks!!

  26. Mahendra

    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

  27. logudotcom

    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?

  28. Joey van den Brink

    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

  29. Ping : Usando CKEditor + CKFinder com o CodeIgniter | Marcelo de Assis

  30. Narendra

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

  31. Nukium Auteur de l’article

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

  32. Orangevinz

    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

  33. AndrewStarlike

    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?

  34. Emanuel Feryzu

    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

  35. Kiran Dangol

    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?

  36. Avelina Nasca

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

  37. suraj

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

  38. Nukium Auteur de l’article

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

  39. Samuel

    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,

  40. Doni

    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

  41. Doni

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

    🙂

  42. Andrew Christensen

    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)

  43. Ping : CodeIgniter ???????CKEditor?CI 2.xx???????? » Bo-Chi Bo-Chi?(???????????

  44. Nukium Auteur de l’article

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

  45. thang tran

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

  46. sara

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

  47. venkat

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

    Thanks

    Venkat B

  48. Nukium Auteur de l’article

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

  49. Josh

    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?

  50. fatima

    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 *