TinyMCE CSS Classes and IDs Plugin : bramus_cssextras

WARNING: This project is no longer updated, and unsupported. It is kept here merely for archiving purposes. You should check out my most recent projects on Github

Overview


What is bramus_cssextras?

bramus_cssextras is a plugin for TinyMCE 3 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 (and supports the setting of classes only on <a> elements), bramus_cssextras takes it to the next level by letting you set these CSS styles, based on CSS Class Selectors and CSS ID Selectors, on any element, giving the user more power on the visual representation then ever before (imagine one being able to choose 20 different classes or a handful of ids to apply on p elements with the ease of a click).

top


Screenshots & Demo

bramus_cssextras Demo (latest version)

bramus_cssextras demo - click to launch

bramus_cssextras Screenshots (outdated)

Screenshots might not say much at first, but take a peek at the status bar (bottom), the bramus_classeslist dropdown (2nd row, far left) and the block dropdown (1st row, right of the center)

Selected element : p, Class : none

Selected element : p, Class : articleStart

Selected element : li, Class (on parent!) : regular

Selected element : li, Class (on parent!) : regularLarge

Selected element : img, Class : links

Selected element : img, Class : rechts

Selected element : h3, Class : none (none available either)

top


Download

Latest Version (For use with TinyMCE 3.x)

All versions of bramus_cssextras can be downloaded from the bramus_cssextras GitHub page (click the Downloads button). Be sure to download the latest version (v0.5.4). The demo is also available on GitHub.

Download bramus_cssextras from GitHub

Download the bramus_cssextras demo from GitHub

Looking for a TinyMCE 2.x compatible version? Then download v 0.4.1 ๐Ÿ˜‰

Don’t forget to read the License & usage and Installation/Configuration blocks on this page! ๐Ÿ˜‰

top


Version History

Version 0.5.4 – 2010.11.07

  • UPD : Switched License to a BSD License.

Version 0.5.3 – 2010.09.13

  • BUG : ‘selectDropDown’ is undefined when using GZIP

Version 0.5.2 – 2010.05.15

  • BUG : dropdown remained in place / wasn’t removed properly most of the time
  • UPD : back to using TinyMCE’s internal XHR object which didn’t make it into 0.5.1.
    (turns out it was a bug in the TinyMCE version at the time that didn’t execute non-asynchronous (thus synchronous) ajax calls properly)

Version 0.5.1 – 2008.04.25

  • UPD : TinMCE 3.x Compatiblity update
  • UPD : Changed some internal calls to use the builtin TinyMCE helper functions (inArray & trim) to reduce the bramus_cssextras codebase
    (didn’t use the XHR Object though as I experienced some probs with it)

Version 0.5.0- 2007.12.11

  • SYS : Rewrite for use with TinyMCE 3.x

Version 0.4.1 – 2007.11.22

  • FIX : When multiple CSS files are specified through content_css, load ‘m all and don’t break. (@see)
  • FIX : If for example p.test is defined multiple times, show “test” only once in the dropdown.

Version 0.4.0 – 2007.09.10

  • FIX : selection noclass returned “undefined” as class, now returns an empty string
  • ADD : automatic building of the bramus_cssextras_classesstring and bramus_cssextras_idsstring by parsing the content_css file

Version 0.3.3 – 2007.07.27

  • FIX : getInfo returned wrong version. Fixed + version increment.

Version 0.3.2 – 2007.07.23 – * first public release! *

  • FIX : minor change in HTML output

Version 0.3.1 – 2007.06.28 (Unreleased)

  • ADD : extra check and confirm built in to enforce uniqueness of id attributes

Version 0.3 – 2007.06.27 (Unreleased)

  • ADD : setting of ids now possible too
  • SYS : name changed from bramus_classeslist to bramus_cssextras

Version 0.2 – 2007.06.22 (Unreleased)

  • ADD : bramus_classeslist now supports “Undo Levels”
  • ADD : added a few extra comments (should be fully commented now)

