Javascript 通过getSelection类进行Rangy迭代

Javascript 通过getSelection类进行Rangy迭代,javascript,css,rangy,Javascript,Css,Rangy,我使用Tim的Rangy Library制作了一个“简单”的文本编辑器,我使用静态类来编辑斜体、粗体、罢工和下划线,如: myCss.css .n { font-weight: bold; } .i { font-style: italic; } .t { text-decoration: line-through; } .s { text-decoration: underline; } 如果我想切换一个特定的类,我只发送了一个值,以便在CreateClasseAppl

我使用Tim的Rangy Library制作了一个“简单”的文本编辑器,我使用静态类来编辑斜体、粗体、罢工和下划线,如:

myCss.css

.n {
    font-weight: bold;
}

.i {
font-style: italic;
}

.t {
text-decoration: line-through;
}

.s {
    text-decoration: underline;
}
如果我想切换一个特定的类,我只发送了一个值,以便在CreateClasseApplier中使用它,并将其应用于如下选择:

applier = rangy.createClassApplier("n");
applier.toggleSelection();
它工作完美无瑕。现在我正在尝试实现前景和背景色,我考虑创建一个称为前景的动态样式类,并为用户选择的颜色(从颜色选择器)设置文本装饰颜色,或者使用一个预构建类,如

.color1 { 
text-decortion-color: red;
}

.color2 { 
text-decortion-color: blue;
}
继续

但是用这种方式,我需要得到所选的文本类,然后迭代并检查它是否已经设置,如果没有,删除其他设置的颜色,然后添加新的颜色(很难吗?)

我更喜欢使用类似于:

applier = rangy.createClassApplier("f");
applier.text-decoration-color: #000FFF;
但是ofc它不会在我的脑海之外工作,哈哈


如果迭代是一种“艰难的方法”,那么在背景和前景中应用颜色的最佳方法是什么?

Rangy的创建者找到并提供了一种很好的方法->

为每种颜色创建一个新的应用程序,然后遍历它以检查是否应用了它

var font16Applier = range.createCssClassApplier("font16");
var font17Applier = range.createCssClassApplier("font17");
var font18Applier = range.createCssClassApplier("font18");

var appliers = [font16Applier, font17Applier, font18Applier];

for (var i = 0, len = appliers.length; i < len; ++i) {
    if (appliers[i].isAppliedToSelection()) {
        if (i < len - 1) {
            appliers[i].undoToSelection();
            appliers[i + 1].applyToSelection();
            break;
        }
    }
}
var font16Applier=range.createcssclasapplier(“font16”);
var font17Applier=range.createCssClassApplier(“font17”);
var font18Applier=range.createCssClassApplier(“font18”);
变量应用程序=[font16Applier,font17Applier,font18Applier];
对于(变量i=0,len=appliers.length;i