You're in the army now
Zend + TinyMCE
Zend Form & TinyMCE
first we create an additional view helper called formTinyMce. This will be the helper that will actually build our element. Those familiar with the framework wil recognise this as a modified version of the text area helper.
tinyMce = $this->view->tinyMce();
$this->tinyMce->enable();
return $this;
}
public function formTinyMce($name, $value = null, $attribs = null, $options = null)
{
$info = $this->_getInfo($name, $value, $attribs);
extract($info); // name, value, attribs, options, listsep, disable
// is it disabled?
$disabled = '';
if ($disable) {
// disabled.
$disabled = ' disabled="disabled"';
}
// Make sure that there are 'rows' and 'cols' values
// as required by the spec. noted by Orjan Persson.
if (empty($attribs['rows'])) {
$attribs['rows'] = (int) $this->rows;
}
if (empty($attribs['cols'])) {
$attribs['cols'] = (int) $this->cols;
}
if (isset($attribs['editorOptions'])) {
$attribs['editorOptions']['mode'] = 'textareas';
if (!isset($attribs['editorOptions']['theme'])) $attribs['editorOptions']['theme'] = "simple";
$this->tinyMce->setEditorOptions($attribs['editorOptions']);
if (!isset($attribs['class'])) {
$attribs['class'] = $attribs['editorOptions']['editor_selector'];
} else {
$attribs['class'] .= ' ' . $attribs['editorOptions']['editor_selector'];
}
unset($attribs['editorOptions']);
}
if (!isset($attribs['class'])) {
$attribs['class'] = 'tinyMceEditor' ;
}
// build the element
$xhtml = '';
return $xhtml;
}
}
Now that we have the view helper in place we can now create a form element very very easily.
All you need to do is create your element file which will extend the existing Zend_Form_Element_Textarea and specify the newly created helper.
class MyLibrary_Form_Element_TinyMce extends Zend_Form_Element_Textarea
{
/**
* Use formTextarea view helper by default
* @var string
*/
public $helper = 'formTinyMce';
}
Now you just need to register your library in your form object and call the new element types. The whole thing will also allow you to use the element with a Zend_Config object too. I tend to use Ini files
form.elements.body.type = "tinyMce" form.elements.body.options.cols = 60 form.elements.body.options.rows = 20 form.elements.body.options.label = "Content" form.elements.body.options.description = "The main content of the page." form.elements.body.options.editorOptions.theme = "advanced" form.elements.body.options.editorOptions.editor_selector = "body" form.elements.body.options.editorOptions.theme_advanced_buttons1 = "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect,|,template" form.elements.body.options.editorOptions.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" form.elements.body.options.editorOptions.theme_advanced_buttons3 = "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|ltr,rtl,|,fullscreen" form.elements.body.options.editorOptions.theme_advanced_buttons4 = "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage" form.elements.body.options.editorOptions.theme_advanced_toolbar_location = "top" form.elements.body.options.editorOptions.theme_advanced_toolbar_align = "left" form.elements.body.options.editorOptions.theme_advanced_statusbar_location = "bottom" form.elements.body.options.editorOptions.theme_advanced_resizing = true form.elements.body.options.editorOptions.content_css = "/styles/content.templates.css" form.elements.body.options.editorOptions.imagemanager_rootpath = "content=" SITE_PATH "/images/content/" form.elements.body.options.editorOptions.imagemanager_remember_last_path = false form.elements.body.options.editorOptions.filemanager_rootpath = "content=" SITE_PATH "/files/content/" form.elements.body.options.editorOptions.filemanager_remember_last_path = false
Hope this manages to help some people spped up integrating TinyMce
| Print article | This entry was posted by Matt Cockayne on June 15, 2009 at 11:39 am, and is filed under Spec Ops. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |



