Joomla! Україна

Хто хоч раз користувався редактором CKEditor вже навряд чи повернеться до старих візуальних редакторів, оскільки в CKEditor немає проблем з форматуванням тексту, він зручний в користуванні і до того ж у нього сучасний інтерфейс.

Однак в CKEditor є доволі неприємний нюанс, який відразу помітно при вставці великих зображень і використанні різних плагінів для зменшення оригінальних зображень.

Цей нюанс заклюється в тому, що при вставці зображення CKEditor додає в тег <img> атрибут style= з параетрами висоти та ширини.

Мені цей атрибут заважає в роботі, оскільки я використовую класи для маніпуляції зображень.

Наприклад:

• Якщо за замовчуванням у мене зображення будуть оброблятися плагіном, то за допомогою підключених стилів у сам редактор я задаю ширину зображення 130-150 пикселів. У цьому випадку зображення масштабується.
• Іноді мені необхідно вставити оригінальне зображення без подальшої обробки плагіном, тому через вибір стилів редактора я задаю для зображення class="noimage" і у цьому випадку для зображення вже застосовується нове значення стилю і тому в самому редакторі у мене автоматично зображення відображається в оригінальному вигляді.

Отже, щоб маніпулювати зображенням на рівні стилів в редакторі і щоб деякі плагіни коректно обробляли наші картинки (деякі плагіни ігнорують атрибут стилю) нам необхідно в конфігураційному файлі config.js додати невеличкий сніпет.

Якщо ж ви користуєтесь розширенням для Joomla CKEditor, то нижче поданий код можна вставити в конфігурації розширення (у вкладці Advanced settings) в поле Custom javascript configuration.

CKEDITOR.on('instanceReady', function (ev) {
    ev.editor.dataProcessor.htmlFilter.addRules(
        {
            elements:
            {
                $: function (element) {
                    if (element.name == 'img') {
                        var style = element.attributes.style;
                        if (style) {
                            var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                                width = match && match[1];
                            match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                            var height = match && match[1];
                            if (width) {
                                element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            }
                            if (height) {
                                element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            }
                        }
                    }
                    if (!element.attributes.style)
                        delete element.attributes.style;
                    return element;
                }
            }
        });
    }
);

У випадку коли необхідно змінити атрибут стилю на атрибут висоти та ширини, наприклад:

<img src="image.jpg" style="height:200px; width:300px;">

на

<img src="image.jpg" height="200px" width="300px">

достатньо наступну частину коду

                            if (width) {
                                element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            }
                            if (height) {
                                element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            }

замінити на таке:

                             if (width) {
                                element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                                element.attributes.width = width;
                            }
                            if (height) {
                                element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                                element.attributes.height = height;
                            }

У настпний раз розповім як зробити тюнінг CKEditor на рівні стилів та невеличкого скрипта.