Version 0.1 – 2007.06.19 (Unreleased)

  • Initial Build

top


License & usage

The script is now released under a BSD license. Should you use the script within a commercial context please consider clicking the PayPal donate button below.

top


Installation/Configuration

Installation of bramus_cssextras is rather easy and can be split into 4 simple steps:

  1. Downloading and extracting the bramus_cssextras plugin
  2. Preparing your content_css file
  3. Building the bramus_cssextras_classesstring and bramus_cssextras_idsstring
    As of version 0.4.0 this step is optional!
  4. Adjusting the TinyMCE init to load the bramus_cssextras plugin

Downloading and extracting the bramus_cssextras plugin

bramus_cssextras_pathstruct.gif

  1. Go download the latest copy of bramus_cssextras
  2. Extract the contents of that archive (including the directory structure inside!) to the plugins/ directory of your TinyMCE installation
  3. You should end up with a path like this: tiny_mce/plugins/bramus_cssextras/editor_plugin.js, as seen on the right (click to enlarge)

Preparing your content_css file

Let’s say we have a CSS file named mycontent.css with a few selectors in it:

a { /*...*/ }
img { /*...*/ }
img.floatLeft { /*...*/ }
img.floatRight { /*...*/ }
p { /*...*/ }
p#introText { /*...*/ }
h1 { /*...*/ }
h2 { /*...*/ }
ul { /*...*/ }
ul.smallList { /*...*/ }
ul.bigList { /*...*/ }

TIP: Don’t forget to add !important after color declarations, as Firefox won’t take them otherwise!

Now hook that CSS file to TinyMCE by using the content_css setting as described in the TinyMCE wiki, by adjusting your tinyMCE.init(); :

Make sure you link content_css to an absolute (or even full) path!

tinyMCE.init({
	...
	// hook the content.css
	content_css : "/mycontent.css",
	...
});

 


Building the bramus_cssextras_classesstring and bramus_cssextras_idsstring

As of version 0.4.0 this step is not needed anymore, as bramus_cssextras automatically builds these strings by loading in the specified content_css file via an Ajax call! Leaving this section here though, in case the automatic generation should fail.

Should you however not wish to stress your server with an Ajax call on each page load (that is if a TinyMCE instance is to be started), or if the content_css file is no longer subject to change then it is suggested to settings these parameters to a manually generated value as the automatic generation (and Ajax call) then will be bypassed..

If no ids or classes need to be set, then you can either exclude the button references (see next step) or set any of these 2 parameters to an empty string (viz. "")

The hardest part of the installation/configuration is building these strings (both are built in the same manner), which tells the plugin which classes and/or which ids on which elements can be applied. Before going into details on these strings, imagine this situation:

When one is editing an unordered list (viz. an <ul>), he’s actually editing the list items (<li>) contained within that <ul> and he’d probably not want to set class or id definitions on each list item separately (in case of ids this even is invalid!), but he’d want to target the <ul> itself.

Given this problem, the bramus_cssextras_classesstring and bramus_cssextras_idsstring not only tell the plugin which elements to a apply classes/ids on, but also which elements their parent element to apply certain classes/ids on.

Not wanting to rely on the CSS Descendant Selector – which is a space – and not wanting to depend on the CSS Child Selector bramus_cssextras uses a custom made system, as it works the other way around (instead of targetting children/descendants it targets parent elements) and they are no real selectors but logic structural xhtml sequences (an li always is inside an ul; why would you want to set the class of a p element to something special when youรขโ‚ฌโ„ขve got a strong element inside that p element selected?)

Don’t worry if you can’t follow right now, an example will make it clear:

li::ul[smallList,bigList];img::self[floatLeft,floatRight]

The string above tells bramus_cssextras that when an li is selected, the ul can have smallList or bigList applied on it as a class (when used as value for bramus_cssextras_classesstring of course)

For our CSS example file above, we’d define the bramus_cssextras_classesstring as so:

