FireFox和IE将原始颜色值转换为RGB

FireFox and IE convert original color values to RGB

本文关键字：转换 RGB 颜色值 原始 IE FireFox      更新时间：2023-09-26

UPDATE：问题出在FF的.cloneNode（）方法上：http://jsfiddle.net/beCVL/1/

我知道FF和IE内部将颜色转换为RGB，这会造成问题，因为颜色值与服务器上的不匹配。

证明：

Chrome 18:
CKEDITOR.instances.selected_text_actual.getData()
>> "s <span style="color: #ff0000">text</span>"
FireFox 11:
CKEDITOR.instances.selected_text_actual.getData()
>> "s <span style="color: rgb(255, 0, 0);">text</span>"

所以，我想解决这个问题的方法是让CKEditor的数据处理器始终使用rgb值。有办法做到这一点吗？

我发现这样的东西应该有效：

CKEDITOR.on( 'instanceReady', function( ev ){
            var editor = ev.editor,
                dataProcessor = editor.dataProcessor,
                htmlFilter = dataProcessor && dataProcessor.htmlFilter;
            // HTML 4 way to end tags
            dataProcessor.writer.selfClosingEnd = '>';
            htmlFilter.addRules({
                elements:{
                    $:function(element){
                        var e = jQuery(element);
                        e.css("color", e.css("color")); // jquery auto converts to rgb
                    }
                }
            });
        });

来源：http://sebduggan.com/blog/customising-ckeditor-settings-in-mura/但是，没有变化。

转换为RGB是非常直接的：

a.attr("style", "color: #444")
[
<div style=​"color:​ #444">​</div>​
]
a.css("color", a.css("color"));
[
<div style=​"color:​ rgb(68, 68, 68)​;​ ">​</div>​
]

EDIT：问题出在FF的.cloneNode（）方法上：http://jsfiddle.net/beCVL/1/

正如我在中回复您的那样http://cksource.com/forums/viewtopic.php?f=11&t=25141您可以使用原始的"输出HTML"示例，其中包含已复制到您链接的博客中的完整代码，并使用convertRGBToHex函数。

顺便说一句，Firefox尊重风格，目前唯一改变这一部分的浏览器是IE。

如果你想比较两个颜色值，每个颜色值都可以用几种不同的方式表示，那么你必须确保两者都转换为规范形式（例如完全相同的形式）。

因此，如果需要，可以使用rgb(x,y,z)作为规范形式，但在进行比较之前，必须确保任何表示为#xyz或#xxyyzz的颜色值都首先转换为rgb形式。

这里有一个函数，它可以将三个颜色值全部转换为不带空格的rgb(x,y,z)，然后对它们进行比较并返回结果：

function colorsAreSame(c1, c2) {
    var space = /'s+/g;
    function makeRGB(c) {
        var r, g, b;
        c = c.replace(space, "");
        if (c.charAt(0) == "#") {
            if (c.length == 4) {
                r = parseInt(c.charAt(1), 16);
                r = (r * 16) + r;
                g = parseInt(c.charAt(2), 16);
                g = (g * 16) + g;
                b = parseInt(c.charAt(3), 16);
                b = (b * 16) + b;
            } else if (c.length == 7) {
                r = parseInt(c.substr(1, 2), 16);
                g = parseInt(c.substr(3, 2), 16);
                b = parseInt(c.substr(5, 2), 16);
            }
            return "rgb(" + r + "," + g + "," + b + ")";
        } else {
            return(c);
        }
    }
    c1 = makeRGB(c1);
    c2 = makeRGB(c2);
    return(c1 == c2);
}

克隆节点会更改样式属性这一事实几乎可以肯定是Gecko中的一个错误，但同时element.style.color在这两种情况下都会返回rgb(255, 0, 0)。

相关文章：