Как заставить CKeditor перейти с Hspace и Vspace на правильный CSS - PullRequest
Новая
       5

Как заставить CKeditor перейти с Hspace и Vspace на правильный CSS

0 голосов
/ 27 июля 2010

Я работаю с CKeditor, и по какой-то причине они включили Hspace и Vspace в свой пользовательский интерфейс. Удобная идея, позволяющая пользователям манипулировать своими изображениями, но это не рекомендуется.

Кто-нибудь конвертировал Hspace и Vspace в CKeditor в CSS и знает, как объяснить их преобразование?

Я новичок в JavaScript ..

Ответы [ 2 ]

2 голосов
/ 27 июля 2010

hspace и vspace - поля в пикселях. Преобразование должно быть прямым, немедленным и простым.

Где вы хотите, чтобы произошла коррекция? Я ничего не знаю об источнике CKEditor, поэтому я предлагаю три варианта.

Вариант 1: замените атрибуты hspace и vspace соответствующими CSS во время отправки . Это может повлиять на возможность редактирования позже.

Вариант 2: замените атрибуты hspace и vspace на соответствующий CSS во время визуализации . Это может быть медленным, если вы делаете это правильно (HTML-парсер).

Вариант 3: замените атрибуты hspace и vspace соответствующими CSS на стороне клиента во время рендеринга. Это должно быть тривиально в jQuery, Prototype, Mootools или любой другой используемой вами библиотеке.

jПросьба на помощь! Нечто подобное может сработать. 

$('img[hspace]').each(function(el){
    var pixels = parseInt($(el).attr('hspace'));
    if(isNaN(pixels) || pixels < 1)
        pixels = 0;
    else
        pixels = pixels / 2
    $(el).css('marginLeft', pixels + 'px')
         .css('marginRight', pixels + 'px')
         .removeAttr('hspace');
});

$('img[vspace]').each(function(el){
    var pixels = parseInt($(el).attr('vspace'));
    if(isNaN(pixels) || pixels < 1)
        pixels = 0;
    else
        pixels = pixels / 2
    $(el).css('marginTop', pixels + 'px')
         .css('marginBottom', pixels + 'px')
         .removeAttr('vspace');
});
1 голос
/ 28 июля 2010

Какую версию CKEditor вы используете?Загрузите http://ckeditor.com/demo и посмотрите на сгенерированный источник этого изображения: style = " margin-left: 10px; margin-right: 10px; float: left; ширина: 120px; высота: 168px;"так что вам не нужно ничего делать.

...