li::ul[smallList,bigList];img::self[floatLeft,floatRight]

 

The bramus_cssextras_idsstring would be defined as this:

p::self[introText]

 

After having built these string, one still has to inject them into TinyMCE by adjusting the tinyMCE.init();

tinyMCE.init({
	...
	// hook the content.css
	content_css : "/mycontent.css",

	// bramus_cssextras config
	bramus_cssextras_classesstring : "li::ul[smallList,bigList];img::self[floatLeft,floatRight]",
	bramus_cssextras_idsstring : "p::self[introText]",
	...
});

 

top


Adjusting the TinyMCE init to load the bramus_cssextras plugin and setting the parameters

Hooking bramus_cssextras to TinyMCE is really simple and consists of 2 steps:

  1. load the plugin
  2. add the button reference

A complete (and typical) tinyMCE.init(); would look like this:

tinyMCE.init({

	// advanced theme, target all textareas
	theme : "advanced",
	mode : "textareas",

	// load the bramus_cssextras plugin
	plugins : "bramus_cssextras", // note: of course you can still multiple plugins just as you're used to

	// add the bramus_cssextras dropdowns to the 2nd row of buttons
	theme_advanced_buttons1_add : "separator,bramus_cssextras_classes,bramus_cssextras_ids",

	// hook the content.css
	content_css : "/mycontent.css",

	// bramus_cssextras config
	// NOT NEEDED IN bramus_cssextras 0.4.0+
	// bramus_cssextras_classesstring : "li::ul[smallList,bigList];img::self[floatLeft,floatRight]",
	// bramus_cssextras_idsstring : "p::self[introText]",

	// move the toolbar to top, left aligned
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",

	debug : false
});

top


Known Bugs

Not many ๐Ÿ˜› :

  • bramus_cssextras 0.5.0+: When cancelling the setting of an id on an element when an element with that id already is present, the wrong value will remain selected in the dropdown. Fixed since 0.5.3
  • bramus_cssextras 0.1+: Doesn’t play nice with the PHP GZIP Compressor (src) – UNVERIFIED

top


Current Limitations

The only limitations in effect are those when using the nested elements (viz. li::ul) and when having elements nested inside those elements, a few examples:

  • When having an a-element (or a span-element, or a strong-element, or …) selected, which lives inside an li, you won’t be able to set the class on the ul; the selected node really must be the li (you can see which node is selected in the TinyMCE status bar!)
  • When having classes targeted on the ul (by using li::ul) and also providing classes to apply on the li‘s themselves (by using li::self), you’ll only see the first one you’ve declared in the bramus_classeslist string.

top


Feedback/Help/Support

One can always leave a comment in case any questions should arise or if a bug were to be found; and one can always support me by donating me a tidbit to my paypal ๐Ÿ˜‰

top


Make a donation

It certainly is no obligation but it would most certainly put a smile on my face ๐Ÿ˜‰ Alternatively you can support me by clicking one of the ads below.












