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.

8 comments:

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

    ReplyDelete
    Replies

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

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

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

    ReplyDelete
    Replies

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

      Delete

Subscribe to: Post Comments (Atom)