Визуальный редактор 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:

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

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

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

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