Встановлення візуального редактора ckeditor з файловим менеджером

Від автора: коли ми створюємо сайт, що передбачає адміністративну частину, то рано чи пізно нам доведеться зіткнутися з питанням візуального редактора для додавання/редагування контенту на сайті. Ті, хто знайомі з мовою розмітки HTML, можуть обійтися і без такого редактора, вводячи теги в поля форми вручну… але, погодьтеся, це вкрай незручно. Та й що робити, якщо сайт ми пишемо на замовлення? Клієнт може взагалі не знати такого слова — «тег».

Давайте вирішимо цю проблему.

Деталі підручника

Говорячи про візуальному редакторі, в мережі Ви можете зустріти такий термін, як WYSIWYG-редактор. Насправді — це абревіатура, яка розшифровується наступним чином — «What You See Is What You Get». Перевести цю фразу можна буквально так — «Що бачиш, то і отримаєш».

Подібних редакторів досить багато. Є як платні, так і безкоштовні рішення. Найбільш відомі і широко використовувані редактори TinyMCE і CKeditor. Сьогодні ми будемо використовувати другий з них — CKeditor.

Для роботи з цими редакторами зовсім необов’язкові знання HTML/CSS, і наповнювати сайт може пересічний користувач, достатньо лише трохи розібратися. Панель таких редакторів дуже нагадує панель відомого MS Word (який по суті також є WYSIWYG-редактором). Ось як виглядає стандартна панель редактора CKeditor:

Отже, для того, щоб навчитися встановлювати візуальний редактор сторінки свого сайту, нам потрібно простенький тестовий сайт з однієї сторінки, точніше з двох — друга буде сторінкою адміністративної частини. Оскільки створення сайту з використанням БД не є метою нашого уроку, то цього моменту я лише побіжно торкаюся у відеоверсії уроку, пояснюючи принцип роботи заздалегідь написаного функціоналу.

Таким чином, сторінка для роботи у нас є. Для установки WYSIWYG-редактора нам потрібно його дистрибутив. Його Ви знайдете в додаткових матеріалах чи можете завантажити з офсайта — ckeditor.com

Безумовною перевагою редактора є простота його установки. Відразу слід зазначити, що редактор використовується тільки для текстових областей (textarea), тобто використовувати його для полів вводу (input) не можна. Перше, що потрібно зробити для підключення редактора — це підключити скрипт ckeditor.js… підключаємо в області head:

Після цього текстової області, до якої підключається редактор, необхідно надати посвідчення. Оскільки ідентифікатор уникализирует елемент документа, це означає, що ми можемо підключати редактор до будь-якої кількості текстових областей документа. Присвоюємо ідентифікатор текстової області:

Останнім етапом буде невеликий фрагмент коду JavaScript відразу після текстової області. Цей код якраз і встановить редактор для шуканого поля форми:

AjexFileManager.init({
returnTo: ‘ckeditor’,
editor: ckeditor1
});

Справу зроблено… Тепер можемо зберегти результати роботи і протестувати. Якщо все зроблено вірно, то тепер до текстової області підключається візуальний редактор і ми зможемо форматувати текст безпосередньо із нього:

Здавалося б все відмінно. Але насправді це тільки половина роботи. Вся справа в тому, що в безкоштовній версії не передбачено файловий менеджер. Це означає, що завантажити, наприклад, картинку для статті допомогою встановленого редактора не вийде. Саме тому наступним нашим завданням буде інтеграція файлового менеджера в редактор.

Вже готове рішення можна знайти на сайті demphest.ru, де автор пропонує некомерційний файловий менеджер, який, до речі, підходить як для CKEditor, так і для TinyMCE. У додаткових матеріалах Ви знайдете дистрибутив даного плагіна або можете взяти його з офсайта.

Отже, для інтеграції нам буде потрібно для початку підключити скрипт ajex.js:

І трохи змінити скрипт, який ініціалізує візуальний редактор:

var ckeditor1 = CKEDITOR.replace( ‘editor1’ );
AjexFileManager.init({
returnTo: ‘ckeditor’,
editor: ckeditor1
});

Готовий наш візуальний редактор php. Знову-таки нічого складного. Після підключення ми можемо запустити файл ajax.php з GET-параметр isWork. Цей скрипт створить необхідні каталоги, куди і будуть зберігатися файли, які завантажуються з редактора.

Ось тепер все. Наш візуальний редактор з файловим менеджером готові — залишилося тільки насолоджуватися тепер вже простий можливістю додавання/редагування контенту.

На цьому наш урок закінчено. Ваші запитання, відгуки завжди будемо раді бачити в коментарях. Удачі у Ваших розробках і до нових зустрічей!