Something Emporium

Rich Text Editor Widget in Symfony 1.1

I was pretty amazed to discover that there doesn't seem to be a rich text editor widget for the new Symfony 1.1 forms framework. The forms part of the new version is fairly controversial, and it's not intended to be anything like backward compatible with 1.0 forms/validators, but I was genuinely suprised to see there wasn't a rich text editor out-of-the-box. Here's how to get one, fairly easily:

Install TinyMCE the same way you would in Symfony 1.0. This involves downloading TinyMCE, and making it web accessible. Then you have to uncomment and edit the rich_text_js_dir directive in your app's settings.yml.

To check you have TinyMCE installed correctly, before continuing, create a template with:

<?php use_helper('Form') ?>
<?php echo textarea_tag('some', 'content',
  array('rich' => true)) ?>

Then view the template. You should see the TinyMCE editor. Now we just need to get it working with the new forms system. Introducing myWidgetFormRichTextarea:

/**
 * myWidgetFormRichTextarea represents a rich text editor.
 *
 * @author     Dominic Scheirlinck <dominic@dubdot.com>
 */
class myWidgetFormRichTextarea extends sfWidgetFormTextarea
{
  /**
   * @param array $options     An array of options
   * @param array $attributes  An array of default HTML attributes
   *
   * @see sfWidgetForm
   */
  protected function configure($options = array(), $attributes = array())
  {
    $this->addOption('editor', 'tinymce');
    $this->addOption('tinymce_options', '');
    $this->addOption('tinymce_gzip', false);
    $this->addOption('css', false);
    
    parent::configure($options, $attributes);
  }
  
  /**
   * @param  string $name        The element name
   * @param  string $value       The value displayed in this widget
   * @param  array  $attributes  An array of HTML attributes to be merged with the default HTML attributes
   * @param  array  $errors      An array of errors for the field
   *
   * @return string An HTML tag string
   *
   * @see sfWidgetForm
   */
  public function render($name, $value = null, $attributes = array(), $errors = array())
  {
    $editorClass = 'sfRichTextEditor' . $this->toCanonicalCase($this->getOption('editor'));
    if (!class_exists($editorClass)) {
      throw new sfConfigurationException(sprintf('The rich text editor "%s" does not exist.', $editorClass));
    }
    
    $editor = new $editorClass();
    if (!in_array('sfRichTextEditor', class_parents($editor))) {
      throw new sfConfigurationException(sprintf('The editor "%s" must extend sfRichTextEditor.', $editor));
    }

    $attributes = array_merge($attributes, $this->getOptions());
    $editor->initialize($name, $value, $attributes);
    return $editor->toHTML();
  }
  
  /**
   * Converts a lower-case editor name to its canonical case
   *
   * @param string $editor
   * @return string
   */
  private function toCanonicalCase($editor)
  {
    switch ($editor) {
      case 'tinymce':
        return 'TinyMCE';
      case 'fck':
        return 'FCK';
    }
  }
}

If you're just using it to replace a textarea, you don't need to do anything much to use the rich widget – it'll use your existing rows and cols html attributes, and make the rich editor the right size automatically.

This might not work with future versions of Symfony, because it relies on the sfRichTextEditorTinyMCE class, which I think is only used to provide backward compatibility with 1.0.

Dominic

Tue, 12/8/08 – 11:05pm

• Testing anti-spammer system

  Rodri

  Thu, 28/8/08 – 10:58pm

  Reply

• hi, i'd like to test your work but don't know where to put the Widet Code/File to get it recognised by symfony? Perhaps you could help me out? :-)

  zero

  Fri, 5/9/08 – 3:44am

  Reply

• You'll need to put the class in a file called myWidgetFormRichTextarea.class.php (the .class bit is important) and then put that file somewhere Symfony can get at it. Any of your project's, app's or module's lib/ directories should be fine. Or any subdirectory of a lib/ directory (say, lib/widget).
  
  Once you've done that, you'll need to clear Symfony's cache, otherwise the class won't be autoloaded.

  Dominic

  Sat, 6/9/08 – 8:03pm

  Reply

• Thanks for this, it works perfectly!
  
  I can't believe it's still so awkward to use a rich editor in symfony, I finally got TinyMCE installed in the right place and it's still a pain to use it.
  
  At least your class makes it a bit easier. Thanks again!

  smegware

  Thu, 11/9/08 – 9:59am

  Reply

Menu