От автора: приветствую вас, друзья. В этой статье мы с вами научимся устанавливать и настраивать визуальный редактор 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:
|
1 |
<script src="ckeditor/ckeditor.js"></script> |
Осталось лишь инициализировать его. Для этого после textarea пропишем следующий код:
|
1 2 3 |
<script> CKEDITOR.replace( 'text' ); </script> |
Параметром методу replace мы передаем id поля textarea. Собственно, это все. Визуальный редактор успешно подключен.
Теперь вместо стандартного поля textarea формы перед нами симпатичный редактор, которым удобно пользоваться любому пользователю, в том числе и тем, кто не знаком с HTML. На этом мы завершаем данную статью. Дополнительно по теме вы можете посмотреть этот видеоурок. Удачи!
