TinyMCE helper
This is a basic helper to make it really easy to use TinyMCE inside CakePHP.
Notes
To specify any TinyMCE options, provide the extra $tinyoptions array with the information. It'll be converted to JavaScript and used when creating the editor.Tiny MCE
Go and grab TinyMCE from its website http://tinymce.moxiecode.com/download.php and copy the /tinymce/jscripts/tiny_mce folder to the /app/webroot/jsController
Download code
var $helpers = Array('Form', 'Tinymce');
Helper code
app/views/helpers/tinymce.phpDownload code
<?php
class TinyMceHelper extends AppHelper {
// Take advantage of other helpers
var $helpers = array('Javascript', 'Form');
// Check if the tiny_mce.js file has been added or not
var $_script = false;
/**
* Adds the tiny_mce.js file and constructs the options
*
* @param string $fieldName Name of a field, like this "Modelname.fieldname", "Modelname/fieldname" is deprecated
* @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->Javascript->link('/js/tiny_mce/tiny_mce.js', false);
}
// Ties the options to the field
$tinyoptions['mode'] = 'exact';
$tinyoptions['elements'] = $this->__name($fieldName);
return $this->Javascript->codeBlock('tinyMCE.init(' . $this->Javascript->object($tinyoptions) . ');');
}
/**
* Creates a TinyMCE textarea.
*
* @param string $fieldName Name of a field, like this "Modelname.fieldname", "Modelname/fieldname" is deprecated
* @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 textarea($fieldName, $options = array(), $tinyoptions = array()) {
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", "Modelname/fieldname" is deprecated
* @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()) {
$options['type'] = 'textarea';
return $this->Form->input($fieldName, $options) . $this->_build($fieldName, $tinyoptions);
}
}
?>
View example
Download code
<div class="form-container">
<?php echo $form->create('Page'); ?>
<fieldset>
<legend>Page</legend>
<?php
echo $form->input('title');
echo $tinymce->input('content');
?>
</fieldset>
<?php echo $form->end('Save'); ?>
</div>
Here's an example supplying some extra tinyMCE configuration optionsDownload code
<div class="form-container">
<?php echo $form->create('Page'); ?>
<fieldset>
<legend>Page</legend>
<?php
echo $form->input('title');
echo $tinymce->input('content', null, array(
'theme' => 'advanced',
'theme_advanced_toolbar_location' => 'top',
'theme_advanced_toolbar_align' => 'left',
'theme_advanced_statusbar_location' => 'bottom',
));
?>
</fieldset>
<?php echo $form->end('Save'); ?>
</div>
Suggestions
Everyone should know that letting users submit HTML can be a bit risky when it comes to displaying it, unless you trust them of couse (like an admin user). If you want more general users taking advantage of something like this, I'd suggest looking into something like http://htmlpurifier.org/. This parses the HTML and can remove anything you don't want submitted.
Comments
Question
1 TinyMCE attributes for the textarea
Actually I need a configuration like the following one:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "inlinepopups,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
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,|,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,|,visualchars,nonbreaking",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});
Thank you very much for you help.
Comment
2 TinyMCE attributes example
You basically pass the helper a third parameter that is a php array similar to the JavaScript object that TinyMCE usually gets.
Note that you shouldn't supply a "mode" since the helper will create that bit for you and tie it to the textarea automatically.
Hope that explains things,
Dave
Comment
3 solve the tinyMcc issue
View Template:
<div>
<?php echo $form->create('Page'); ?>
<?php
echo $tinymce->input('content', null, 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" => "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect",
"theme_advanced_buttons2"=> "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,image,code,|,insertdate,inserttime,preview,|,forecolor,backcolor,advhr,|,print,|fullscreen",
"theme_advanced_buttons3" => "",
//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,
));
?>
<?php echo $form->end('Save'); ?>
</div>
Comment
4 Multiple Instances in Same page
I need for multiple language editing.
Thanks
Comment
5 great helper