TinyMCE自定义格式:添加和删除特定的CSS样式

时间:2017-08-02 09:01:05

标签: tinymce tinymce-plugins

目前,我正在开发一个使用自定义格式的插件。不幸的是,我不能使用类作为输出HTML 来使用内联样式。

我正在使用声明:

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

问题我:我想使用相互影响的格式。我的意思是:

用户点击选项“虚线边框” - >如果选择已设置边框宽度,请勿触摸。如果未设置,请设置border-width:1px; - >无论当前设置什么,覆盖border-style:dashed;

用户点击选项“虚线边框” - >如果选择已设置边框宽度,请勿触摸。如果未设置,请设置border-width:1px; - >无论当前设置什么,覆盖border-style:dotted;

用户点击“粗边框” - >如果已设置border-style,请勿触摸。如果未设置,请设置border-style:solid; - >无论设置什么,覆盖border-width:3px;

如何读取和过滤当前选择的当前CSS样式?在我的示例中,a是编辑器的实例,单击按钮时会将该实例传递给该函数。请不要将我的问题与this one混淆,因为它不是副本&粘贴动作,所以我不能在这里使用那些对象。

问题II:如何删除这些样式,因为它可能是不同组合的混合?

目前,我必须解决的唯一想法是创建一个包含所有可能值的数组并循环通过这些,例如

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");
}

我发现这是一个非常难看的解决方案,而且效率也不高。

还有其他想法吗?

0 个答案:

没有答案