Skip to: Site menu | Main content

Automatic Configuration of TinyMCE in Drupal

At Drupalcon Boston I was in a session that Boris Mann of Raincity Studios was giving and he made a throwaway comment about how TinyMCE doesn't actually suck - if you know how to configure it correctly.

Well, I always thought it sucked and caused more problems than it solved, so I contacted Boris and asked him how he configures TinyMCE. He pointed me to a Bryght install profile for Drupal that automatically sets up various TinyMCE profiles.

While the install profile is great, I wanted to be able to tweak the settings just a bit and be able to configure TinyMCE on existing sites. I found this GHOP project that automatically configures TinyMCE and I decided to combine Boris's settings with this. The module also removes the default line break filter for the "full HTML" input filter and expands the allowed tags for the "filtered HTML" input filter.

The result is a module that you can add to your site, run it once, then disable it. I call it the "TinyMCE Automatic Profile Generator". I'm not planning on making it a full drupal contribution, as I think it's a little too specialized, but you can download it here if you'd like.

Once you run it, be sure to:

  • Give the proper roles "access TinyMCE" permissions on admin/user/access
  • Assign roles to each profile on admin/settings/tinymce

In addition to three Bryght profiles (Comments, Basic, Advanced), I added the following:

  • the default image button is enabled for the Advanced Profile
  • the font-style-select box is enabled with a "code" style - to utilize you'll need to define a "code" CSS class to format programming code as desired

One the generator runs, you can always go in and tweak the settings manually. If you ever mess things up, run the generator again and it will regenerate the default module settings.

Feel free to let me know of any additional configurations that you think the module should include.

Submitted by michael on Wed, 03/19/2008 - 11:19am
Filed under:

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

RE:

There's a bunch of settings and I didn't want to wade down the post with all the gory details.
online Master degree | Education School

RE:

I've stumbled across a few resources for this functionality on forums etc, but no-one seems to have actually nailed it; there just seems to be bits of info here and there at the moment.
Online degrees | Doctorate degrees | Law School

Please Make it a Module

Hello Mike!

Thanks very much for your work creating this module. There are many non-coding drupal schmucks out there such as myself who mainly search the drupal.org site for things like "how to make TinyMCE not suck". It's not very googleable, as you might see.

Anyway, I think it would be great if you just posted the thing as a module to give it more visibility. I really like the profiles and it could save lots of people lots of time.

Thanks again,
Jeremy

One More Addition

Another thing that I find useful is to add two more allowed paths for the 'Advanced' profile so that I can use my most feature-filled TinyMCE profile to edit HTML blocks.

Therefore, I add the following:

admin/build/block/add
admin/build/block/configure/block/*

Hope this helps!

Steven 'Sven' Merrill

I added a patch for these

I added a patch for these changes to the tinymce_autoconf project at:
http://drupal.org/node/237310

Please help review!

Is anybody maintaining the contrib module?

Why not at least submit it as a patch?

I've been itching to get his settings after that remark too

Thanks so much.

Which version of Drupal does this apply to?

This looks *really* useful, but is it for D5 or D6, and is it for any particular version of TinyMCE? I downloaded it but there was no mention.
Thanks!

Anything on this...

... is an improvement. I think what myself and others ideally want to see is some mechanism that can force TinyMCE to support XHTML Strict "out of the box", as currently it pretty much breaks all attempts to render standards-compliant code.

I've stumbled across a few resources for this functionality on forums etc, but no-one seems to have actually nailed it; there just seems to be bits of info here and there at the moment.

If anyone's got resources that will enable my wants for Tiny' and the above to work together, I'd love to hear about it.

Nik

His settings

What exactly were Boris' settings?

a bunch...

There's a bunch of settings and I didn't want to wade down the post with all the gory details. You can check out the code for the full settings, but here's what the "comments" profile uses:

$comment_settings = array(
'name' => 'Comments',
'old_name' => 'Comments',
'default' => 'true',
'user_choose' => 'false',
'show_toggle' => 'false',
'theme' => 'advanced',
'language' => 'en',
'safari_message' => 'false',
'access' => '1',
'access_pages' => "node/*\ncomment/*",
'buttons' => array(
'autosave' => '1',
'default-bold' => '1',
'default-italic' => '1',
'default-underline' => '1',
'default-strikethrough' => '1',
'default-link' => '1',
'default-unlink' => '1',
'emotions-emotions' => '1',
'font-styleselect' => '1',
),
'toolbar_loc' => 'top',
'toolbar_align' => 'center',
'path_loc' => 'bottom',
'resizing' => 'true',
'block_formats' => 'p,address,pre,h1,h2,h3,h4,h5,h6',
'verify_html' => 'true',
'preformatted' => 'false',
'convert_fonts_to_styles' => 'true',
'css_setting' => 'theme',
'css_path' => '',
'css_classes' => 'Code=code',
);