Профессиональный Вики-редактор текстов

markitup-editor.png

Я уже рассказал зачем в Кампусе нужна вики-разметка и про визуальный редактор текстов. Теперь расскажу про текстовый редактор, запускающийся по умолчанию при написании постов в блогах и комментариях.

Основная особенность профессионального редактора: он использует движок MediaWiki для преобразования вики-разметки в HTML-код. Это позволяет использовать ту же мощную вики-разметку, что и знаменитая Википедия и даже копипастой переносить статьи из Википедии в Кампус и наоборот (с соблюдением лицензии, конечно).

Зачем нужна вики-разметка[править]

Но зачем вообще вики-разметка?

  1. Обеспечения безопасности на многопользовательских сайтах, на которых запрещены некоторые теги HTML.
  2. Быстрый набор сложноформатированных текстов без использования мыши.
  3. Простое и предсказуемое изменение форматирования уже набранного текста (визуальные редакторы часто сбоят на сложных текстах).
  4. Кодогенерация.

Разберу некоторые вещи в качестве примера:

Быстрый набор сложноформатированных текстов[править]

Возьмем наш визуальный редактор и попробуем посчитать что надо сделать для набора заголовка.

  1. Написать название заголовка
  2. Оторвать руку от клавиатуры и взять мышь.
  3. Навести мышь на кнопку заголовков.
  4. Нажать на выпадающий список.
  5. Прокрутить колесом мыши на нужный размер заголовка и кликнуть по нему.
  6. Нажать Enter для перехода на следующую строку.

Теперь наберем тот же самый заголовок вики-разметкой:

  1. Нажать Ctrl+3 для заголовка 3 уровня.
  2. Написать название заголовка.
  3. Нажать кнопку End для перехода в конец строки.
  4. Нажать кнопку Enter для перехода на следующую строку.

Казалось бы разница в два действия, но эти действия делаются мышью и, потому, медленные. Причем, отказ от вставки заголовка "горячей клавишей" даже еще несколько ускоряет набор - надо просто набрать чуть более длинный заголовок за счет символов "===" в начале и конце заголовка и нажать Enter.

И такой выйгрыш в 1-3 действия в большинстве случаев использования вики-разметки и особенно становится заметным на больших текстах или наборе сложноформатированных текстов.

Выйгрыш в кодогенерации[править]

Следующи выйгрыш в автоматической генерации кода из вики-разметки:

  • При наборе тех же заголовков, при достаточном их количестве автоматически сгенерируется Table Of Content (тег __TOC__), в заголовки проставятся якоря, а TOC заполниться ссылками быстрого перехода к нужному разделу статьи. Попробуйте тоже самое натыкать мышью :).
  • Кодогенерация полезна для изменения уже сгенерированного кода. Представим, что вы вставили embed-код YouTube и вдруг Google выпустила новый, более лучший плеер, для которого требуется указать другой embed-код. Кто-то будет ходить и править уже вставленный embed-код на всех страницах сайта? Наверное нет. А если бы использовалась вики-разметка, то из нее можно было бы перегенерировать embed-код просто поправив один файл в вики-движке.

Использование редактора[править]

Пора перейти к редактору. Если посмотреть на панель, то у редактора есть несколько кнопок, покрывающих наиболее часто используемый функционал. По клику на кнопку вставляется тег вики-разметки. Для некоторых кнопок есть горячие клавиши.

markitup-control-panel.png

Заголовки[править]

H1, H2, H3, H4, H5 - вставляют заголовки соответсвующего уровня. Горячие клавиши Ctrl+1, Ctrl+2, ..., Ctrl+5

Выделение текста[править]

B, I, S - вставляют теги выделения текста жирным, курсивом и перечеркивание текста. Клавиши очевидны Ctrl+B, Ctrl+I, Ctrl+S

Ссылки и рисунки[править]

Следующие клавиши вставки ссылки и рисунка. В принципе, они вообще не нужны, т.к. и ссылку на любой файл и рисунок можно вставить простой ссылкой без всякого форматорированя. Оставил я их прежде всего для тех, кто не читает инструкций :).

Списки, цитаты, код[править]

Остались клавиши вставки маркированного и нумерованного списков, цитирования и вставки кода. Клавиши со списками нужны будут только на начальном этапе, пока еще не помните что значат # и * в начале строки. Вот цитаты более интересны: есть два режима вставки цитаты:

  • <blockquote></blockquote> вставляеть обычную цитату. Горячая клавиша Ctrl+Q.
  • <ref></ref> вставляют цитаты в виде сносок, генерирующихся на месте тега<references />. Здесь горячая клавиша Alt+Q.

Код программ заключается в самый обычный <code></code>.

echo "hello world";

Предпросмотр[править]

Ну и последняя кнопка - preview.png кнопка предпросмотра через движок MediaWiki. Она откроет новое окно в котором будет предпросмотр набираемого текста. Самая изюменка в том, что в редакторе можно набирать текст и сразу в окне предпросмотра видеть что получается.

Справочник вики-разметки[править]

Конечно, клавиши не покрывают всех возможностей MediaWiki, но всегда можно посмотреть правила разметки в документации Кампуса.

Упрощенная вставка веб-ресурсов[править]

На последок я оставил самое вкусное: использование упрощенной системы вставки веб-ресурсов. Часто возинкает необходимость вставлять картинки, видео, презентации, голосования, документы и многое другое в страницы. Вики-разметка для всех этих разнородных ресурсов, обычно, не стандартна и сильно перегружена подробностями. Взачастую, пользователь хочет вставить рисунок или видео с YouTube и ему не хочется указывать точные размеры видео, выдерать из embed-кода идентификатор видео по инструкции и делать т.п. вещи.

Я решил облегчить эту задачу на современный лад и написал модуль для MediaWiki, который по простой ссылке на страницу с ресурсом опознает сервис (тот же YouTube, видео из вКонтакте или Кампуса, книги из ELiS и т.п.) и заменяет обычную ссылку на embed-код.

Примеры вставки веб-ресурсов[править]

Вот как вставляется видео https://www.youtube.com/watch?v=FvZ8EQKtSWQ из YouTube при использовании embed-кода:

<iframe width="560" height="315" src="//www.youtube.com/embed/FvZ8EQKtSWQ" frameborder="0" allowfullscreen></iframe>

Так вставляется стандартной вики-разметкой:

{{#ev:youtube|FvZ8EQKtSWQ}}

Так вставляется в обсуждаемом редакторе:

https://www.youtube.com/watch?v=FvZ8EQKtSWQ

Т.е. просто копипастится ссылка на видео из адресной строки браузера.

Примеры других ресурсов можно посмотреть в документации. Там тоже просто пишется URL-ссылка на страницу с ресурсом.