Skip to content
World Wide Web Server edited this page Jul 4, 2012 · 15 revisions

Please download first the last release of my [url=http://www.kromack.com/codeigniter/ckeditor-helper-for-codeigniter/]CKEditor Helper for CodeIgniter[/url].

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

[h3]The controller[/h3] [code] <?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);
    
}

} [/code]

[h3]The view[/h3] [code]

<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> <textarea name="content" id="content" ><p>Example data

</textarea> <?php echo display_ckeditor($ckeditor); ?> </body> </html> [/code]

[h3]More...[/h3] For more information or for feature request, please see [url=http://www.kromack.com/codeigniter/ckeditor-helper-for-codeigniter/]the full tutorial[/url].

[h3]CKEditor 3.2 [/h3] 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 [url=http://ckeditor.com/download]here[/url]

  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: [code] <?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'; }

[/code] 5. Put the editor into the view file [code] <?=form_open("content")?>

<?=$this->ckeditor->editor("editor1","initial value");?>
<?=form_close()?> [/code]

Thats all.. Good luck. ;)

Clone this wiki locally