TinyMCE CSS Classes and IDs Plugin : bramus_cssextras

Comments

1. Manuel Martensen Jul 25 2007 / 9am

   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 Aug 17 2007 / 1am

   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 Aug 30 2007 / 6pm

   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 Sep 06 2007 / 11am

   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! Sep 06 2007 / 9pm

   @ 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! Sep 06 2007 / 10pm

   @ 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 Sep 26 2007 / 3pm

   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! Sep 26 2007 / 3pm

   @Janice: better read the installation instructions for TinyMCE again, looks like you’ve missed an essential part of it
9. Martin Sep 28 2007 / 11am

   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! Sep 29 2007 / 11am

    @ Martin: noted
11. paul Nov 11 2007 / 1pm

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

    example:
    

    #container h1 { /* ... */ }
    #content p { /* ... */ }
    #menu table { /* ... */ }
12. Bramus! Nov 13 2007 / 9pm

    @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 Nov 13 2007 / 10pm

    @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 Nov 25 2007 / 12pm

    Don’t you understand paul? This “problem” isn’t one of bramus. By the way, thanks bramus.
15. Bramus! Nov 26 2007 / 3pm

    @ redox: thanks
16. Louis Nov 28 2007 / 6pm

    How is this plugin different from the standard style selector?
17. Bramus! Nov 29 2007 / 9pm

    @ 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 Dec 03 2007 / 5pm

    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! Dec 05 2007 / 12pm

    @Sebastian: TinyMCE 3.0 (beta) is not supported at the moment. Will provide an update once TinyMCE 3.0 is released.
20. Sebastian Dec 05 2007 / 10pm

    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! Dec 11 2007 / 12am

    @ 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 Dec 11 2007 / 3pm

    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! Dec 11 2007 / 6pm

    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 Dec 11 2007 / 9pm

    That is too bad I would really like to use your plugin.
    Thanks anyways.
25. Brian Dec 17 2007 / 7pm

    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 Dec 28 2007 / 11pm

    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! Jan 06 2008 / 10pm

    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 Feb 01 2008 / 4pm

    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! Feb 06 2008 / 9pm

    @olaf: bramus_cssextras cannot handle multiple classnames as a single element dropdown (select element) cannot contain multiple selections …
30. redox Feb 10 2008 / 12am

    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 Apr 20 2008 / 12pm

    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! Apr 29 2008 / 10pm

    @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 May 27 2008 / 1pm

    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! May 27 2008 / 6pm

    Thanks Igor
35. Nico Jul 08 2008 / 9am

    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 Jul 08 2008 / 9am

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

    Nico
37. Ric Aug 20 2008 / 5am

    Bramus, is there a way to display friendly CSS Class names, the same as TMCE?
38. Rudy Oct 05 2008 / 12pm

    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 Oct 12 2008 / 1pm

    Thanks for sharing this plugin! I will definitely use this plugin on all my CMS systems! keep up the good work
40. Mike Dec 16 2008 / 8pm

    +1 on the bugs mentioned by Rudy.

    Otherwise a great plug-in. Love the idea
41. Will Dec 16 2008 / 10pm

    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 Jan 06 2009 / 9pm

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

    ex :
    plugins : “simplepaste,bramus_cssextras”,
43. Joseph Mar 20 2009 / 4am

    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 Apr 08 2009 / 9am

    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 Apr 08 2009 / 9am

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

    Best regards,
    Jesper
46. David May 12 2009 / 2pm

    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 May 22 2009 / 4am

    @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 Jul 15 2009 / 6pm

    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 Feb 13 2010 / 8am

    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 Feb 24 2010 / 12am

    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 Mar 09 2010 / 9pm

    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 Apr 07 2010 / 6pm

    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 Apr 08 2010 / 5pm

    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 Jun 11 2010 / 3pm

    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.

Have your say

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>