FCKeditor

Category:Library::External | Category:Library::WYSIWYG

Introduction

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:

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

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:

<?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';
?>

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

$this->load->library('fckeditor');

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

$this->fckeditor->BasePath = base_url() . '/plugins/fckeditor/';
$this->fckeditor->Value        = 'This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.' ;
$this->fckeditor->Create() ;

That's it! Hope this helps.

-Slith Iron Eye / The Seventh Letter

Update for CI 1.5

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

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 ) ;
    }

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

3. Put this into your controller

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

4. Put this code inside a form element in your view

<?php $this->fckeditor->BasePath = 'system/plugins/FCKeditor/';
      $this->fckeditor->ToolbarSet = 'Default';
      echo $this->fckeditor->Create() ;
?>

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

$wysiwyg= $this->input->post('FCKEDITOR1');

Update by shocki

Update for CI 1.7

Few things you may wanna know when you're following the steps described as above: (1) Due to the change of CI's loader class, you have to load the fckeditor library this way:

$this->load->library('fckeditor',array('instanceName' => 'content'));

(2) For the same reason, you have to modify "system/application/libraries/fckeditor.php" find the contructor of the class and make these changes:

function __construct( $array )
{
    $this->InstanceName    = $array['instanceName'] ;
    .....
    .....
}

updated by [email protected]

Generating the FCKeditor HTML in the controller

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:

$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);

TIP: Multiple editor instances on the same page

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

$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);

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:

$first_box = $this->input->post('FCKEDITOR1');
$second_box = $this->input->post('FCKEDITOR2');

TIP: Avoiding 404s

When you get an 404 error by trying to load the fck-editor. change:

<?php $this->fckeditor->BasePath = 'system/plugins/FCKeditor/';
//to
$this->fckeditor->BasePath = base_url() . '/plugins/fckeditor/';
?>

TIP: Config initialisation

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

    // --------------------------------------------------------------------
    
    /**
     * 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;
                }
            }        
        }
    }

from now you can initialize your FCK-editor like this:

       $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);

Note: XSS filtering may result in an empty post being returned.

TIP: crashing httpd when using .htaccess

I was having problems with a clean install while using a rewrite rule; whenever I tried to browse the uploads directory, the httpd process serving the request for the dir would crash. There is a recursive call in filemanager/connectors/php/io.php CreateServerFolder() that appears to never exit. On one occasion it did, so there is something odd going on in there.

Workaround is to create your upload directory, and under that create your image and file directories rather than rely on FCKeditor creating them. Also check the FCKeditor docs on safe mode for php.