3

Currently, I'm working on a plugin that uses custom formats. Unfortunately, I can't use classes as the output HTML has to use inline styles.

I'm using declarations like:

    a.formatter.register("dotted", {
        inline : 'span', 
        styles : {
            borderStyle : 'dotted', 
            borderWidth : '1px',
        }
    });
    a.formatter.register("dashed", {
            inline : 'span', 
            styles : {
                borderStyle : 'dashed', 
                borderWidth : '1px',
            }
    });

Problem I: I want to use formats that impact each other. What I mean is:

User clicks on option "dashed border" -> if the selection already has a border-width set, don't touch. If not set, set border-width: 1px; -> no matter what is currently set, override border-style: dashed;

User clicks on option "dotted border" -> if the selection already has a border-width set, don't touch. If not set, set border-width: 1px; -> no matter what is currently set, override border-style: dotted;

User clicks on "thick border" -> If border-style is already set, don't touch. If not set, set border-style: solid; -> no matter what is set, override border-width: 3px;

How can I read and filter the current CSS styles that are used for the current selection? In my example, a is the instance of the editor which is passed to the function when clicking a button. Please don't confuse my question with this one because it is no copy & paste action, so I cannot use that objects here.

Problem II: How to remove these styles as it could be a mixture of different combinations?

At the moment, the only idea I have to solve it is to create an array with all possible values and loop thru these, like

for (var i = 0; i < value.length; i++) {
    var cssobj = {
        inline : 'span', 
        styles : {
        }
    }

    eval("cssobj.styles." + cssattr + "= \"" + value[i] + "\"");
    a.formatter.register("tempformat", cssobj);
    a.formatter.remove("tempformat");
    a.formatter.unregister("tempformat");
}

which I find is an extremely ugly solution, and also not very performant.

Any other ideas?

DatLicht
  • 148
  • 8

0 Answers0