Code snippets for symfony 1.x

Navigation

Refine Tags

Snippets tagged "rich"

Integration of the TinyFCK widget

There are two big open source rich text editors:

Some people prefer the first, some other the second, but there’s a problem for who likes to use TinyMCE: it lacks of a free file manager/uploader.

What we actually need is to have a TinyMCE installation with a free file manager/uploader, thus we take it from FCKEditor.

This is TinyFCK: a TinyMCE with the FCKEditor’s file manager/uploader, nothing less, nothing more.

Installation of TinyFCK rich text editing is described here. You need to download the editor from the project website (http://p4a.crealabsfoundation.org/tinyfck) and unpack it in a temporary folder. Copy the tiny_fck/ directory into your project web/js/ directory, and define the path to the library and new rich editor class in settings.yml.

all:
  .settings:
    rich_text_editor_class: TinyFCK
    rich_text_js_dir:  js/tiny_fck
 

After that create new text editor class file sfRichTextEditorTinyFCK.class.php in your project or application lib/ folder.

<?php
 
/*
 * (c) 2004-2006 Fabien Potencier <fabien.potencier@symfony-project.com>
 * (c) 2007 Eugene Krasichkov <megazlo@megazlo.com>
 *  
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */
 
/**
 * sfRichTextEditorTinyFCK implements the TinyFCK rich text editor.
 *
 * <b>Options:</b>
 *  - css - Path to the TinyFCK editor stylesheet
 *
 *    <b>Css example:</b>
 *    <code>
 *    / * user: foo * / => without spaces. 'foo' is the name in the select box
 *    .foobar
 *    {
 *      color: #f00;
 *    }
 *    </code>
 *
 */
class sfRichTextEditorTinyFCK extends sfRichTextEditor
{
  /**
   * Returns the rich text editor as HTML.
   *
   * @return string Rich text editor HTML representation
   */
  public function toHTML()
  {
    $options = $this->options;
 
    // we need to know the id for things the rich text editor
    // in advance of building the tag
    $id = _get_option($options, 'id', $this->name);
 
    // use tinymce's gzipped js?
    $tinymce_file = _get_option($options, 'tinymce_gzip') ? '/tiny_mce_gzip.php' : '/tiny_mce.js';
 
    // tinymce installed?
    $js_path = sfConfig::get('sf_rich_text_js_dir') ? '/'.sfConfig::get('sf_rich_text_js_dir').$tinymce_file : '/sf/tinymce/js'.$tinymce_file;
    if (!is_readable(sfConfig::get('sf_web_dir').$js_path))
    {
      throw new sfConfigurationException('You must install TinyFCK to use this helper (see rich_text_js_dir settings).');
    }
 
    sfContext::getInstance()->getResponse()->addJavascript($js_path);
 
    use_helper('Javascript');
 
    $tinymce_options = '';
    $style_selector  = '';
 
    // custom CSS file?
    if ($css_file = _get_option($options, 'css'))
    {
      $css_path = stylesheet_path($css_file);
 
      sfContext::getInstance()->getResponse()->addStylesheet($css_path);
 
      $css    = file_get_contents(sfConfig::get('sf_web_dir').DIRECTORY_SEPARATOR.$css_path);
      $styles = array();
      preg_match_all('#^/\*\s*user:\s*(.+?)\s*\*/\s*\015?\012\s*\.([^\s]+)#Smi', $css, $matches, PREG_SET_ORDER);
      foreach ($matches as $match)
      {
        $styles[] = $match[1].'='.$match[2];
      }
 
      $tinymce_options .= '  content_css: "'.$css_path.'",'."\n";
      $tinymce_options .= '  theme_advanced_styles: "'.implode(';', $styles).'"'."\n";
      $style_selector   = 'styleselect,separator,';
    }
 
    $culture = sfContext::getInstance()->getUser()->getCulture();
 
    $tinymce_js = '
tinyMCE.init({
  mode: "exact",
  language: "'.strtolower(substr($culture, 0, 2)).'",
  elements: "'.$id.'",
  plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,paste,directionality,fullscreen,noneditable,contextmenu",
  theme: "advanced",
  theme_advanced_buttons1_add_before : "save,newdocument,separator",
    theme_advanced_buttons1_add : "fontselect,fontsizeselect",
    theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor,liststyle",
    theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
    theme_advanced_buttons3_add_before : "tablecontrols,separator",
    theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
  theme_advanced_resizing : true,
  theme_advanced_resize_horizontal : false,
  plugin_insertdate_dateFormat : "%Y-%m-%d",
  plugin_insertdate_timeFormat : "%H:%M:%S",
  file_browser_callback : "tinyFCKFileBrowserCallBack",
  paste_use_dialog : false,
  extended_valid_elements: "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]",
  apply_source_formatting : true,
  relative_urls: false,
  debug: false
  '.($tinymce_options ? ','.$tinymce_options : '').'
  '.(isset($options['tinymce_options']) ? ','.$options['tinymce_options'] : '').'
});
 
  function tinyFCKFileBrowserCallBack(field_name, url, type, win) {
    var connector = "../../filemanager/browser.html?Connector=connectors/php/connector.php";
    var enableAutoTypeSelection = true;
 
    var cType;
    tinyfck_field = field_name;
    tinyfck = win;
 
    switch (type) {
      case "image":
        cType = "Image";
        break;
      case "flash":
        cType = "Flash";
        break;
      case "file":
        cType = "File";
        break;
    }
 
    if (enableAutoTypeSelection && cType) {
      connector += "&Type=" + cType;
    }
 
    window.open(connector, "tinyfck", "modal,width=600,height=400");
  }';
 
    if (isset($options['tinymce_options']))
    {
      unset($options['tinymce_options']);
    }
 
    return
      content_tag('script', javascript_cdata_section($tinymce_js), array('type' => 'text/javascript')).
      content_tag('textarea', $this->content, array_merge(array('name' => $this->name, 'id' => get_id_from_name($id, null)), _convert_options($options)));
  }
}
 

Then clear cache:

symfony cc
 

Once this is done, toggle the use of rich text editing in text areas by adding the rich=true option. You can also specify custom options for the TinyFCK editor using the tinymce_options option.

<?php echo textarea_tag('name', 'default content', 'rich=true size=10x20')) ?>
 => a rich text edit zone powered by TinyFCK
