CKEditor in CodeIgniter

Question

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.

value. where is the problem and how should I solve it?

Christian Giupponi · Accepted Answer · 2014-01-01T08:59:32.730

32

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

1) Download these files:

This for Ckeditor: http://pastebin.com/fkK9e0RR
This for Ckfinder: http://pastebin.com/SvyypmX4

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->load->library('ckeditor');
$this->load->library('ckfinder');



$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
$this->ckfinder->SetupCKEditor($this->ckeditor,'../../asset/ckfinder/');

11) In your view print the editor with:

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

edited Jan 01 '14 at 08:59

answered Aug 05 '12 at 08:38

Christian Giupponi

7,408
11
68
113

2

how to add image upload fucntionality? added Image in $config['toolbar'] but its not working. Please help – Mansoorkhan Cherupuzha Feb 18 '13 at 06:19
1

@user1149244 yes, you have to create it – Christian Giupponi May 29 '13 at 14:19
1

@ Mansoorkhan Cherupuzha: I found this links helpful for me to make the image upload work in CKeditor http://derekmd.com/2013/03/ckeditor-image-upload-in-codeigniter/. You might want to give it a try. One of the best tutorial I've found so far. – user1149244 Jun 02 '13 at 14:21
1

Works perfect using the listed steps! – mallix Sep 18 '13 at 12:19
I have follow your step, But I am facing issue that whenever I am click on Browse Server button that popup screen show me blank. Could you help me for that? – Prashant Parekh Dec 27 '13 at 11:19
I have ask question here http://stackoverflow.com/questions/20798373/browse-server-is-not-working-in-ckeditor-with-ckfinder – Prashant Parekh Dec 27 '13 at 11:28
Everything works fine, except the CKEditor does not obey the height parameter. Why? – Sarvap Praharanayuthan Aug 10 '14 at 14:35
All your links are deleted ... :( – Dec 30 '14 at 07:43
@ChristianGiupponi None of them works .... all are dead see this http://pastebin.com/fkK9e0RR – Dec 31 '14 at 04:26
Man, if I click on the link I see the code...All the links are set to EXPIRES: NEVER – Christian Giupponi Dec 31 '14 at 08:18
@ChristianGiupponi : Can You Help , how can I get value of ckeditor field in Controller . while it is having 'echo $this->ckeditor->editor("textarea name","default textarea value");' to show ck editor , how can i submit value using this? any idea ? – Devang Mistry Jul 31 '17 at 06:58
@DevangMistry you need to wrap it in a form and use the submit event to retrieve content in Controller – Christian Giupponi Aug 11 '17 at 13:03
links not working. would you please correct the links? – PersianMan Mar 22 '18 at 06:42
is this method secure to insert in database? – metalbox Jan 09 '19 at 19:25
@metalbox this will no insert any data into your database, it just show the steps to add CKEditor to textareas, the form submission is on your own – Christian Giupponi Jan 10 '19 at 08:55

score 4 · Answer 2 · answered Mar 07 '13 at 15:50

You could otherwise do this:

copy the CKEditor files to a folder in your source's root eg ckeditor

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

finally your textarea in your html document

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

                                CKEDITOR.replace('edi');

                     </script>    </body>

This works great for me. Enjoy!

score 1 · Answer 3 · answered Aug 02 '14 at 01:11

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")); ?>

score 1 · Answer 4 · answered Dec 04 '18 at 11:43

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

See the following example:

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

Thanks, more easy impossible – metalbox Jan 09 '19 at 17:23 — metalbox, Jan 09 '19 at 17:23

score 0 · Answer 5 · edited Apr 05 '16 at 09:38

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

In my root, I have a directory called 'js' and within that I have a directory called 'plugins'. I copied the ckeditor files there.
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();?>
js/plugin/ckeditor/ckeditor.js"></script>

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
Then, you pass the $data object of to the view of course: $this->load->view('common/admin-template',$data);
then I just called CKEDITOR.replace('textareaNameHere');

and voila. it works

score 0 · Answer 6 · answered Nov 22 '14 at 18:44

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->load->library('ckeditor');
    $this->load->library('ckfinder');

    $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
    $this->ckfinder->SetupCKEditor($this->ckeditor,base_url().'asset/admin/ckfinder/');

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 : ''));?>      
</div>

i putting ck editer folder in asset folder and asset folder in root file like
C:\wamp\www\site\assets\admin\ckeditor

Is this an answer, or a new question? – elixenide Nov 22 '14 at 23:53 — elixenide, Nov 22 '14 at 23:53
it is answer of above question – SURYA PRATAP Dec 01 '14 at 11:37 — SURYA PRATAP, Dec 01 '14 at 11:37

Jagadish Meghval · Answer 7 · 2020-04-27T06:47:01.487

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

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

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 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html#document-editor

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

CKEditor in CodeIgniter

7 Answers7

Linked