TinyMCE CSS Classes and IDs Plugin : bramus_cssextras 0.5.0 hits the net!

TinyMCE LogoHuzzah! bramus_cssextras 0.5.0 has been released! No new features have been added, yet this version differs a lot from the previously released versions of bramus_cssextras: Under the hood bramus_cssextras has been totally rewritten to make it TinyMCE 3.0 compatible.

What is bramus_cssextras?

bramus_cssextras is a plugin for TinyMCE which enables the usage of CSS classes and CSS ids on any HTML element within TinyMCE. Together with an external CSS file, set via the TinyMCE content_css setting, bramus_cssextras bridges the (visual) gap between the content entered through TinyMCE and the actual output; as seen below.

Plain TinyMCE (1) vs. TinyMCE with content_css (2) vs. TinyMCE with content_css and bramus_cssextrast (3)
Plain TinyMCE vs. TinyMCE with content_css vs. TinyMCE with content_css and bramus_cssextras

Where content_css only lets you view the CSS styles applied on elements, bramus_cssextras takes it to the next level by letting you set these CSS styles on any element, giving the user more power on the visual representation then ever before.

How does it work?

bramus_cssextras works really simple: Just hook it to TinyMCE, add the button references and you’re good to go. bramus_cssextras will do all the work for you, by scanning the defined content_css-file for possible classes/ids which can be set on elements. Then, when editing a piece of HTML through TinyMCE, bramus_cssextras will make your life easier by showing you which classes/ids can be set on the current element and will even let you set a specific class/id on that element.

Can I testdrive it?

Yes you can!

bramus_cssextras demo - click to launch

How much does it cost? / Where can I download it?

bramus_cssextras is free and released under a Creative Commons License. The latest version (0.5.0 the time of writing) can be downloaded from the project page.

I’m still using TinyMCE 2.x, is there a TinyMCE 2.x compatible version available?

bramus_cssextras 0.5.0 is TinyMCE 3.x only, older versions of bramus_cssextras are TinyMCE 2.x only. These older versions can also be downloaded from the project page (version 0.4.1 is suggested).

On a sidenote, I myself don’t suggest on using TinyMCE 3.0 as it still is in beta 😉

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

3 Comments

  1. Hey, any chance you will fix the issues with the hanging drop down box?
    This great plugin is pretty useless at the moment as all current browsers have this bug.
    1. Select an image
    2. select float left.
    3. click somewhere
    -> image floats left.
    4.click image again
    5. select float right
    6. click somwheere
    ->image floats right
    but combobox stays open.
    no way to be closed.
    this happens in all modern browsers. FF2-3.5 IE7,8. Chrome1-2

    pleaaaase.!

  2. Fix for the hanging dropdown box:

    Just before the selectDropDown.renderMenu(); in _rebuildDropdown. add this code:

    var dropdown = document.getElementById(‘menu_’ + ed.editorId + ‘_’ + selectDropDown.id + ‘_menu’);
    if (dropdown !== null) {
    dropdown.parentNode.removeChild(dropdown);
    }

    or if jquery is enabled:
    $(‘#menu_’ + ed.editorId + ‘_’ + selectDropDown.id + ‘_menu’).remove();

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.