Візуальний редактор HTML

20

Від автора: вітаю вас, друзі. У цій статті ми з вами навчимося встановлювати і налаштовувати візуальний редактор HTML для текстової області (textarea) вашої форми. В якості візуального редактора ми використовуємо CKEditor. Стаття розрахована на новачків.

Вихідні файли поточної статті ви можете завантажити за посиланням.

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

Все це робиться просто, з використанням тегів HTML. Однак найчастіше клієнт навіть і слів таких не знає: HTML тег… як бути в цьому випадку? Візуальний редактор — це те, що нас виручить. Працювати з ним не складніше, ніж з редактором Microsoft Word, впорається будь.

Сьогодні найбільш популярними візуальними редакторами є CKEditor і TinyMCE. Ми скористаємося редактором CKEditor. До речі, такі редактори називають ще WYSIWYG. Це абревіатура, складена з перших букв — What You See Is What You Get (що бачиш, те й отримаєш).

Перейдемо від слів до справи. У нас є найпростіша форма текстової областю textarea:

Насамперед нам потрібно завантажити скрипт візуального редактора CKEditor. Йдемо на офіційний сайт і качаємо потрібну версію: Basic, Standard, Full. Відрізняються вони наявністю функціоналу і, відповідно, кількістю кнопочок на панелі редактора. Завантажити пропоновану за умовчанням стандартну версію.

Распакуем архів і підключимо з нього файл ckeditor.js між тегами head:

Залишилося лише ініціалізувати його. Для цього після textarea пропишемо наступний код:

CKEDITOR.replace( ‘text’ );

Параметром методу replace ми передаємо id поля textarea. Власне, це все. Візуальний редактор успішно підключений.

Тепер замість стандартного поля textarea форми перед нами симпатичний редактор, яким зручно користуватися будь-якому користувачеві, у тому числі і тим, хто не знайомий з HTML. На цьому ми завершуємо цю статтю. Додатково по темі ви можете подивитися цей відеоурок. Удачі!