FireFox и IE конвертируют исходные значения цвета в RGB - PullRequest
Новая
       6

FireFox и IE конвертируют исходные значения цвета в RGB

0 голосов
/ 03 апреля 2012

ОБНОВЛЕНИЕ: проблема в методе .cloneNode () FF: http://jsfiddle.net/beCVL/1/

Я знаю, что FF и IE внутренне преобразуют цвет в RGB, что вызывает проблемы, потому что значения цвета не совпадают с тем, чтона сервере.

Proof: 

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>​
]

РЕДАКТИРОВАТЬ: проблема в методе .cloneNode () FF: http://jsfiddle.net/beCVL/1/

Ответы [ 3 ]

1 голос
/ 03 апреля 2012

Как я вам ответил в http://cksource.com/forums/viewtopic.php?f=11&t=25141, вы можете использовать исходный пример «выходного HTML», содержащий полный код, который был скопирован в блоге, который вы связали, и использовать функцию convertRGBToHex, как это делается.

И, кстати, Firefox уважает стили, единственный браузер, который в настоящее время изменяет эту часть, - это IE.

0 голосов
/ 04 апреля 2012

Тот факт, что клонирование узла изменяет атрибут стиля, почти наверняка является ошибкой в Gecko, но в среднем element.style.color вернет rgb(255, 0, 0) в обоих случаях.

0 голосов
/ 03 апреля 2012

Если вы хотите сравнить два цветовых значения, каждое из которых может быть представлено несколькими различными способами, то вы должны убедиться, что оба они преобразованы в каноническую форму (например, точно такую ​​же форму).

Таким образом, вы можете использовать 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);
}
...