Skip to content

CKEditor

Jump to bottom Edit New page
Derek Jones edited this page Jul 5, 2012 · 15 revisions

Please note that the wiki tutorial is outdated, please visit the CKEditor helper homepage to read the up-to-date tutorial.

Changelog

* 2010-08-28: Ronan’s patch for custom toolbar definition added (thanks dude!).
* 2010-08-28: Configuration options are now only applied on the associated CKEditor.
* 2010-08-28: Several editors can now be displayed on the same page.
* 2010-01-12: All the stuff moved out of system/plugins.
* 2010-01-30: Fixed Internet Explorer compatibility issue.

Please download first the last release of my CKEditor Helper for CodeIgniter.

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

The first step is to download the CKEditor editor package, note that the helper have only be tested over CKEditor 3.0.2.

Place the entire ckeditor folder into the CodeIgniter’s /js/ folder (this path can be customized).

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

File:CKEditor-1.2.zip

The controller

<?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',
            'path'    =>    'js/ckeditor',
        
            //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);
        
    }
}

The view

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;textarea name="content" id="content" &gt;&lt;p>Example data</p>&lt;/textarea&gt;
    &lt;?php echo display_ckeditor($ckeditor); ?&gt;
&lt;/body&gt;
&lt;/html&gt;

More...

For more information or for feature request, please see the full tutorial.

CKEditor 3.2

Today March 23th, I changed my FCK to CK with awesomes features in this new version. first of all, I just teach HOW TO Install and load this plugin into CI, no more!! the optional features, I do not need.

Tested in:

  • CI 1.7.4
  • CKEditor 3.2, released on 25 February 2010
  • Apache/2.2.12 (Win32)
  • Windows Vista
  1. Download the package here
  2. Unzip into system\plugins\ it looks like this: \htdocs\example\system\plugins\ckeditor
  3. cp .\system\plugins\ckeditor\ckeditor_php5.php .\system\application\libraries\ckeditor.php
  4. load the library:
&lt;?php
class Content extends MY_Controller {

    function Content() {
        parent::MY_Controller();
    }

    function index() {
        $this->load->library('ckeditor',base_url() . 'system/plugins/ckeditor/');
        $this->ckeditor->basePath = base_url(). 'system/plugins/ckeditor/';
        $this->ckeditor->ToolbarSet = 'Basic';
    }
  1. Put the editor into the view file
&lt;?=form_open("content")?&gt;
<table width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td>&lt;?=$this->ckeditor->editor("editor1","initial value");?&gt;</td>
    </tr>
</table>
&lt;?=form_close()?&gt;

Thats all.. Good luck. ;)

Add a custom footer
Clone this wiki locally