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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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();?>
js/plugin/ckeditor/ckeditor.js"></script>

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

and voila. it works

Answer 5

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

Answer 6

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