Integrate CKeditor with codeigniter

As most of the beginners looking for good editors, as I prefer CKeditor for my projects.
Why I should use CKeditor? For this question my answer is flexible and fast but also innovative, smart and user friendly.
Before we are going to integrate, let us know some features about CKeditor your are using.

1) Inline editing: For better editing experience CKeditor uses inline editing, a tool that totally removes the editing area, which also removes impractical text boxes ,
Now what you see in the editor will output the same in the webpage.
2) Undo Function: This features helps in text, you don’t need to worry about mistakes, and you can simple revert back your changes in your text, which helps you in time, never break things or lose your text.
3) UI Language auto detection: If your website has international users, CKeditor automatically detect their language and localizes the interface accordingly. The editor is translated into over 60 languages.
4) Spell check: This the best feature in CKeditor, which helps in spellings, when you type the sentences, No server integration required. The application is based on the quality spell checking services provided by webspellchecker.net.
5) Quality xhtml output: CKeditor uses advanced W3C DTD controls to ensure that HTML is properly generated. If users didn’t enter broken code, the pages look good and will easily validate.

Now let’s move to next step, it’s nothing but integrating CKeditor with codeigniter
For this you need to download the CKeditor package from ckeditor.com website.
Now we need to unzip the package and copy the files into root folder of the project as shown in the below image.

Now let’s create the view in views folder of your project, here I created a dummy view to display the CKeditor in the webpage, let’s check the code in the view below.

<link rel="stylesheet" href="<?php echo $baseurl;?>ckeditor/samples/sample.css">
<form id="news" name="news" method="post" role="form" >  
<?php echo form_open_multipart('dashboard/insert_slider');?>
<table width="958">
<tr>
<td width="250">Caption</td>
<td width="228"><input type="text" name="slider_caption" class="form-control uniform-input text hover" value="<?php echo set_value('slider_caption');?>"/></td>
<span style="color:#FF0000"><?php echo form_error('slider_caption');?></span>
</tr>
<tr>
<td>Description</td>
<td><textarea id="editor1" name="description" class="ckeditor" ></textarea></td>
<span style="color:#FF0000"><?php echo form_error('description');?></span>
</tr>
<tr>
<td>
<td><input type="submit" value="Submit" class="btn btn-info btn-sm"/></td>
<td><input type="reset" value="Reset" class="btn btn-info btn-sm"/></td>
</tr>
</table>
<?php echo form_close();?>
<script src="ckeditor/ckeditor.js">  </script>
<script type="text/javascript">

CKEDITOR.replace( 'editor1', {
fullPage: true,
allowedContent: true,
extraPlugins: 'wysiwygarea'

});
</script>

Now final step to call this view using controller in codeigniter, let’s check the controller to call the view.

<?php
class Ektree extends CI_Controller
{
       Public $data;

       public function ckeditor()
       {
        $this->load->view(“ckeditor”,$this->data);	
       
       }
}
?>

And now finally call the url as below in your browser to load the CKeditor page.
Ex : http: localhost/projectname/ektree/ckeditor

Thanks for reading this article, for any queries please use comment system.