Using tinyMCE with Symfony

Scene from "Dirty Dancing" by Emile Ardolino (1987)

Symfony gives you a possibility to use lots of third party libraries. One of them, extremely useful while developing backend of your application, is tinyMCE.

The symfony core team has created the sfFormExtraPlugin which helps you to attach tinyMCE to your projects. But there's a lot more you can do to make this editor satisfy your needs.

Configuring tinyMCE

• I'm assuming you have properly installed the sfFormExtraPlugin inside your project.
• First of all, you need to install tinyMCE on your own. Go to the download page, and put the extracted content inside your project's web directory. The downloaded archive includes tinyMCE usage examples, you may remove them and include only the tiny_mce directory inside your /web/js directory.
• Right after including the tinyMCE files don't forget to attach them to the application: go to the backend/config/view.yml file and add the tiny_mce.js file. It should look similar to the following:

  javascripts:    [ /js/tiny_mce/tiny_mce.js ]

  TinyMCE is properly installed in our app already. Now it's time to set the inputs to use it.
• Edit any of your lib/form classes and set the appropriate widget:

  class SubpageForm extends BaseSubpageForm
  {
    public function configure()
    {
      $this->widgetSchema['content'] =
        new sfWidgetFormTextareaTinyMCE();
    }
  }

  Run your backend application and check if everything is OK.

Advanced tinyMCE configuration

Lots of us may create websites for non-English communities, therefore custom language support is needed. Of course, there are more specific attributes you may want to change. Unfortunately, the sfWidgetFormTextareaTinyMCE class provided with the plugin is hardly configurable. The best solution is to create a custom class extending it and override all the attributes you need.

• Create a sfWidgetFormTextareaTinyMCECustom class in the /lib/widget directory of your project:

  class sfWidgetFormTextareaTinyMCECustom extends sfWidgetFormTextareaTinyMCE

• Override the render method. The main code that we are interested in is:

  $js = sprintf(<<<EOF
  <script type="text/javascript">
  tinyMCE.init({
      mode:                              "exact",
      elements:                          "%s",
      theme:                             "%s",
      plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,imagemanager,filemanager",
      language: "pl",
      %s
      %s
      theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
      theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
      theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
      theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
      theme_advanced_toolbar_location:   "top",
      theme_advanced_toolbar_align:      "left",
      theme_advanced_statusbar_location: "bottom",
      theme_advanced_resizing:           true
      %s
    });
   
  </script>
  EOF

• Let's get our custom language working with the tinyMCE now. Go to the language pack download page. Choose the language(s) you want to install, check them (do not download the xml files since you'd have to compile them into the .js files) and press the download just below the end of the list. Move the zip archive into the tiny_mce directory and extract it there. All language files will be extracted in the appropriate places. So far, so good.
• Edit the render method - add the following code inside the javascript code mentioned above:

  language: "pl",

  and your language pack should already work fine.
• Since the default tinyMCE configuration doesn't include all possible features, you may add the following lines to enable all features:

  plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,imagemanager,filemanager",
  

  and

  theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
      theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
      theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
      theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
  

• After those modifications your code should look like the following:

  $js = sprintf(<<<EOF
  <script type="text/javascript">
    tinyMCE.init({
      mode:                              "exact",
      elements:                          "%s",
      theme:                             "%s",
      plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,imagemanager,filemanager",
      language: "pl",
      %s
      %s
      theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
      theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
      theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
      theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
      theme_advanced_toolbar_location:   "top",
      theme_advanced_toolbar_align:      "left",
      theme_advanced_statusbar_location: "bottom",
      theme_advanced_resizing:           true
      %s
    });
  </script>
  EOF
  

  Of course, you may not need all of the tinyMCE features, feel free to modify the code.
• Just to make sure, such installation enables all tinyMCE features on your frontend application, such as emoticon images. Play with it!

Hope everything will work fine. Any feedback is appreciated.