<?php echo textarea_tag('name', 'default content', 'rich=true size=10x20tinymce_options=language:"fr",theme_advanced_buttons2:"separator"')) ?>
=> a rich text edit zone powered by TinyFCK with custom parameters
 
by Eugene Krasichkov on 2007-12-27, tagged editor  fckeditor  form  forms  helper  rich  tinyfck  tinymce 
(1 comment)

Rich select_date_tag

select_date_tag is not available in 'rich' version. Waiting for a real enhancement, this is my workaround.

This is the RichDateHelper.php file:

<?php
 
use_helper('Form');
 
function rich_select_date_tag($name, $value = null, $options = array(), $html_options = array()) {
 
    $context = sfContext::getInstance();
  if (isset($options['culture']))
  {
    $culture = $options['culture'];
    unset($options['culture']);
  }
  else
  {
    $culture = $context->getUser()->getCulture();
  }
 
    // register our javascripts and stylesheets
  $langFile = '/sf/js/calendar/lang/calendar-'.strtolower(substr($culture, 0, 2));
  $jss = array(
    '/sf/js/calendar/calendar',
    is_readable(sfConfig::get('sf_symfony_data_dir').'/web/'.$langFile.'.js') ? $langFile : '/sf/js/calendar/lang/calendar-en',
    '/sf/js/calendar/calendar-setup',
  );
  foreach ($jss as $js)
  {
    $context->getResponse()->addJavascript($js);
  }
 
  $js = '
        function updateSelect(cal) {
            var date = cal.date;
            var selectMonth = document.getElementById("'.get_id_from_name($name).'_month");
            selectMonth.selectedIndex = date.getMonth();
            var selectDay = document.getElementById("'.get_id_from_name($name).'_day");
            selectDay.selectedIndex = (date.getDate() - 1);
            var selectYear = document.getElementById("'.get_id_from_name($name).'_year");
            selectYear.selectedIndex = (date.getFullYear() - '.$options['year_start'].');
        }
    document.getElementById("trigger_'.$name.'").disabled = false;
    Calendar.setup({
            inputField : "'.$name.'_rich_sel_date",
            ifFormat : "%Y-%m-%d",
            button : "trigger_'.$name.'",
            singleClick : true,
            onUpdate : updateSelect,
            showsTime : false,
            range : ['.$options['year_start'].', '.$options['year_end'].'],
            showOthers : false,
            cache : 1,
            weekNumbers : false,
            firstDay : 1
    });
  ';
 
    $html = select_date_tag($name, $value, $options, $html_options);
 
  // calendar button
  $calendar_button = '...';
  $calendar_button_type = 'txt';
  if (isset($options['calendar_button_img']))
  {
    $calendar_button = $options['calendar_button_img'];
    $calendar_button_type = 'img';
    unset($options['calendar_button_img']);
  }
  else if (isset($options['calendar_button_txt']))
  {
    $calendar_button = $options['calendar_button_txt'];
    $calendar_button_type = 'txt';
    unset($options['calendar_button_txt']);
  }
 
  if ($calendar_button_type == 'img')
  {
    $html .= image_tag($calendar_button, array('id' => 'trigger_'.$name, 'style' => 'cursor: pointer'));
  }
  else
  {
    $html .= content_tag('button', $calendar_button, array('type' => 'button', 'disabled' => 'disabled', 'onclick' => 'return false', 'id' => 'trigger_'.$name));
  }
 
  // add javascript
  $html .= content_tag('script', $js, array('type' => 'text/javascript'));
  $html .= '<div id="'.$name.'_rich_sel_date" style="display: inline;"></div>';
 
  return $html;
}
by Jacopo Romei on 2006-07-31, tagged date  forms  helper  rich  select 
(2 comments)