Using CKEditor as a plugin in your CodeIgniter applications

CKEditor is a powerfull WYSIWYG text editor licensed under the GPL, LGPL and MPL open source licenses. CKEditor can easilly be added to any web page, you will find below a simple way to integrate CKeditor to your CodeIgniter applications.

Downloading CKEditor

The first step is to download the CKEditor editor package, note that the helper have only be tested over CKEditor 3.0.2. Once done, you should consider to remove the _samples and _sources directories from the uncompressed files.

Then, place the entire ckeditor directory into a /js/ folder. You can place it anywhere but remember to set the correct path when initializing the helper.

Adding the CKEditor helper for CodeIgniter

Download and place the ckeditor_helper.php file into the CodeIgniter’s system/application/helpers folder.

This helper can, for the moment, manage all CKEditor’s available configuration options and custom styles definitions.

Creating the controller

First of all, we are going to create a controller that will set all the helper’s configuration options. You are able to set all CKEditor’s available configuration options inside the config array. We are also going to define two custom styles to replace the CKEditor’s default styles. Note that the id must match the textarea’s id in the view.

View Code PHP
<?php
 
class Ckeditor extends Controller {
 
	public $data 	= 	array();
 
	public function __construct() {
 
		parent::Controller();
 
		$this->load->helper('url'); //You should autoload this one ;)
		$this->load->helper('ckeditor');
 
		//Ckeditor's configuration
		$this->data['ckeditor'] = array(
 
			//ID of the textarea that will be replaced
			'id' 	=> 	'content', 	// Must match the textarea's id
			'path'	=>	'js/ckeditor',	// Path to the ckeditor folder relative to index.php
 
			//Optionnal values
			'config' => array(
				'toolbar' 	=> 	"Full", 	//Using the Full toolbar
				'width' 	=> 	"550px",	//Setting a custom width
				'height' 	=> 	'100px',	//Setting a custom height
 
			),
 
			//Replacing styles from the "Styles tool"
			'styles' => array(
 
				//Creating a new style named "style 1"
				'style 1' => array (
					'name' 		=> 	'Blue Title',
					'element' 	=> 	'h2',
					'styles' => array(
						'color' 		=> 	'Blue',
						'font-weight' 		=> 	'bold'
					)
				),
 
				//Creating a new style named "style 2"
				'style 2' => array (
					'name' 		=> 	'Red Title',
					'element' 	=> 	'h2',
					'styles' => array(
						'color' 		=> 	'Red',
						'font-weight' 		=> 	'bold',
						'text-decoration'	=> 	'underline'
					)
				)				
			)
		);
 
 
	}
 
	public function index() {
 
		$this->load->view('ckeditor', $this->data);
 
	}
}

Creating the view

The ckeditor.php view only has to display a textarea element with the matched id and call the display_ckeditor() helper’s function.

View Code PHP
<textarea name="content" id="content" ><p>Example data</p></textarea>
<?php echo display_ckeditor($ckeditor); ?>

That’s all ! If you’ve followed all the steps correctly, CKEditor should shows up in the view. Please note that I assume that you are loading also a correct header and footer view with all the xHTML required stuff.

Downloading the tutorial

Source files of this tutorial (controller, helper, and view) can be downloaded here.

Changelog

  • 2010-01-12: All the stuff moved out of system/plugins.
  • 2010-01-30: Fixed Internet Explorer compatibility issue.

Troubleshooting

  • If you are using the .htaccess file given by the CodeIgniter’s user guide and have placed the ckeditor’s folder into system/plugins, be sure to allow the directory system to be called via HTTP in order to allow access to the plugins directory

Licence

Creative Commons License
CKEditor plugin for CodeIgniter by Samuel Sanchez is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Based on a work at codeigniter.com.
Permissions beyond the scope of this license may be available at http://www.kromack.com/contact-kromack-developpeur-france/.

Please note that this helper is based on an original idea discussed in this CodeIgniter thread.

Partager ce billet :


  • Print
  • PDF
  • RSS
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • HelloTxt
  • Reddit
  • Scoopeo
  • Technorati
  • Twitter
  • viadeo FR
  • Wikio FR

Mots clés pour ce billet :