60 Responses to TinyMCE CSS Classes and IDs Plugin : bramus_cssextras

  1. i really like your screenshot composition (http://www.bram.us/wordpress/wp-content/uploads/2007/07/bramus_classeslist_visual.jpg) with the “textmarker-color clouds” and the big numbers.

    but i miss the wordpress part in this post. and the part where it should say “download the WP plugin here, activate it and you are set”.

  2. Dave says:

    I’d been trying to wrap my brain around TinyMCE’s inability to correctly apply classes to uls for quite a while before finding your plugin. You’ve solved a couple of my immediate problems and opened up some other nice possibilities for streamlining my use of TinyMCE. Nicely done!

  3. Michael says:

    I would like to see this plugin select all the classes in available within the set content_css style sheet and list them with preview in a dropdown menu. So, you can set content_css to \”themes/”.$ThemeSel.”/style/style.css\”, and theme_advanced_styles to dynamically grab all available CSS classes.

  4. marsman says:

    Really great plugin, I just have one question.
    Adding a style to a tag works perfect, but what when I want to remove the style again, if I select the first option in the option box”[no class]” I get something like “a.undefined”.
    That is not a big problem but it would be nicer if it just removed the class.

  5. Bramus! says:

    @ Michael : is possible indeed when calling the content of the css file over XHR (ajax) and then letting some regular expressions run on it, yet will give some throubles for ul elements (for example, will give troubles on any element that needs to be contained within an other element) as that relies on the li element (unless that’s hardcode in the parsing script). Might give it a spin ๐Ÿ˜‰

    @ Marsman: Thanks for mentioning, will look into that.

  6. Bramus! says:

    @ Michael: Couldn’t help it and started coding … I’ve set up a test page which parses an given CSS file and automatically builds the bramus_cssextras_classesstring and bramus_cssextras_idsstring. Will merge that functionality into bramus_cssextras somewhere next week ๐Ÿ˜‰

  7. janice says:

    Hi,

    Where do i add this code:

    tinyMCE.init({

    // hook the content.css
    content_css : “/mycontent.css”,

    });

    I can’t find a file to add this to…
    Thanks for your help.

  8. Bramus! says:

    @Janice: better read the installation instructions for TinyMCE again, looks like you’ve missed an essential part of it ๐Ÿ˜‰

  9. Martin says:

    The _loadContentCSS function doesn’t work when the content_css option is a list of URLs separated by commas. Maybe you shoud split(‘,’,content_css), take the first element, eventually strip it and only load that file. Or maybe load them all…

  10. Bramus! says:

    @ Martin: noted ๐Ÿ˜‰

  11. paul says:

    Hi I have a problem to view in tinymce a css (cascading style) like these:

    example:

    #container h1 { /* ... */ }
    #content p { /* ... */ }
    #menu table { /* ... */ }

  12. Bramus! says:

    @paul: most likely you don’t have anything in your TinyMCE instance that has the id container, or content, or menu … please note that your problem has nothing to do with bramus_cssextras, but with content_css ๐Ÿ˜‰

  13. paul says:

    @Bramus!: I thought that your plugin solve my problem.
    My TinyMCE is in div with id container and when I create a css I use the structuce like this:
    #container p { ….. } // tinymce is blind to this css I dont’` know why??
    TinyMCE see only this css: why??
    p { ….. } // tinymce is blind to this css

    for example;

    // tinymce scripts

    .......

    I dont`t want to create new css!!
    Is this posible to view my css structure with your plugin or could you add it to your new version of plugin??

  14. redox says:

    Don’t you understand paul? This “problem” isn’t one of bramus. By the way, thanks bramus. ๐Ÿ™‚

  15. Bramus! says:

    @ redox: thanks ๐Ÿ˜‰

  16. Louis says:

    How is this plugin different from the standard style selector?

  17. Bramus! says:

    @ Louis: bramus_cssextras is an intelligent script which adds 2 dropdowns to tinyMCE. Those dropdowns become active when an element is selected and only show the classes applicable to that kind of element. To original Tiny script which strips out classes, only lets you set them on a elements, even is those classes are set on p elements (for example).

  18. Sebastian says:

    great plugin bramus… the standart styleselect buildin doesnt do the job but yours does.

    Still… I cant seem to get it work with the new beta of tinyMCE… version 3.0+. Is there any information on intregrating ur plugin with anything higher than the latest stable of tinymce?

  19. Bramus! says:

    @Sebastian: TinyMCE 3.0 (beta) is not supported at the moment. Will provide an update once TinyMCE 3.0 is released.

  20. Sebastian says:

    i worked it out… i’ve modified it so it works with 3.0… took me some time to figure it out tho. i’m testing right now. if ya want me to upload it for u or send it to you just contact me.

    i really gotta repeat that: good job on that plugin, great idea.

  21. Bramus! says:

    @ Sebastian : tonight I’ve been working on bramus_cssextras 0.5.0, a rewrite for use with TinyMCE 3.0. It’s not finished yet, but it’s shaping up nicely … stay tuned I’d say ๐Ÿ˜‰

  22. Fletch says:

    I can’t seem to get this plugin working using the php gzip compressor. Is there anything that I need to change to get it to work?

    Thanks.

  23. Bramus! says:

    Hi Fletch, I must say that I have no experience whatsoever with gzip compression, so I’m afraid I can’t help you out on this one …

  24. Fletch says:

    That is too bad I would really like to use your plugin.
    Thanks anyways.

  25. Brian says:

    Trying to get 0.4.1 to work within Joomla’s integration of TinyMCE (2.0.8.) I’ve followed all the steps here, but it does not seem to want to load, even with manually inserting the string values.

    When you check TinyMCE’s “Help” link and “Plugins” tag, it only lists bramus_cssextras and no other info, like it is not running the jscript (but it is coded to load the plugin!)

  26. Fletch says:

    Can you add a span tag nested in a tag.

    ex Some Text Here

    in my CSS i have this class

    .red{color:#ff0000;}

    With the TinyMCE class drop down you can highlight what you want changed and pick red from the drop down. All I see with yours is my id intro_text.

    Can you do what I am asking??

    Thanks.

  27. Bramus! says:

    Fletch, you need to define span.red { } in your CSS File if you want the red class to be selectable on span-elements ๐Ÿ˜‰

  28. olaf says:

    Great plugin! I’m not sure but i think i found a bug in v0.4.1. At editor_plugin.js line 496 you set the className with node.className = toSetTo. This works well since tinymce doesn’t set his own classes like visualaid for td’s. if you set the class with tinyMCE.execCommand(“mceSetCSSClass”, false, toSetTo) this is no more a problem! I don’t know if newer versions are effetced.

  29. Bramus! says:

    @olaf: bramus_cssextras cannot handle multiple classnames as a single element dropdown (select element) cannot contain multiple selections …

  30. redox says:

    But i would be pretty good to have it solved to give one element more than one class.
    I have a image which can be positioned right (per class for float) now this image should have a border.
    At the moment, i will have to create a class for float right and border and create a class with float right but without a border…
    I would solve it like this, i have an extra row in tinymce for your plugin. First there are 2 select-boxes, one for id, one for class. But if one class is assigned, the plugin fade in a new select box for classes without the class which was alloctated yet.

    What do you think about it? I would help you if you like.

    Greetz
    Max

  31. Scott says:

    What are the implications of the classes-dropdown-field (aka “bramus_cssextras_classes” button) being grayed out? It simple says “.class” and I’m unable to pull down the menu. It’s disabled it seems. I’m not using the cssextras_ids field and haven’t tried it yet.

    The CSS “view” is loading fine, as I’m able to see all styled applied to my objects. And most of my classes in the called-upon css file are not reliant on the existence of a “container” or similar id’d element. They’re mostly just bare classes (.left {} for example). Any ideas here?

    And of course, good stuff man. Thanks. It’s just what I envisioned needing. ๐Ÿ™‚

  32. Bramus! says:

    @Redox: been working on a new version lately, yet Tiny seems to be giving me some headaches with TinyMCE’s propietary ListBox control (viz. the visually appealing dropdown). Thinking about writing my own ListBox control in order to bypass some troubles I ran into and to enable the selection of multiple classes.

    @ Scott: that’s because bramus_cssextras hasn’t found any classes that can be applied to the selected element. This is most likely due to the fact that you’re defining .introText (a normal class selector) without any form type selector. In order for it to show up (to a p element for example) you need to define both the element and class: p.introText will tellbramus_cssextras to adjust the dropdown (the bramus_cssextras_classes button as you name it) to hold introText when a p element is selected ๐Ÿ˜‰

  33. Igor says:

    Hi, Bram!
    Big thanks for this usefull plugin!
    I have just installed it in MODx CMS with TinyMCE as RTE and it works very well. I will recommend it to all my friends.
    Best wishes,
    Igor.

  34. Bramus! says:

    Thanks Igor ๐Ÿ™‚

  35. Nico says:

    Hi Bramus,
    Thanks for your plugin, it works, but I would like to know why your plugin don’t detect for example “p.introText” ?

    thanks too for your answer,

    Nico

  36. Nico says:

    Hi Bramus,
    excuse me for my comment. I solved the problem.
    Thanks again for your plugin,

    Nico

  37. Ric says:

    Bramus, is there a way to display friendly CSS Class names, the same as TMCE?

  38. Rudy says:

    Hi Bramus,

    I really like the idea behind your plugin, it’s really that what I searched for. Sadly I can’t use it, because I found a bug with both Firefox (3.0.3 Linux and Windows) and IE (7).

    You can try it yourself on your demo page.

    With Fx:

    1) Select the bird-image, .class shows ‘floatLeft’ now. Set the .class to .floatRight. The bird image looses focus (would be nice if it keeped the focus, but that’s not the prob), reselect the image and choose ‘floatLeft’ in the .class-dropdown. The dropdown does not close anymore and items remain the same even if you select other elements in the editor.

    2) Another one pretty like the first one with the id: select the first paragraph (introText) and set it to [no id]. Select the second paragraph below the list and set the #id to introText. The ID-dropdown does not close.

    with IE7:
    try 1) and 2) from above. The behaviour is different, but still buggy.

    Do You plan to fix these bugs or do You have a quick’n’dirty solution? I debugged a few hours but I hat to recognise that I know to few about tinymce-plugin development to fix this.

    best regards
    Rudy

  39. Jan-Willem says:

    Thanks for sharing this plugin! I will definitely use this plugin on all my CMS systems! keep up the good work ๐Ÿ˜€

  40. Mike says:

    +1 on the bugs mentioned by Rudy.

    Otherwise a great plug-in. Love the idea ๐Ÿ™‚

  41. Will says:

    I have a few styles that I would like applied to any tag. For instance:

    .red { color: red; }

    Currently, the .red style isn’t available through the bramus_cssextras_classes selector. Is there a way to enable that?

    I know it will be included in the standard styles pull down TinyMCE provides. I’d like to integrate the two since having more than one style pull down will only confuse my users.

  42. hades says:

    It seems that, if the plugin is declared after the “simple paste” plugin, it doesn’t work

    ex :
    plugins : “simplepaste,bramus_cssextras”,

  43. Joseph says:

    Hey there! Really cool plug – BUT – I keep getting an error in both firefox and ie where i can select 1 class no problem, then when i select a second class in ie it throws a javascript error and freezes, and in firefox there are remnant lists (almost like the pulldown is not going away… I’ve tried just about everything and AM still leaving it in… lol

    Thanks so much!

    Joseph

  44. Jesper says:

    Hi,

    I have precisely the same problem as Joseph has as of March 20th. I haven’t yet found a solution to this.
    Have you seen this problem before, Bram?

    Best regards,
    Jesper

  45. Jesper says:

    My comment above is pretty much a duplicate of Ruby’s comment on October 5th

    Best regards,
    Jesper

  46. David says:

    Hey Bram, nice work on the plugin, appreciate it!

    But there is an issue whereby the .class list div stays visible upon selection of an entry. I’m using firefox 3.0.10, and the bug does not present itself all the time, i cannot just reproduce it on demand.

    It happens often though. Any thoughts?

  47. Ric says:

    @David – I’m getting it too. In fact, I get a second .class list div appended to the bottom of the original. The second appears and disappears correctly while the original stays open.

    Very disappointed to see your cool plugin stop working, as I will have to remove it from TinyMCE.

  48. dekelly says:

    My objective was simply to specify line heights using the TinyMCE WYSWIG editor. I googled and found this wasn’t so straightforward and came across your plugin. Im trying to integrate this into TinyMCE in the Concrete5 CMS. All code for the tinyMCE.init can go into a custom field inside Dashboard/sitewide settings/content toolbars of the C5 UI. I have followed the instructions above but I cannot see the bramus selectors in my editor. The css file i created, mce_content.css, resides in concrete/themes/default/mce_content.css where this is the default concrete 5 theme: Plain Yoghurt. I have specified the content_css path both with and without the “/” . I have also tried it both with and without the “_add” on “theme_advanced_buttons1”. So my TinyMCE custom toolbar code is;

    theme : “advanced”,
    plugins: “safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,bramus_cssextras,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager”,
    editor_selector : “advancedEditor”,
    content_css : “/mce_content.css”,
    spellchecker_languages : “+English=en”
    theme_advanced_buttons1 : “undo,redo,|,styleselect,formatselect,fontsizeselect,fontselect,|,bramus_cssextras_classes,bramus_cssextras_ids”,
    theme_advanced_buttons2 : “bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,anchor,image,cleanup,code,|,forecolor,backcolor”,
    theme_advanced_buttons3 : “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,insertdate,inserttime,|,ltr,rtl,|,help”,
    theme_advanced_buttons4 : “charmap,emotions,iespell,media,advhr,|,fullscreen,preview,|,print,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,search,replace”,
    theme_advanced_blockformats : “p,address,pre,h1,h2,h3,div,blockquote,cite”,
    theme_advanced_toolbar_align : “left”,
    theme_advanced_fonts : “Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;/***/,zapf dingbats”,
    theme_advanced_font_sizes : “1,2,3,4,5,6,7”,
    theme_advanced_styles: “Note=ccm-note”

    My css is just basic for test purposes;

    a {color: #333333;}

    img {padding: 2px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;}
    img.floatLeft {float: left;}
    img.floatRight {float: right;}

    ul.smallList {list-style:none; margin-left:0px; padding:0px; padding-left:24px; font-size:12px; }
    ul.bigList {list-style:none; margin-left:0px; padding:0px; padding-left:24px; font-size:16px; }

    Would like to solve this. If I still have trouble could you recommend an easier way in the existing TinyMCE functionality to have a dropdown menu to specify line height?

    Appreciate some pointers.

  49. Dan says:

    I am also finding some errors and some menus staying open. Otherwise this is an excellent plugin. Its been a year since others have reported these problems. I don’t expect you to fix them. It would be great if you could tho! I will try and fix myself. Cheers, Dan.

  50. Joseph says:

    Hi Dan.

    Have you been able to fix the dropdown problem? I just checked back to see if any developments have been made. Seems it’s still up to the same old tricks…

    Thanks,

    Joseph

  51. Master of Chess says:

    Hey guys,
    I wonder, why nobody has found a solution for the problem with multiple entries in the menus, before. It was really annoying, so I spent 2 hours for fixing it. Here ist the…

    +++++++++++++++++++++++++++++++
    SOLUTION
    +++++++++++++++++++++++++++++++

    Just replace lines 552 to 556…

    // render the selectdropdown
    selectDropDown.renderMenu();

    // enable the selectbox!
    selectDropDown.setDisabled(false);

    …by:
    // render the selectdropdown
    document.getElementById(selectDropDown.id).parentNode.innerHTML = selectDropDown.renderHTML();

    // enable the selectbox!
    selectDropDown.postRender();
    selectDropDown.setDisabled(false);

    ———-

    Works fine for me in all browsers. Please report on your experiences…

    Greets
    MoC

  52. Michael Olson says:

    Having trouble with the styles drop-down menu “sticking” open. Is there a solution to this? It makes the plugin unusable. Happens on both Firefox and Safari (perhaps other browsers, too) on PC and Mac. I notice Bram hasn’t responded to any of the previous comments about this yet – Bram, are you out there? Do you want some money to fix this? Let me know how much you need – this issue is a major bummer.

  53. Carlo says:

    Ya the drop down is messed…. its still usable. it just sticks, hit submit and make another change.

    Master of Chess’ Solution Does not work…. it makes it worse in fact… or for me anyways.

  54. traedamatic says:

    Hey,

    i found a dirty hack for the listbox menu error:

    In the editor_plugin.js and within the “rebuildDropDown” menu add following lines of code:

    if (document.getElementById(‘menu_ta_ta_bramus_cssextras_classes_dropdown_ta_menu’)) {

    var el = document.getElementById(‘menu_ta_ta_bramus_cssextras_classes_dropdown_ta_menu’)

    el.parentNode.removeChild(el);

    }

    if (document.getElementById(‘menu_ta_ta_bramus_cssextras_ids_dropdown_ta_menu’)) {

    var el = document.getElementById(‘menu_ta_ta_bramus_cssextras_ids_dropdown_ta_menu’)

    el.parentNode.removeChild(el);

    }

    this is not a good solution but works good for me.

  55. Richard says:

    Hi Bram,

    I noticed someone posted this earlier, but i can’t seem to get this working with concrete5 any chance you can give us a run down on how to do so?

    Thanks

  56. Alex says:

    Hi,

    I just quickly tested the demo. If you use copy/paste you quickly get duplicate ID attributes in the DOM. Sorry, if this has been mentioned before, I only searched for “paste” on the page.

  57. Kante says:

    It is not possible to add a span style in any p tag when any p.class has been declared in the loaded css file.
    I need to make something like this : some text span some more text
    Any idea on how I could do this?

  58. Soma says:

    Hey, thanks for this great plugin!

    I’m trying to get it to work with tables. But it doesn’t work.

    in content.css I got:
    table.simple{…}
    table.simple td {…}

    It will show up “simple” in the dropdown when table is selected but adding/removing doesn’t really work. Also sometimes it adds the class to the th instead of the table tag. Anyone experience same issue with tables?

  59. Aron Lakatos says:

    I’ve spent some time making the plugin work with Umbraco 6, let me share my experiences.

    1., create a folder at \Umbraco_Client\Tinymce3\Plugins\bramus_cssextras
    2., drop your “editor_plugin.js” here, duplicate it, as “editor_plugin_src.js”
    3., modify the \Config\TinyMceConfig.config

    3.1 add a command under the commands xml node
    <command>
    <umbracoAlias>bramus_cssextras</umbracoAlias>
    <icon>images/editor/formSelect.gif</icon>
    <tinyMceCommand value=”” userInterface=”true” frontendCommand=”bramus_cssextras”>bramus_cssextras</tinyMceCommand>
    <priority>77</priority>
    </command>

    3.2 add a plugin under the plugins xml node
    <plugin loadOnFrontend=”false”>bramus_cssextras</plugin>

    3.3 add the config keys to the customConfig xml node (these are the attribute-value pairs you would list under the tinyMCE.init function. make sure that you are adding the button to the correct theme, thus umbraco here)
    <config key=”theme_umbraco_buttons1_add”>separator,bramus_cssextras_classes,bramus_cssextras_ids</config>
    <config key=”content_css”>/css/editorial.css</config>

    3.4 you must touch (change & save) your web.config to see the changes made to TinyMceConfig.config

    3.5 go to the Developer section of the CMS, choose the “Richtext editor” data type, and enable the checkbox the newly added button in settings (looks like a small b/w dropdown)

    3.6 go to a content node with a rich text editor and start using the plugin (you should see the class and id dropdowns by now)

    a couple gotchas:
    – if your richtext editor won’t show up, you haven’t added the _src suffix to the plugin, thus umbraco won’t find it, and can’t compress it. This will break the tinymce editor loading process.
    – you can use the same editorial css that you are using for the default styles in mce

    That’s all, I hope you found this useful

  60. Tom says:

    Any support for TinyMCE 4.x ?

    This plugin is great, but not working with latest TinyMCE.

Leave a Reply

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