Category: plugins

We wrote about WYSIWYG editors in Symfony a long time ago. Now we would like to mention about using CKEditor with symfony and specifically its usage in AJAX mode.

So the quickest way to start with CKEditor is to install sfCkPlugin

The installation is easy and its described in readme file.
It’s worth to mention that basically only thing which plugin does – it automatically replaces all “textarea” instances on pages with CKEditor box unless textbox is marked as class=”‘no-editor'” (in this case it will appear as standard HTML textarea box, in form class e.g.

$this->widgetSchema['myTextarea'] = new sfWidgetFormTextarea(array(), array('class' => 'no-editor'));

So core of plugin is the following JS code:

  var textareas = document.getElementsByTagName("textarea");
 
  for(i=0; i < textareas.length; i++)
  {
    if(textareas.item(i).getAttribute('class') !== "no-editor")
    {
      CKEDITOR.replace( textareas.item(i).getAttribute('name'),
      {
        customConfig : '/js/ckeditor_config.js'
      });
 
    }
  }

which you can obviously update the way you need (e.g. originally it does not include path to custom config file).

Now important note, if you want to use CKEditor (I’m sure it can be applied to most of WYSIWYG editors) in AJAX mode, you have add extra code which would update actual textarea value with content added in CKEditor.

So lets say you have textarea with id “body” and you want to send remote AJAX request to some action/method, key thing here is populate on submit value of “body” DOM element with entered content as follows:

<?php echo jq_form_remote_tag(array('url' => url_for('action/method'), 'update'  => "success")) ?>
<input type="submit" value="Send" onClick="$('#body').val(CKEDITOR.instances.body.getData()); return true;" />

Hope it will be helpful for you 🙂