Skip Navigation
« othAuth 0.5.4
CakePHP: Update a select box using ajax »

a tinymce element for cakePHP

To demonstrate the power of Elements in cakePHP, I’m going to use as an example TinyMCE. TinyMCE is basically a LGPLed web based Javascript HTML WYSIWYG editor. It has many features but it’s not the aim of this post to introduce it, rather to demonstrate how we can use it as an element. TinyMCE can be used on textareas ( and probably some other tags ) .

So we have this scenario: you’re building a ( yet another ) CMS. In the add, edit forms you decide to give the user the possibility to create/edit the page visually. So you probably have something that looks like this:

  1.  
  2. // cute 1.2 code ;)
  3. <?php echo $form->create(‘Page’)?>
  4. <?php echo $form->input(‘title’);?>
  5. <?php echo $form->input(‘description’);?>
  6. <?php echo $form->input(‘body’);?>
  7. <?php echo $form->input(‘page_layout_id’,$pageLayouts);?>
  8. <?php echo $form->submit(‘Add’);?>
  9. </form>  
  10.  

Now as a smart guy you create an element, you name tiny_mce.ctp and you put this code in it:

  1.  
  2.  
  3. <? echo $javascript->link(‘tiny_mce/tiny_mce’)?>
  4. <script language="javascript" type="text/javascript">
  5. tinyMCE.init({
  6. theme : "advanced",
  7. mode : "textareas"
  8. });
  9. </script>
  10.  
  11.  

You call renderElement before the form and you’re all set.

So what’s the issue ? Well first of all, I forgot to mention that the description field is a textarea and we don’t want it to use tinyMCE. You can give ‘body’ an id ( in fact the form helper does this ) and hard code it in the element; but then, elements are meant to be reusable. Here comes the time to utilize the power and flexibility they offer: Elements accept arguments. So to make a reusable and flexible element we’re going to use the element as a black box and tell it what fields we want to edit visually.

  1. <? echo $javascript->link(‘tiny_mce/tiny_mce’)?>
  2. <script language="javascript" type="text/javascript">
  3. tinyMCE.init({
  4. theme : "advanced",
  5. <?php if(is_array($field)): ?>
  6. <?php
  7. $fs = array();
  8. foreach($field as $f):
  9. $fs[] = "data[$model][$f]";
  10. endforeach;
  11. ?>
  12. elements :"<?php echo implode(",",$fs)?>",
  13. <?php else: ?>
  14.  
  15. elements : "data[<?php echo $model; ?>][<?php echo $field; ?>]",
  16. <?php endif; ?>
  17. });
  18. </script>
  19.  

And here is how we use it:

  1.  
  2. <?php echo $this->renderElement(‘tiny_mce’,array(‘model’=>‘Page’,‘field’=>‘body’)) ?>
  3.  

If we later decide we want to edit the description visually too we do this:

  1.  
  2. <?php echo $this->renderElement(‘tiny_mce’,array(‘model’=>‘Page’,‘field’=>array(‘body’,‘description’))) ?>
  3.  

So that’s it, the second param of renderElement is an array, the keys are the variables names and the values are the values of these variables, cake manages to get them accessible within the element as simple variables. How neat !

Keep in mind this is just an example. if you want to improve it, first, remove script and use $javascript->block, second, use the second param of $javascript->link so that it’s included in the head ( of course you need to have $scripts_for_layout somewhere in the head of the layout) you can also cache that block in an external file if you choose to.

This entry was posted on Thursday, March 29th, 2007 at 4:23 pm and is filed under CakePHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “a tinymce element for cakePHP”

  1. TinyMCE Element for CakePHP…

    Here is a quick and easy way to integrate a WYSWYG editor into your CakePHP applications. This article is very straight forward and will get you using TinyMCE in no time at all!
    To demonstrate the power of Elements in cakePHP, I’m going to use as exa…

    Author: CakeBits | March 29th, 2007 at 5:31 pm

  2. Hi there,

    you’re not planning to write a complete tutorial by any chance? I mean where you describe that code optimization and also how to ajax the text into a database, having an edit mode where text can be edited and a mode where the result is shown, how you switch between those modes etc.

    Would be helpful to those of us who still can’t see the big picture…

    Thanks and best regards,
    Mickster

    Author: Mickster | July 14th, 2007 at 9:18 pm

  3. I forgot to mention - I have read the tutorials in the bakery, but still the big picture is missing…

    Author: Mickster | July 14th, 2007 at 9:19 pm

  4. Hello.

    Thanks for this Post.

    I tried to implement this but i have to add:

    mode : “exact”,

    In tinyMCE.init to make it work.

    But thanks any way.

    Carlos Timóteo
    Portugal

    Author: Carlos Timóteo | November 29th, 2007 at 3:54 pm

Leave a Reply


Login Method

OpenID

Anonymous