Helper TinyMCE for CakePHP 2

by galitul
Helper TinyMCE for CakePHP 2 with preset fuction.

TinyMCE

1. Download TinyMCE : http://www.tinymce.com/download/download.php
2. Copy /tinymce/jscripts/tiny_mce folder to /app/webroot/js (like : /app/webroot/js/tiny_mce).

Controller

public $helpers = array('Tinymce');

Helper code

app/View/Helper/TinymceHelper.php

<?php 
App
::uses('AppHelper''View/Helper');
 
class 
TinymceHelper extends AppHelper {
   
    
// Take advantage of other helpers
    
public $helpers = array('Js''Html''Form');

    
// Check if the tiny_mce.js file has been added or not
    
public $_script false;

    
/**
    * Adds the tiny_mce.js file and constructs the options
    *
    * @param string $fieldName Name of a field, like this "Modelname.fieldname"
    * @param array $tinyoptions Array of TinyMCE attributes for this textarea
    * @return string JavaScript code to initialise the TinyMCE area
    */
    
function _build($fieldName$tinyoptions = array()){
        if(!
$this->_script){
            
// We don't want to add this every time, it's only needed once
            
$this->_script true;
            
$this->Html->script('tiny_mce/tiny_mce', array('inline' => false));
        }

        
// Ties the options to the field
        
$tinyoptions['mode'] = 'exact';
        
$tinyoptions['elements'] = $this->domId($fieldName);

        
// List the keys having a function
        
$value_arr = array();
        
$replace_keys = array();
        foreach(
$tinyoptions as $key => &$value){
            
// Checks if the value starts with 'function ('
            
if(strpos($value'function(') === 0){
                
$value_arr[] = $value;
                
$value '%' $key '%';
                
$replace_keys[] = '"' $value '"';
            }
        }

        
// Encode the array in json
        
$json $this->Js->object($tinyoptions);

        
// Replace the functions
        
$json str_replace($replace_keys$value_arr$json);
        
$this->Html->scriptStart(array('inline' => false));
        echo 
'tinyMCE.init(' $json ');';
        
$this->Html->scriptEnd();
    }
 
    
/**
    * Creates a TinyMCE textarea.
    *
    * @param string $fieldName Name of a field, like this "Modelname.fieldname"
    * @param array $options Array of HTML attributes.
    * @param array $tinyoptions Array of TinyMCE attributes for this textarea
    * @param string $preset
    * @return string An HTML textarea element with TinyMCE
    */
    
function textarea($fieldName$options = array(), $tinyoptions = array(), $preset null){
        
// If a preset is defined
        
if(!empty($preset)){
            
$preset_options $this->preset($preset);

            
// If $preset_options && $tinyoptions are an array
            
if(is_array($preset_options) && is_array($tinyoptions)){
                
$tinyoptions array_merge($preset_options$tinyoptions);
            }else{
                
$tinyoptions $preset_options;
            }
        }
        return 
$this->Form->textarea($fieldName$options) . $this->_build($fieldName$tinyoptions);
    }
 
    
/**
    * Creates a TinyMCE textarea.
    *
    * @param string $fieldName Name of a field, like this "Modelname.fieldname"
    * @param array $options Array of HTML attributes.
    * @param array $tinyoptions Array of TinyMCE attributes for this textarea
    * @return string An HTML textarea element with TinyMCE
    */
    
function input($fieldName$options = array(), $tinyoptions = array(), $preset null){
        
// If a preset is defined
        
if(!empty($preset)){
            
$preset_options $this->preset($preset);

            
// If $preset_options && $tinyoptions are an array
            
if(is_array($preset_options) && is_array($tinyoptions)){
                
$tinyoptions array_merge($preset_options$tinyoptions);
            }else{
                
$tinyoptions $preset_options;
            }
        }
        
$options['type'] = 'textarea';
        return 
$this->Form->input($fieldName$options) . $this->_build($fieldName$tinyoptions);
    }
   
    
/**
    * Creates a preset for TinyOptions
    *
    * @param string $name
    * @return array
    */
    
private function preset($name){
        
// Full Feature
        
if($name == 'full'){
            return array(
                
'theme' => 'advanced',
                
'plugins' => 'safari,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',
                
'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,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak',
                
'theme_advanced_toolbar_location' => 'top',
                
'theme_advanced_toolbar_align' => 'left',
                
'theme_advanced_statusbar_location' => 'bottom',
                
'theme_advanced_resizing' => true,
                
'theme_advanced_resize_horizontal' => false,
                
'convert_fonts_to_spans' => true,
                
'file_browser_callback' => 'ckfinder_for_tiny_mce'
            
);
        }

        
// Basic
        
if($name == 'basic'){
            return array(
                
'theme' => 'advanced',
                
'plugins' => 'safari,advlink,paste',
                
'theme_advanced_buttons1' => 'code,|,copy,pastetext,|,bold,italic,underline,|,link,unlink,|,bullist,numlist',
                
'theme_advanced_buttons2' => '',
                
'theme_advanced_buttons3' => '',
                
'theme_advanced_toolbar_location' => 'top',
                
'theme_advanced_toolbar_align' => 'center',
                
'theme_advanced_statusbar_location' => 'none',
                
'theme_advanced_resizing' => false,
                
'theme_advanced_resize_horizontal' => false,
                
'convert_fonts_to_spans' => false
            
);
        }

        
// Simple
        
if($name == 'simple'){
            return array(
                
'theme' => 'simple',
            );
        }

        
// BBCode
        
if($name == 'bbcode'){
            return array(
                
'theme' => 'advanced',
                
'plugins' => 'bbcode',
                
'theme_advanced_buttons1' => 'bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code',
                
'theme_advanced_buttons2' => '',
                
'theme_advanced_buttons3' => '',
                
'theme_advanced_toolbar_location' => 'top',
                
'theme_advanced_toolbar_align' => 'left',
                
'theme_advanced_styles' => 'Code=codeStyle;Quote=quoteStyle',
                
'theme_advanced_statusbar_location' => 'bottom',
                
'theme_advanced_resizing' => true,
                
'theme_advanced_resize_horizontal' => false,
                
'entity_encoding' => 'raw',
                
'add_unload_trigger' => false,
                
'remove_linebreaks' => false,
                
'inline_styles' => false
            
);
        }
        return 
null;
    }
}

