Sunday, April 14, 2013

Integrating CKEditor with CakePHP

Labels:
CKEditor is the web text editor used in web applications to convert your textarea to Rich TextArea.
Here we explain how to integrate CakePHP 2.x with CKEditor (version 4.1)

Download CKEditor and extract the files to app/webroot/js/ckeditor


Now in your ctp file add the below code so that the ckeditor.js file will be integrated in the head part of the page.

echo $this->Html->script('ckeditor/ckeditor', array('inline' => false));


Note: in Layouts/default.ctp confirm that below code is placed in the head part

<?php echo $scripts_for_layout; ?>


Now add the class to the form element to which you want to apply the CKEditor characteristics:

echo $this->Form->textarea('myelement', array('class'=>'ckeditor'));


Now run your file.. Its DONE..!

In-order to change the other properties of the CKEditor like width, height and toolbar settings add the code in you ctp file. (U can paste it at the end of the ctp file)

<script type="text/javascript">
CKEDITOR.replace( 'textarea_id', {
toolbar: [[ 'Bold', 'Italic','Underline','Subscript','Superscript'],],
width: '700',
height: '100',
});
</script>

Hope you got it. Thank you.

9 comments:

  1. UnknownJuly 24, 2013 at 11:13 AM

    I can not insert data from ckeditor into database...
    can you tell me how to do that ....

    ReplyDelete
    Replies
    1. VinodJuly 24, 2013 at 3:15 PM

      I didn't do anything special for that.

      echo $this->Form->textarea('myelement', array('class'=>'ckeditor'));

      Check that "myelement" and the fieldname in the database matches..

      Delete
  2. AnonymousJuly 25, 2013 at 2:32 PM

    good

    ReplyDelete
  3. AnonymousJuly 30, 2013 at 7:24 PM

    This is SO WRONG.

    You DO NOT call the script file BEFORE head.
    Implement this under before < / head >

    echo $this->Html->script('ckeditor/ckeditor', array('inline' => false)); Should go under your layouts.

    ReplyDelete
    Replies
    1. VinodJuly 31, 2013 at 8:21 AM

      Hello friend, its not wrong.
      U can call any script from CTP file. When the page is rendered it will automatically be included in the head section (provided that in the layout within the head section u have added "echo $scripts_for_layout;").

      In this way we can avoid loading the js files for the pages which doesn't needs it.

      Delete
  4. UnknownSeptember 13, 2013 at 12:30 PM

    is it working for anyone of you?

    ReplyDelete
  5. shubhiNovember 22, 2016 at 4:21 PM

    i am getting error:
    Notice (8): Undefined variable: scripts_for_layout [APP/Template/Layout/default.ctp, line 21]

    ReplyDelete
    Replies
    1. AnonymousDecember 24, 2016 at 8:28 AM

      Note: in Layouts/default.ctp confirm that below code is placed in the head part

      Delete
  6. cakerajaSeptember 12, 2018 at 11:52 AM

    hi bro,how to get plain text

    ReplyDelete

Subscribe to: Post Comments (Atom)