Home » Php » php – CKEditor in CodeIgniter

php – CKEditor in CodeIgniter

Posted by: admin July 12, 2020 Leave a comment


I wanna load CKEditor in CodeIgniter,I search a lot,but can’t understand their way.

I placed ckeditor in application/plugins folder and now I wanna make editor ,so I do following in Controller Method.

include APPPATH.'plugins/ckeditor/ckeditor.php';
$CKEditor = new CKEditor();
$CKEditor->basePath = '/'.APPPATH.'plugins/ckeditor/';
$initialValue = '<p>This is some <strong>sample text</strong>.</p>';
echo $CKEditor->editor("editor1", $initialValue);

but it makes simple teaxaria only ,with

This is some sample text.

where is the problem and how should I solve it?

How to&Answers:

I use this steps to add ckeditor to my codeigniter apps:

1) Download these files:

2) Copy the files you just downloaded into your Application/libraries folder

3) Download the ckeditor helper here: http://pastebin.com/Cd3GqYbx

4) Copy the last file in application/helper folder as ckeditor_helper.php

5) Download the CKeditor controller here: http://pastebin.com/UD0bB9ig

6) Copy the controller in your application/controllers folder as ckeditor.php

7) Download the main ckeditor project from the official site: http://ckeditor.com/download/

8) Copy the ckeditor folder you just download into your asset folder (if you want you can also download the ckfinder project and put it in the same folder)

9) Add these line of js to your view file (adjust the path):

<script type="text/javascript" src="/asset/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/asset/ckfinder/ckfinder.js"></script>

10) In your controller add this php code and adjust the path:


$this->ckeditor->basePath = base_url().'asset/ckeditor/';
$this->ckeditor->config['toolbar'] = array(
                array( 'Source', '-', 'Bold', 'Italic', 'Underline', '-','Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','-','NumberedList','BulletedList' )
$this->ckeditor->config['language'] = 'it';
$this->ckeditor->config['width'] = '730px';
$this->ckeditor->config['height'] = '300px';            

//Add Ckfinder to Ckeditor

11) In your view print the editor with:

echo $this->ckeditor->editor("textarea name","default textarea value");


You could otherwise do this:

  1. copy the CKEditor files to a folder in your source’s root eg ckeditor
  2. Include the CKEditor files in your view file

     <script src="<?php echo base_url(); ?>ckeditor/ckeditor.js"></script>
            <link rel="stylesheet" href="<?php base_url(); ?>style/format.css">
  3. finally your textarea in your html document

     <textarea cols="80" id="edi" name="editor1" rows="10">
                    <?php echo $page_content->message1; ?>
                         </script>    </body>   

This works great for me. Enjoy!


I found a sweetly simple 2-code-line explanation here: http://www.iprogrammerindia.in/how-to-integrate-ckeditor-in-codeigniter/#comment-73

Just in case the link disappears I will paste the text here. This worked for me 8/1/14:

Include this line in your view where you want to use ckeditor and place your ckeditor folder in root folder. Here i placed in js/ckeditor/ in root folder

<script type="text/javascript" src="<?php echo base_url();?>js/ckeditor/ckeditor.js"></script>

Next include the below line in the same view,

<?php echo form_textarea(array('name' =>'desc','id'=>'desc','class'=>"ckeditor")); ?>


  1. Download CKEditor package from https://ckeditor.com/ckeditor-4/download/
  2. Unzip folder in your Codeigniter project folder at your preferred location.
  3. Include the <script> element loading CKEditor in your page.
  4. Use the CKEDITOR.replace() method to replace the existing <textarea> element with CKEditor.

See the following example:

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="../ckeditor.js"></script>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );


same problem is i am fessing but just little thing u need all file in asset folder in the root folder.
my controller part is


    $this->ckeditor->basePath = base_url().'assets/admin/ckeditor/';
    $this->ckeditor->config['toolbar'] = array(
                                                array( 'Source', '-', 'Bold', 'Italic', 'Underline', '-','Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','-','NumberedList','BulletedList' )
    $this->ckeditor->config['language'] = 'en';
    $this->ckeditor->config['width'] = '730px';
    $this->ckeditor->config['height'] = '300px';            

//Add Ckfinder to Ckeditor

my view part is

<div class="form-group">
    <label for="description">Description</label> <?php echo form_error('event_description'); ?>
    <?php echo $this->ckeditor->editor("event_description",((isset($event_description)) ? $event_description : ''));?>      

i putting ck editer folder in asset folder and asset folder in root file


Well, I know this question is old, but this is what I did, and seems to be easiest for me.

  1. In my root, I have a directory called ‘js’ and within that I have a
    directory called ‘plugins’. I copied the ckeditor files there.
  2. Then in application/views/common/headers directory I have a header file
    titled ‘ckeditor.php‘. Within this file just lies the following code:
<script type="text/javascript" src="php echo base_url();?>
  1. Then in the controller, I added the header file to the $data object to pass to the view:
    $data['header_files'] = array('header1','header2','header3', 'ckeditor'); // header file names were changed for the sake of my client
  2. Then, you pass the $data object of to the view of course:
  3. then I just called CKEDITOR.replace(‘textareaNameHere’);

and voila. it works


I think the simplest way to use Ckeditor is through CDN, Use this in your view file and

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/classic/ckeditor.js"></script>
<textarea name="editor" id="editor" rows="10" cols="80" placeholder="Insert text here" class="form-control"></textarea>
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );

for more information and styling of ckeditor and use of different styles of ckeditor you can visit the https://cdn.ckeditor.com/#ckeditor5

If you are looking for Document editor of Ckeditor then follow the below link

use the example and you will be able to insert the document editor in your view file