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

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

От автора: приветствую вас, друзья. В этой статье мы с вами научимся устанавливать и настраивать визуальный редактор 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:

<script src="ckeditor/ckeditor.js"></script>

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

<script>
    CKEDITOR.replace( 'text' );
</script>

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree