Using the TinyMCE template plugin in Drupal

23 comments

Posted on Saturday, April 12, 2008 at 9:14am by Schoonzie

On my RC news blog there are quite a few elements that are used on a regular basis in news posts (eg specifications tables, etc). It's a major pain in the ass recreating these elements again and again, and now that I've got a few other writers on board, it's getting hard to keep everything consistent.

Tonight I decided to create about half a dozen small template snippets that would be used as the framework for these elements and allow the writers to just fill in the blanks. To pull it all together and make it easy to use, I used TinyMCE's template plugin to load the templates straight into the text editor.

It's a breeze to setup, here's how:

In your TinyMCE module directory, find the plugin_reg.php file and add the following lines just before the return $plugins; line.

$plugins['template'] = array();
$plugins['template']['theme_advanced_buttons3'] = array('template');
$plugins['template']['template_external_list_url'] = array(0=>"/templates/templates.js");
Enable the template plugin for the relevant users in your TinyMCE configuration (Site Configuration > TinyMCE).
Create a directory called templates in the root of your site (or wherever you like, just remember to change the code in step 1) and create a file called templates.js with the contents:

var tinyMCETemplateList = [
// Name, URL, Description
["Specifications Table", "/templates/specifications.htm", "Creates a specification table"],
];

Create as many templates as you like, one line for each.
Create .htm files for each of your templates with the contents:


<div class="mceTmpl">

</div>
Save and upload all the files.

You should notice a little template button () in your TinyMCE editor, which will load all the templates you specified in the templates.js file.

And here is how it will look when inserting the templates

TinyMCE Templates

NOTE: When you upgrade TinyMCE, be sure not to replace your modified plugin_reg.php.

Got any other TinyMCE tips or tricks to help make editing your posts better?

Update: Fixed a problem in the code producing the Invalid argument supplied for foreach() php error - Thanks to S Gifford for the solution.

23 comments. Have your say.

Comments

I've always wanted to do

Submitted by Anonymous (not verified) on Saturday, April 12, 2008 at 7:56pm.

I've always wanted to do this, thanks.

"Create a directory called templates in the root of your site..."

Why not add the template folder in the same place as your themes and modules - in sites/all?

I didn't do this because I

Submitted by Schoonzie on Saturday, April 12, 2008 at 11:14pm.

I didn't do this because I wanted to keep it nice and simple for my site, but it will work anywhere. I'll modify the post now.

Sounds mighty useful. Could

Submitted by Venkat-rk (not verified) on Sunday, April 13, 2008 at 10:51pm.

Sounds mighty useful.

Could you please consider sharing a screenshot of how this ends up looking like at the point of data entry? I got the idea, but am unable to visualize what you are doing this for.

Great Idea

Submitted by Schoonzie on Monday, April 14, 2008 at 4:42am.

I've updated the post now with a screenshot of what it looks like when inserting the template.

Nice trick, thanks. Is there

Submitted by Drupal Themes Garden (not verified) on Tuesday, April 15, 2008 at 3:21pm.

Nice trick, thanks.
Is there any way to incorporate such feature direct in drupal theme?

Hmm, good question. It might

Submitted by Schoonzie on Tuesday, April 15, 2008 at 5:23pm.

Hmm, good question. It might be possible by overriding the theme_tinymce_theme theme function in the template.php file as per the README.TXT file in the tinymce module.

I haven't tested this but it might work:

<?php

function phptemplate_tinymce_theme($init, $textarea_name, $theme_name, $is_running) {

  switch ($textarea_name) {

    // Disable tinymce for these textareas

    case 'log': // book and page log

    case 'img_assist_pages':

    case 'caption': // signature

    case 'pages':

    case 'access_pages': //TinyMCE profile settings.

    case 'user_mail_welcome_body': // user config settings

    case 'user_mail_approval_body': // user config settings

    case 'user_mail_pass_body': // user config settings

    case 'synonyms': // taxonomy terms

    case 'description': // taxonomy terms

      unset($init);

      break;

    // Force the 'simple' theme for some of the smaller textareas.

    case 'signature':

    case 'site_mission':

    case 'site_footer':

    case 'site_offline_message':

    case 'page_help':

    case 'user_registration_help':

    case 'user_picture_guidelines':

      $init['theme'] = 'simple';

      foreach ($init as $k => $v) {

        if (strstr($k, 'theme_advanced_')) unset($init[$k]);

      }

      break;

  }

  /* Example, add some extra features when using the advanced theme. */

  // If $init is available, we can extend it

  if (isset($init)) {

    switch ($theme_name) {

      case 'advanced':

        $init['plugins'] = array('template');

        $init['template_external_list_url'] = array("/templates/templates.js");

        break;

    }

  }

  // Always return $init

  return $init;

}

?>

about tinymce

Submitted by Anonymous (not verified) on Saturday, April 26, 2008 at 3:12am.

After success full configuration in drupal I am not able to use Tinymce in my drupal.Any help is needed.

I'm not really sure whether

Submitted by Schoonzie on Sunday, April 27, 2008 at 5:17pm.

I'm not really sure whether I can help because I don't really know what sort of trouble you're having.

Have you read the TinyMCE documentation here ?

path problems with drupal tinyMCE template ?

Submitted by Anonymous (not verified) on Saturday, April 26, 2008 at 10:12pm.

i'm sort of new to the whole drupal thing, though i've done lots of custom web programming and your plugin solution is fantastic. however, i've tried lots of configs including yours but kept getting ....

-- warning: Invalid argument supplied for foreach() in /home/waterfr1/public_html/modules/tinymce/tinymce.module on line 546. --

which, upon inspection, is an add of buttons in the main mod.

