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?