Skip to content


Subversion checkout URL

You can clone with
Download ZIP


[feature] colorize current active class #318

r043v opened this Issue · 6 comments

3 participants



it would be great if current active class of selected item will be colored in the class list,
due to filter, some of them cannot be used and if many, find the current to disable it can be hard.

also, hide or visually disabled current unaplicable class would be great too !

thanks for your work !


I definitely think that would be cool and helpful to users. It would actually be a really good candidate for a plugin since it's definitely possible to implement this outside WYMeditor core and it's also something I can see some people want to disable for performance reasons.

Going to tag it as a plugin idea for right now, but it's the kind of generally-useful plugin I'd love to distribute with WYMeditor proper.

Thanks for the suggestion


i just see plugin, i need to know api and real structure etc ... but from hovertools plugin i made a functional thing :- )

i was need to use jquery 1.7.1 to have .on

/jslint evil: true */

A hovertools plugin.


WYMeditor.editor.prototype.hovertools = function() {
var wym = this;

wym.status(' ');

// Bind events on buttons
    function() {
    function() {
        wym.status(' ');

// Classes: add/remove a style attr to matching elems
// while mouseover/mouseout
var class_select = jQuery(this._box).find(this._options.classSelector)

    function() {
        var aClasses = eval(wym._options.classesItems);
        var sName = jQuery(this).attr(WYMeditor.NAME);
        var oClass = WYMeditor.Helper.findByName(aClasses, sName);

        if (oClass){
            jqexpr = oClass.expr;
            // Don't use jQuery.find() on the iframe body
            // because of MSIE + jQuery + expando issue (#JQ1143)
            if (!jQuery.browser.msie) {
    function() {
        // Don't use jQuery.find() on the iframe body
        // because of MSIE + jQuery + expando issue (#JQ1143)
        if (!jQuery.browser.msie) {

var wym_content = jQuery(wym._doc);
{   var t = jQuery(this);
var class_name = t.attr(WYMeditor.NAME);
wym_content.on('mouseover', '.'+class_name, function(event)
{   t.css('background-color','#cfc');
}).on('mouseout', '.'+class_name, function(event)
{   t.css('background-color','');


it's prety nice ! thanks !

i will try to made a real plugin with isclass test or just use any selector ^^

also, maybe, made a sort of custom class list like refinerycms made in their own wymeditor implementation
( )


Awesome :)

Glad to see you were able to put something together so quickly. If you get things to a point where you'd like a code review or maybe to try and put something in wymeditor core, I'd love for you to put a pull request together.

I've got quite a lot of bug-fixing and documentation to work on before I'll personally be able to dedicate time to writing more features and plugin from scratch, but I would love to help out where I can if this is something you'd like to have a go at.


i started sorting of classes,

was need to change a bit the way the css must be writed

/* p:PARA:Hidden note /
p.hidden-note /
p[@class!="important"] / {
display: none;
color: #999; border: 2px solid #ccc; */

the ":" are necessary, first element is selector, second is selector text and last is label

there is any callback in the core who's launched every time we "focus" or change anything ? i want to know who's current item.

it work well on hover, but i want to made a real power plugin, to hide unaplicable selector of current element and after, disabled unapplicable class

where can i access /* p[@class!="important"] */ from the api ? in the dom there is only the class name who can be access

here is my current source, you'll see that i not use api, only dom manipulation, can it break with some skin ?


ok, a simple

wym_content.on('keyup click',function(e)
{   var node = wym.selected().nodeName;

give me "callback" when any change are done and extract me the current dom entry, but not a very clean way to get the callback, maybe i'll try a filter on the keyup key to only refresh on arrow and enter/delete key


You're right that there's no well-defined skin API right now, so DOM manipulation is the only way. That means that some of this might break with different skins, but it should mostly work. Skin standards and a plugin API are things we'd like to build for a 1.1 release and finalize in a 2.0 release. Plugin ideas like this will help us figured out what might actually be needed with the API.

As far as doing things that should only trigger when we might have moved to a new block element, we tend to use something like:

    // If we potentially created a new block level element or moved to a new one
    // then we should ensure that they're in the proper format
    if (evt.keyCode === WYMeditor.KEY.UP ||
            evt.keyCode === WYMeditor.KEY.DOWN ||
            evt.keyCode === WYMeditor.KEY.LEFT ||
            evt.keyCode === WYMeditor.KEY.RIGHT ||
            evt.keyCode === WYMeditor.KEY.BACKSPACE ||
            evt.keyCode === WYMeditor.KEY.ENTER) {
    // Do stuff

Example: editor/firefox.js line 218

@mightyiam mightyiam modified the milestone: 1.1.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.