Integrate and customize fckeditor with symfony

Till date, I always preferred tinymce rich text editor with symfony. But noticing that it does not provide inbuilt functionality for file uploading with browse.


After getting my hands burns on with plug-ins, I than moved to remove the tinymce and go with FCKEditor. Believe me it was worth opting for the later. Though it was not an easy task to get it work with symfony 1.4 but neither it was too hard if followed the basic steps.

Below are steps which provide me with perfect integration of fckEditor.

I am assuming, you already have fckeditor symfony plug-in and fckeditor js lib in your source code.

1: Copy and paste fckeditor_php5.php
           copy from projectName/web/js/fckeditor/fckeditor_php5.php TO projectName/lib/fckeditor_php5.php
2. save fckconfig.js as customconfig.js
           copy from projectName/web/js/fckeditor/fckconfig.js TO projectName/web/js/fckeditor/customconfig.js


Basically, you would have to make all your changes to customconfig.js and no change to fckconfig.js
Though it seems typical, I tried changing directly fckconfig.js but to no avail. It did not had any changes affected. :(

In customconfig.js
 1. to change the skin theme, FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;
// there are 3 skins available. Default, silver and office2003
 2. To provide only required ToolbarSets, change appropriate changes to FCKConfig.ToolbarSets["Default"]
Mine is as below:

FCKConfig.ToolbarSets["Default"] = [
    ['Source','DocProps', 'Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
    ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','Rule','Smiley','SpecialChar'],
    '/',
    ['Style','FontFormat','FontName','FontSize'],
    ['TextColor','BGColor'],
    ['FitWindow','ShowBlocks','-','About']        // No comma for the last row.
] ;
3. to allow fckeditor to submit data to the form set below config to false. If its set to true than no change in data would be send to serve.
FCKConfig.MsWebBrowserControlCompat = false ;
FCKConfig.PreventSubmitHandler = false ;

Now the final change:

Since we have change the config file from fckconfig.js to customconfig.js, we need to load the same js.
To change so, open fckeditor.html at     /js/fckeditor/editor/fckeditor.html
Change LoadScript( '../fckconfig.js' )  to LoadScript( '../customconfig.js' ) ;

For Symfony changes
Get the sfFCKEditorPlugin from here
install the plugin
Enable plugin from your config/ProjectConfiguration.class.php
$this->enablePlugins('sfFCKEditorPlugin');

Make the change in settings.yml in your modules directroy
all:
  .settings:
    rich_text_fck_js_dir: js/fckeditor

In the form.class, do the following for widget you need fckeditor:
$oFCKEditor = new sfWidgetFormFCKEditor(array('rows'=>50));
$this->setWidgets(array('Text'  =>  $oFCKEditor,));

This is it. Hope it helps.

For any concerns, feel free to mail me or post comments