CKEditor Helper for CodeIgniter

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.

 

<?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.

 

<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 .

 

 

 

第二种方法：

 

Minimized version:

ckeditor_helper.php

 

<?php
    if(!defined('BASEPATH')) exit('No direct script access allowed');

    function form_ckeditor($data)
    {
        return  < script type="text/javascript" src="'.base_url().'application/plugins/ckeditor/ckeditor.js"></script>' .
         '<script type="text/javascript">CKEDITOR.replace("'.$data['id'].'");</script>';
    }

 

To use:

 

    echo form_ckeditor(array('id'=>'textarea_id'));

 

 

With many parameters and personalized thinks...
ckeditor_helper.php

 

<?php
    if(!defined('BASEPATH')) exit('No direct script access allowed');

    function form_ckeditor($data)
    {
        $data['language'] = isset($data['language']) ? $data['language'] : 'es';
       
        $size    = isset($data['width']) ? 'width: "'.$data['width'].'", ' : '';
        $size  .= isset($data['height']) ? 'height: "'.$data['height'].'", ' : '';
       
        $options = '{'.
                $size.
                'language: "'.$data['language'].'",
               
                stylesCombo_stylesSet: "my_styles",
               
                startupOutlineBlocks: true,
                entities: false,
                entities_latin: false,
                entities_greek: false,
                forcePasteAsPlainText: false,
               
                filebrowserImageUploadUrl : "filexplorers/fckeditor_upload/image", // << My own file uploader
                filebrowserImageBrowseUrl : "filexplorers/inlinebrowse/image", // << My own file browser
                filebrowserImageWindowWidth : "80%",
                filebrowserImageWindowHeight : "80%",   

               
                toolbar :[
                    ["Source","-","FitWindow","ShowBlocks","-","Preview"],
                    ["Undo","Redo","-","Find","Replace","-","SelectAll","RemoveFormat"],
                    ["Cut","Copy","Paste","PasteText","PasteWord","-","Print","SpellCheck"],
                    ["Form","Checkbox","Radio","TextField","Textarea","Select","Button","ImageButton","HiddenField"],
                    ["About"],
                       
                    "/",
                   
                    ["Bold","Italic","Underline"],
                    ["OrderedList","UnorderedList","-","Blockquote","CreateDiv"],
                   
                    ["Image","Flash","Table"],
                   
                    ["Link","Unlink","Anchor"],
                    ["Rule","SpecialChar"],
                    ["Styles"]
                ]
            }';
       
       
        $my_styles = 'CKEDITOR.addStylesSet("my_styles",
            [
                // Block Styles
                { name : "H3", element : "h3"},
                { name : "Heading 4", element : "h4"},
                { name : "Heading 5", element : "h5"},
                { name : "Heading 6", element : "h6"},
                { name : "Document Block", element : "div"},
                { name : "Preformatted Text", element : "pre"},
                { name : "Address", element : "address"},
           
                // Inline Styles
                { name: "Centered paragraph", element: "p", attributes: { "class": "center" } },
               
                { name: "IMG bordered", element: "img", attributes: { "class": "bordered" } },
               
                { name: "IMG left", element: "img", attributes: { "class": "left" } },
                { name: "IMG right", element: "img", attributes: { "class": "right" } },
               
                { name: "IMG left bordered", element: "img", attributes: { "class": "left bordered" } },
                { name: "IMGright bordered", element: "img", attributes: { "class": "right bordered" } },
            ]);';
       
        return
        // fix: move to <HEAD...
        '<script type="text/javascript" src="'.base_url().'application/plugins/ckeditor/ckeditor.js"></script>' .

        // put the CKEditor
         '<script type="text/javascript">' .
                $my_styles .
                'CKEDITOR.replace("'.$data['id'].'", ' . $options . ');</script>';
    }

 

To use:

 

    echo form_ckeditor(array(
                'id'         =>  'textarea_id',
                'width'   => '500',
                'height'  => '300',
                'value'   => htmlentities($textarea_value)
            ));

 

 

 

Look at CodeIgniter forum: <!-- m -->http://codeigniter.com/forums/viewthread/127374/ <!-- m -->