i'm thinking it's a path issue but have tried every combination and it's no use.

any help would be fantastic.

thanks in advance,
jeff

Hi Jeff, I've never seen

Submitted by Schoonzie on Sunday, April 27, 2008 at 5:25pm.

Hi Jeff,

I've never seen that problem before. I would assume that it's a problem with your plugin_reg.php file and the _tinymce_plugins() function inside that not returning a proper array.

Was it producing this error when you first installed TinyMCE (without making any modifications to that file)?

Nick

Hi Steven, I'll have another

Submitted by Schoonzie on Thursday, May 1, 2008 at 6:57pm.

Hi Steven,
I'll have another look this weekend and see if I can work out what is going on.

Same Error: Solution?

Submitted by S Gifford (not verified) on Wednesday, May 7, 2008 at 3:28pm.

$plugins['template'] = array();
$plugins['template']['theme_advanced_buttons3'] = array('template');
$plugins['template']['template_external_list_url'] = array(0=>"/templates/templates.js");

Note the third line is an array instead of
$plugins['template']['template_external_list_url'] = 0=>"templates/templates.js";

which has the last line not as an array.

I *think* this is the problem.

Thanks for the instructions!

template_external_list_url is an array...

Submitted by Stumpdevil (not verified) on Thursday, July 24, 2008 at 8:51pm.

I got this to work with:

$plugins['template']['template_external_list_url'] = array('/files/templates/templates.js');

Thanks for the great tutorial. Just what I was looking for.

Hey, great tutorial! I

Submitted by Cameron (not verified) on Sunday, June 8, 2008 at 11:14am.

Hey,

great tutorial! I checked it out myself and it returned the same error of an invalid argument on tinymce.module on line 546. Did you manage to think of a solution to this problem? I'm also assuming this tutorial is for a drupal 5x installation.

Thoughts?

Thanks alot!
-Cameron

Thanks guys for the

Submitted by Schoonzie on Friday, August 1, 2008 at 6:59am.

Thanks guys for the comments. I have updated the post now with S Gifford's code so that it doesn't generate the PHP error.

Above fix works for me

Submitted by Jeff (not verified) on Monday, July 7, 2008 at 4:57pm.

Thanks for the great tutorial, the above fix, http://www.schoonzie.com/using-tinymce-template-plugin-drupal#comment-35
works for me, no problem.

I got foreach error like most others here, putting it into the array as suggested smoothed it out, works perfectly!

template woes

Submitted by Jeff (not verified) on Sunday, July 13, 2008 at 6:43pm.

Hi, I was wondering if you would be so kind as to share one of your templates with us.

I have a couple of odd issues...

1) TinyMCE inserting my template twice. Solved by adding the comments to the template, i.e.
div class="mceTmpl" !-- mceTmplBegins -- div id="Tmplcontainer" div id="Tmplcontent" Sample /div /div div id="Tmplsidebar" Sample /div !-- mceTmplEnds -- /div

The "Sample" placeholder text is for another issue - even if I set a min-height on the divs e.g 100px (the divs appear 100px high in the editor), but TinyMCE thinks they are empty and collapses them, so its nigh on impossible to get the cursor where its needed... the placeholder text solves that dilemma.

Sorry about the weird looking code, but your input filter was stripping out the DIV tags and comments.

2) When using a pure CSS / DIV layout hitting the return key for a new paragraph generates a new DIV container of the same name as the containting DIV! Mad...

Only workaround I have found so far is to use a table to wrap it all up, which seems to work fine.

Have you used pure CSS layouts for your templates? If so, sure like to hear how you got them working.

Hi Jeff, Thanks for the

Submitted by Schoonzie on Friday, August 1, 2008 at 7:06am.

Hi Jeff,
Thanks for the comment. One of the templates that I use is

<div class="mceTmpl">
<div class="image_caption">
<img src="/files/ZeroRC-feedburner.jpg" /><br />
Sample Caption
</div>
</div>
It appears as you see in the screenshot in the post, so I can't really help with the problem you are having. If you like I'd be happy to take a look - send me an email via the contact form with your details.

Underscores are the devil

Submitted by Predated (not verified) on Monday, October 13, 2008 at 10:38am.

If you've followed all the steps here, looked at the moxiecode docs, and the tinymce drupal module docs, and you swear that everything is right, but no templates are showing up in the drop down box - make sure you don't have any underscores ( _ ) in your file names. If you do, change them to hyphens ( - ), update your code, then refresh your edit page and behold the glory of templates.

Thank you

Submitted by Joe Sieben (not verified) on Monday, March 16, 2009 at 10:30am.

Wow, after so many attempts to insert html from dropdown in CCK node reference to tinyMCE, I had just about given up. I found your article and with a few additions to once of my modules and the settings as above, I have a fully fledged template integrated node.

Basically I have a content type template setup in Drupal, and output the headers as text. So instead of giving an actual directory, I get the Drupal Menu system to handle it dynamically. Without you I could not have made it simpler.

Thank you.

Great advice

Submitted by Neurojam (not verified) on Sunday, May 31, 2009 at 6:05am.

Really useful advice. I adapted your instructions to install the template functionality into my wordpress installation. The three lines I had to change were:

if ( $teeny ) { .... } else { $plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen', 'wpeditimage', 'wpgallery', 'template' ); }

if ($teeny) { ... } else { ... $mce_buttons_3 = apply_filters('mce_buttons_3', array('template')); ... }

// TinyMCE init settings $initArray = array ( ... , ... , 'template_external_list_url' => '/templates/templates.js' );

I should have mentioned the

Submitted by Neurojam (not verified) on Sunday, May 31, 2009 at 6:06am.

I should have mentioned the changes were made to wp-admin/includes/post.php