A recent Drupal setup required a WYSIWYG editor, and so the TinyMCE module was called upon yet again. After everything was set up, I was reminded how ugly the TinyMCE toolbar is. It added functionality, but made things look unfinished. Something needed to be done, and I was glad to find, that someone else had already done it.
A fellow designer did some work re-styling the buttons and toolbar to resemble the WordPress editor. You can check out his article here. I found that his stylesheets didn’t work for me (he probably used a different Drupal/TinyMCE version), but a little bit of tweaking led to some fixes, as well as some improvements. The final product should look like this:
The instructions for doing this are pretty simple, and don’t require any changes to core or the module files. You should, however, set up the module before attempting these steps.
- Append the contents of the style.css file to the end of your active theme’s stylesheet (copy/paste).
- Place the tinymcebutton.png file in your active theme’s directory.
- Place the tinymce.css file in your active theme directory.
- In Drupal, navigate to Administer > Site Configuration > TinyMCE
- Click “edit” next to your profile.
- In the CSS section, set “Editor CSS” to “define css”, and “CSS path” to “%ttinymce.css”.
I am using Drupal 5.7, TinyMCE module 5.x-1.9, and TinyMCE 3.1.0.1.
The stylesheets aren’t very large, so with a little bit of CSS knowledge, it should be easy to modify how the buttons look. If you make changes or have suggestions about this, let me know by leaving a comment.
Attachments:
| style.css | 1.81 KB |
| tinymce.css | 699 bytes |
| tinymcebutton.png | 545 bytes |
I am a web designer and full time student (Computer Science). I also enjoy playing the acoustic guitar, listening to music, and playing soccer.
Hum, what are you using drupal for? I’m currently tweaking a joomla install for y4j.org remake. Might be using tinymce also.. but still not sure. I really dont like any of the wysiwyg plugins/modules out there… most of them are either too bulky.. or something else.. I dont know. Personally I hate wysiwygs.. but for the average user they are perfect.
I’m not a fan of wysiwyg editors either although the wordpress one is pretty exceptional. I needed one for a drupal install, since content was going to come from “average users”. I really hated the tinymce interface, and always avoided using the plugin altogether, but the visual changes make it more than tolerable, and worth the effort of installing if you’re not the only person managing content. I wouldn’t recommend more than a few buttons though, because then people want to style what should be normal text as if it was a flyer or something.
Mind to turn this into a patch for http://drupal.org/project/wysiwyg ?
I found your site on faves.com bookmarking site.. I like it ..gave it a fave for you..ill be checking back later