Symfony and TinyMCE rich text editor setup

Performed with Symfony v1.4.4

Install the sfFormExtraPlugin

php symfony plugin:install sfFormExtraPlugin

Download the required version of TinyMCE. Either the standalone version or the jQuery plugin version.

Copy across the source files from your download into the web/js directory. Edit the view.yml to import your script. (jQuery plugin version shown below)

  javascripts:    [jquery-1.4.2.min.js, tiny_mce/jquery.tinymce.js]

Start using the new widget.

$this->widgetSchema['text'] = new sfWidgetFormTextareaTinyMCE(array(
    'width'   => 800,
    'height'  => 300,
));

If required, you can extend the sfWidgetFormTextareaTinyMCE class to customise the configuration. For example:

<?php
class sfWidgetFormTextareaTinyMCECustom extends sfWidgetFormTextarea
{
  public function render($name, $value = null, $attributes = array(), $errors = array())
  {
    $textarea = parent::render($name, $value, $attributes, $errors);
 
    $js = sprintf(<<<EOF
<script type="text/javascript">
$().ready(function() {
  $('textarea').tinymce({
    script_url:                        '/js/tiny_mce/tiny_mce.js',
    mode:                              "exact",
    elements:                          "%s",
    theme:                             "advanced",
    %s
    %s
    theme_advanced_toolbar_location:   "top",
    theme_advanced_toolbar_align:      "left",
    theme_advanced_statusbar_location: "bottom",
    theme_advanced_resizing:           false,
    theme_advanced_buttons1 : "bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,undo,redo,separator,link,addSymImage",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    %s
    setup : function(ed) {
		ed.addButton('addSymImage', {
			title : 'Add image',
			image : '/images/symimg-icon.gif',
			onclick : function() {
				djCms.init(ed);
			}
		});
	}   
  });
});
</script>
EOF
    ,
      $this->generateId($name),
      $this->getOption('width')  ? sprintf('width:                             "%spx",', $this->getOption('width')) : '',
      $this->getOption('height') ? sprintf('height:                            "%spx",', $this->getOption('height')) : '',
      $this->getOption('config') ? ",\n".$this->getOption('config') : ''
    );
 
    return $textarea.$js;
  }
 
  protected function configure($options = array(), $attributes = array())
  {
    $this->addOption('theme', 'advanced');
    $this->addOption('width');
    $this->addOption('height');
    $this->addOption('config', '');
  }
 
}

Use the extended widget in place of sfWidgetFormTextareaTinyMCE.

6 thoughts on “Symfony and TinyMCE rich text editor setup

  1. Hi there!
    Looks nice, I was looking for a way to do that with the jQuery plugin. I still have a question/problem though: if you create a sfWidgetFormTextareaTinyMCECustom, shouldn’t you use it when you create the widget??

  2. Yes, you use your extended widget in place of the standard one that comes with the sfFormExtraPlugin.

  3. Why can’t you just use the ‘config’ option of the sfWidgetFormTextareaTinyMCE widget to pass additional config to TinyMCE ?

  4. I tried doing all this, but in place of text area nothing is coming for me.
    the sfFormExtraPlugin can we install that by just copying the folder and making its entry in ProjectConfiguration file?
    Or what may be the problem?
    I did change in view.yml also….
    Please help

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>