FCKeditor

Category:WYSIWYG

The following explains how to incorporate FCKeditor using Code Igniter's 1.4x Libraries.

Place your FCKeditor files in your CI base directory (in this example I've put the files under a folder called plugins).

Copy FCKeditor's PHP connector class (/FCKeditor/fckeditor.php) to your application's libraries folder (/system/application/libraries), edit 'fckeditor.php' and add the following line to the top:

[code] if (!defined('BASEPATH')) exit('No direct script access allowed'); [/code]

Now create an initialization file that corresponds to your FCKeditor PHP connector class. In your 'application/init' folder create a file called 'init_fckeditor.php' and add the following code:

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

if ( ! class_exists('FCKeditor')) { require_once(APPPATH.'libraries/fckeditor'.EXT); } $this->fckeditor->BasePath = 'system/plugins/FCKeditor/'; $obj =& get_instance(); $obj->fckeditor = new FCKeditor('FCKEDITOR1'); $obj->ci_is_loaded[] = 'fckeditor'; ?> [/code]

The FCKeditor connector class should now be available in CI. Now simply load the library from your controller using:

[code] $this->load->library('fckeditor'); [/code]

And in your view file load the FCKeditor using the following:

[code] $this->fckeditor->BasePath = base_url() . '/plugins/fckeditor/'; $this->fckeditor->Value = 'This is some sample text. You are using FCKeditor.' ; $this->fckeditor->Create() ; [/code]

That's it! Hope this helps.

-Slith Iron Eye / The Seventh Letter

[h3]Update for CI 1.5[/h3]

Since CI 1.5 works a bit different with libraries this is how you would do it in CI 1.5

1. change the class and constructor to "Fckeditor" so the beginning of the code looks like this

[code] if (!defined('BASEPATH')) exit('No direct script access allowed');

class Fckeditor { var $InstanceName ; var $BasePath ; var $Width ; var $Height ; var $ToolbarSet ; var $Value ; var $Config ;

// PHP 5 Constructor (by Marcus Bointon <[email protected]>)
function __construct( $instanceName )
 {
    $this->InstanceName    = $instanceName ;
    $this->BasePath        = '/fckeditor/' ;
    $this->Width        = '100%' ;
    $this->Height        = '200' ;
    $this->ToolbarSet    = 'Default' ;
    $this->Value        = '' ;
    $this->Config        = array() ;
}

// PHP 4 Contructor function Fckeditor( $instanceName ) { $this->__construct( $instanceName ) ; }

[/code]

2. Change the filename from fckeditor.php to Fckeditor.php

3. Put this into your controller [code]$this->load->library('fckeditor','FCKEDITOR1');[/code]

4. Put this code inside a form element in your view [code] <?php $this->fckeditor->BasePath = 'system/plugins/FCKeditor/'; $this->fckeditor->ToolbarSet = 'Default'; echo $this->fckeditor->Create() ; ?> [/code]

This is BaseBath that worked for my setup. You can choose a "Basic" or "Default" view for a simple or more advanced toolbar. Edit the appearance and many other things in fckconfig.js

5. This is how you can retreive the POST var after submitting

[code] $wysiwyg= $this->input->post('FCKEDITOR1'); [/code]

Update by shocki

[h3]Generating the FCKeditor HTML in the controller[/h3]

An alternative approach is to call the function that generates the HTML for the rich-text editor from within your controller, and simply pass this through to your view file in the $data array:

[code] $this->load->library('fckeditor', 'FCKEDITOR1');

$this->fckeditor->BasePath = 'system/plugins/fckeditor/'; $this->fckeditor->ToolbarSet = 'Basic';

$data['fck1'] = $this->fckeditor->CreateHtml();

$this->load->view('mypage', $data); [/code]

[h3]TIP: Multiple editor instances on the same page[/h3]

To create multiple instances of the FCKeditor widget on a single page, the InstanceName property of the fckeditor object must be changed:

[code] $this->load->library('fckeditor', 'FCKEDITOR1');

$this->fckeditor->BasePath = 'system/plugins/FCKeditor/'; $this->fckeditor->ToolbarSet = 'Basic';

$data['fck1'] = $this->fckeditor->CreateHtml();

$this->fckeditor->InstanceName = 'FCKEDITOR2';

$data['fck2'] = $this->fckeditor->CreateHtml();

$this->load->view('mypage', $data); [/code]

Here we have instantiated the object with an InstanceName of 'FCKEDITOR1', set some config options, and generated the HTML. Then we simply change the InstanceName to 'FCKEDITOR2' and re-generate the HTML - all other settings remain the same.

You can then retrieve the contents of the editors on submission from the $_POST array as normal:

[code] $first_box = $this->input->post('FCKEDITOR1'); $second_box = $this->input->post('FCKEDITOR2'); [/code]

[h3]TIP: Avoiding 404s[/h3]

When you get an 404 error by trying to load the fck-editor. change: [code] <?php $this->fckeditor->BasePath = 'system/plugins/FCKeditor/'; //to $this->fckeditor->BasePath = base_url() . '/plugins/fckeditor/'; ?> [/code]

[h3]TIP: Config initialisation[/h3]

To use a config like the config initalisation for the pagination core Class add the following code to your fckeditor library which you created like above [code] // --------------------------------------------------------------------

/**
 * Initialize Preferences
 *
 * @access    public
 * @param    array    initialization parameters
 * @return    void
 */
function initialize($params = array())
{
    if (count($params) > 0)
    {
        foreach ($params as $key => $val)
        {
            if (isset($this->$key))
            {
                $this->$key = $val;
            }
        }        
    }
}

[/code]

from now you can initialize your FCK-editor like this: [code] $this->load->library('fckeditor','article_content');

    $FCK_config['BasePath'] = base_url().'system/plugins/FCKeditor/';
    $FCK_config['ToolbarSet'] = 'Default';
    $FCK_config['Width'] = 600;
    $FCK_config['Height'] = 400;
    $FCK_config['Value'] = "";
    $this->fckeditor->initialize($FCK_config);

[/code]

updated by Jaapio