HTML-редактор MarkItUp!

MarkItUp! – это бесплатный и гибкий кроссбраузерный редактор, который отличается отсутствием визуального отображения содержимого при редактировании, как это есть в обычных HTML-редакторах, вроде TinyMCE.

Разработан для людей, которым приходиться часто открывать исходных код визуальных редакторов, чтобы добавить дополнительные классы или присвоить CSS-стили.

При использовании MarkItUp! вы получаете чистый исходный код, при котором продвижение сайта будет происходить более продуктивно.

Преимущества редактора MarkItUp!

1) Простая и понятная установка в 3 строчки кода
2) Поддержка клавишных сочетаний
3) Поддержка интерфейсов (скинов)
4) Просмотр результата нажатием 1-й кнопки
5) Поддержка HTML тегов, Wiki-разметки, BBcode
6) Чистый код на выходе – что вижу, то получаю
7) Высокая скорость загрузки редактора
8) Удобное редактирование alt, title тегов
9) Лёгкая интеграция новых кнопок и сниппетов 

Установка

Установка MarkItUp! Чрезвычайно проста – с ней справиться любой человек, который может открыть исходный код php или html шаблона сайта. Последовательность установки выглядим следующим образом:

1) Пишем путь до jquery.js и путь до markitup.js

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>

2) Пишем путь до настроек редактора по умолчанию

<script type="text/javascript" src="markitup/sets/default/set.js"></script>

3) Выставляем CSS стили редактора. Первая строка является файлом, отвечающим за визуальный скин.

<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
<link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />


При загрузке редактор ищет все поля <textarea>, если они не указаны явным образом через селекторы id или class. Настройки могут быть изменены в соответствии с личными предпочтениями. Далее можно подключать свои стили, адаптированные под конкретные нужды веб-мастера или редактора (контент-менеджера).

Горячие клавиши

MarkItUp поддерживает горячие клавиши, которые выставляются в файлах конфигурации: jevix.php, markup_settings.js и style.css. При добавлении своих кнопок можно выставлять особые сочетания. Горячие клавиши используются при помощи сочетаний: alt+key, ctrl+key, shift+key, shift+ctrl+key. 

Предварительный просмотр

Вверху - исходное содержимое. При нажатии на галочку, чуть ниже, отображается предпросмотр.

Перед тем как опубликовать итоговый результат можно нажать на кнопке предпросмотра и без перезагрузки страницы оценить форматирование текста и корректность отображения элементов. Но прежде чем пользоваться данной возможностью желательно соотнести стили редактора со стилями веб-страницы, чтобы текст в редакторе не отличался от стилей на самом сайте. Многие пренебрегают данной возможностью и вынуждают себя обновлять содержимое по 10-15 раз, прежде чем результат полностью их устроит. По умолчанию визуальное редактирование встроено в другие редакторы: начиная от TinyMCE, и заканчивая Imperavi. Но в MarkItUp! обратный подход – сначала исходный код, а уже потом результат.

Заключение 

MarkItUp! – это редактор, который сделан скорее для дизайнеров, верстальщиков и программистов, чем для контент-менеджеров и журналистов, поскольку сделан упор на чистоту исходного кода, где всё содержимое документа отображается изначально. Если при работе в визуальных редакторах Вам приходиться постоянно открывать исходный код и вносить туда правки, то обратите внимание на MarkItUp, поскольку он создан именно для этого.

11.10.2013