Behavior

$this->Tinymce->input($Model.fieldName, $options = array(), $tinyoptions = array(), $preset = null)

Example

<div class="posts form">
<?php echo $this->Form->create('Post');?>
    <fieldset>
        <legend><?php echo __('Add Post'); ?></legend>
    <?php
        
echo $this->Form->input('title');
        echo 
$this->Tinymce->input('Post.content', array(
            
'label' => 'Content'
            
),array(
                
'language'=>'en'
            
),
            
'bbcode'
        
);
    
?>
    </fieldset>
<?php echo $this->Form->end(__('Submit'));?>
</div>

Thanks

http://bakery.cakephp.org/articles/daibach/2008/07/15/tinymce-helper-1
http://forum.cakephp-fr.org/viewtopic.php?id=1136

Report

More on Helpers

Advertising

Comments

  • Dvd74 posted on 11/12/13 09:38:37 AM
    I should include an external plugin of tinymce:

    'external_plugins' => array("filemanager" => "/filemanager/plugin.min.js")

    But I received a warning:

    Warning (2): strpos() expects parameter 1 to be string, array given [APP/Plugin/TinyMCE/View/Helper/TinyMCEHelper.php, line 36]
    // List the keys having a function
    $value_arr = array();
    $replace_keys = array();
    foreach ($tinyoptions as $key => &$value) {
    // Checks if the value starts with 'function ('
    if (strpos($value, 'function(') === 0) {
    $value_arr[] = $value;
    $value = '%' . $key . '%';
    $replace_keys[] = '"' . $value . '"';
    }
    }
  • Dvd74 posted on 11/12/13 09:38:07 AM
    I should include an external plugin of tinymce:

    'external_plugins' => array("filemanager" => "/filemanager/plugin.min.js")

    But I received a warning:

    Warning (2): strpos() expects parameter 1 to be string, array given [APP/Plugin/TinyMCE/View/Helper/TinyMCEHelper.php, line 36]
    // List the keys having a function
    $value_arr = array();
    $replace_keys = array();
    foreach ($tinyoptions as $key => &$value) {
    // Checks if the value starts with 'function ('
    if (strpos($value, 'function(') === 0) {
    $value_arr[] = $value;
    $value = '%' . $key . '%';
    $replace_keys[] = '"' . $value . '"';
    }
    }
  • arjanvaneersel posted on 02/01/13 02:49:15 PM
    Hi there.

    Great post, helped me a lot.

    I have only a small problem, which is that tiny seems to have some default behavior to escape everything. I many cases that's a good thing, however I am now writing an app in where I want to get raw HTML.

    So my question is how I can make your helper prevent tiny from escaping input?

    Thanks for the help!
  • selukov posted on 08/07/12 06:31:53 AM
    Many thanks!!!
  • karthi0110 posted on 05/25/12 06:33:16 PM
    It's just showing textarea. What will be the problem
  • lorenzo posted on 05/09/12 04:38:03 PM
    I use the CakeDC's plugin called TinyMce that is available in their github account
  • hugot posted on 05/09/12 04:25:01 PM
    Great article, worked at first try! Thanks!!
  • galitul posted on 04/29/12 09:24:44 PM
    Can you give more detail ?
  • lily posted on 04/28/12 12:47:51 PM
    no error message, just didn't response
    could you give some help
login to post a comment.