about 1 year ago
It looks pretty good. I’ve to look some more into the code (especially the container), but there’s something wrong with your output. All > characters are converted into > so a simple copy/paste is impossible (but thanks to your svn we can still grab the code).
Also, you missed some parts of the FormTinyMce helper: the first lines of the file and the ending } for the class. Unfortunately you don’t have the helper placed in svn so I merged it myself with help of the FormTextArea view helper.
Keep up the good work!
about 1 year ago
Cheers for the feedback…
Will teach me to proof read my articles a bit more carefully.
Thankfully It was a quick fix to tidy it up. Also I have now committed the missing helper to subversion. but you were right in just merging it with the FormTextArea helper. thats what I did originally
I “borrowed” the container Idea directly from the ZendX_Jquery component. It made a lot of logical sense to use it in the same way.
about 1 year ago
I’m understanding the code something better now. Thanks for updating the svn
There’s only one point: the container has a _buildTemplates() method which uses a content_template class.
I’m not sure about this approach. For now I don’t have a content_template class and you’re not including the file. When I have more time, I’ll have a closer look towards a more general approach in the upcoming weeks (because I’m very eager to have a general TinyMce form component as well!).
about 1 year ago
The content_template class I used is just a generic table for populating the templates. You could in theory use any method you wanted.
the content_template that I implemented is as follows
class content_templates extends Zend_Db_Table_Abstract { /** * The default table name */ protected $_name = 'content_templates'; protected $_primary = 'uid'; public function fetchTemplates($active = 1) { $where = $this->getAdapter()->quoteInto('active= ? ', (int)$active); return $this->fetchAll($where); } }The SQL for this table is
Alternatively you could just as easily set up an array or config object to use inside the class.
class Zucchi_View_Helper_TinyMce_Container { protected $_templates = array(array('name' => 'name value', 'filename' => 'filename value', 'desciption' => 'description value')); /../ protected function _buildTemplates() { $rows = $this->_templates; if (count($rows) > 0) { $templates = array(); while ($row = $rows->current()) { $templates[] = '{ title : "'.$row->name.'", src : "/files/pageTemplates/'.$row->filename.'", description : "'.$row->description.'" }'; $rows->next(); } return ', template_templates : [' . PHP_EOL . join(', ', $templates) . ' ] '; } return ''; } }Eventually I intend to make the templates externally “populate-able” as I improve and extend it
Hope this helps
about 1 year ago
Ah, I see. The “template” is a tinyMce plugin (I never used it). Thanks for your detailed explanation! Please remember I’m very glad you gave these suggestions, but I think I’ll make a more general approach and avoid implicit use of any of the tinyMce plugins.
Because there’s no need to have the requirement for a template plugin, it’s imho better to leave it to the user if they need it
about 1 year ago
Ahh.. good point. I should have made that a little clearer. Yes it is a TinyMCE plugin that I tend to use by default. As My development of this helper continues I do intend to improve upon the activation of individual plugins independantly of the core of tinymce. Hopefully my next revision will cover this
about 1 year ago
Hi, nice tutorial, one thing I noticed though:
In the last example on the first page the first line reads:
[code]
class Zucchi_View_Helper_TinyMce_Container
{
[/code]
and I think it’s meant to be
[code]
class MyLibrary_View_Helper_tinyMce extends Zend_View_Helper_Abstract {
[/code]
Cheers!
about 1 year ago
Your absolutely right. Thanks for the spot.. I also noticed that some Of the code appears to have gotten mixed in with some of the container class… That should now look a bit more appropriate.
about 1 year ago
Hi Matt,
If you’re interested: I used your solution to improve the TinyMce form element a little bit. Please look here for a better explanation: http://juriansluiman.nl/en/blog/article/100/improved-tinymce-solution-for-the-zend-framework
about 1 year ago
I like the changes you made. I see you point regarding the fact that i did include a options/plugins of TinyMce that I really should have left out (i.e. templates).
I’m not so sure of the editor always being enabled though as I like to keep the amount of JS loaded to a minimum where possible, so being able to turn it on and off was very useful for me at the time I built the component.
I have given the idea of a container a lot of consideration and am not 100% on either way of implementation. I don’t think either way is right or wrong, just that it needs more investigation before I could say I prefer one over the other.
I have just been signed off as a contributor for the Zend Framework so I am hoping to put forward a proposal for a component that will allow direct integration of TinyMCE and any other suggested editors. I’ll keep you posted as it develops
about 1 year ago
hi,
very helpful article
just want to note that you have a typo in
public function setCompressorOptions($location = ‘/js/tiny_mce/’, array $plugins = null, array $themes = null, array $languaues = null)
should be $languaGes
about 1 year ago
Hi,
Great post!
I’m using the common structure created by the ZF shell script (zf.sh).
With the previous structure (like 2 years ago) I used to place my libraries just next to Zend’s in the library directory and the zend loader did the rest as I called CustomLib_SomeClass, but this does not work now.
I see you implemented something similar. Now, how do you tell Zend to “see” your libraries?
Cheers!
Mauro.
about 1 year ago
Hi Mauro
I still use my own external library and use the zf tool as well.. In order too register your own library you need to register it as a namespace in your application.ini file
I find that
; additional namespaces
autoloaderNamespaces.namespace = “Zucchi_”
works really well for me
about 8 months ago
what should be the file name and getter and setter method and folder structure
about 8 months ago
I am just new to zend framework ,I want to know what are file to be created and where it is to be stored