CODEWITHSUNDEEP
phpjavascriptcodeigniterckeditor
Moein Hosseini
Moein Hosseini

Reputation: 4383

CKEditor in CodeIgniter

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?

Upvotes: 8

Views: 55133

Answers (7)

Jagadish Meghval
Jagadish Meghval

Reputation: 308

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

Upvotes: 0

Vatsal Shah
Vatsal Shah

Reputation: 1442

  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>

Upvotes: 1

insaineyesay
insaineyesay

Reputation: 356

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>
  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: $this->load->view('common/admin-template',$data);
  3. then I just called CKEDITOR.replace('textareaNameHere');

and voila. it works

Upvotes: 0

SURYA PRATAP
SURYA PRATAP

Reputation: 49

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

Upvotes: 0

Tiger
Tiger

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

Upvotes: 1

Christian Giupponi
Christian Giupponi

Reputation: 7618

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

Upvotes: 32

user2143384
user2143384

Reputation: 41

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; ?>
                            </textarea>
                            <script>

                                CKEDITOR.replace('edi');

                     </script>    </body>

This works great for me. Enjoy!

Upvotes: 4

Related Questions