Пользователь
0,0
рейтинг
13 сентября 2011 в 16:27

Разработка → MarkitUp! — Легкий редактор на jQuery

Введение


Всех приветствую!

Совсем недавно мне пришлось немного расширить функционал редактора одного проекта. Но как оказалось в моем случае я наткнулся на некие трудности. В этой статье я поделюсь с читателями как я вышел из сложившийся ситуации.

Как все было


В проекте, редактор которого следовало немного обновить, использовался как и в большинстве случаев всеми известный старожил TinyMCE. Лично я ничего против него не имею. Это отличный редактор который отлично справлялся и справляется сейчас со своими обязанностями на множестве сайтов. Я и сам использую его как основной в своих проектах. Но вернемся к теме топика, ибо речь не о нем пойдет далее.

Основная задача: мне нужно было не много доработать существующий редактор, а именно, добавить обрамление текста тегами, которых нет в текущем варианте редактора.
Конечно же, сначала мне пришла в голову идея просто доработать текущий редактор, то бишь TinyMCE. Не много почитав документацию, я понял что в общем-то и ничего сложного в этом нет. Но и были сущевственные минусы в способах, которые описаны в сети.

И вот некоторые из них:

Как оказалось, при процессе допиливания доработки редактора, нужно использовать редактор без сжатия. То есть править нужно сами src файлы редактора, а потом уже нужно заново их сжимать их компрессорами, например YUI Compressor, JSMin или же Google Closure Compiler.

У меня сразу появились мысли по этому поводу. В случае выбора варианта описанного выше, как минимум появилась бы проблема при возможных будущих обновлениях редактора.

Решение



По этому я решил пойти не много другим путем. Поскольку на сайте использовался чудесный JavaScript фреймворк jQuery, я подумал, — «А почему бы не найти какой либо другой редактор?».

Не много поискав, я нашел редактор, который называется markItUp!.
Первое на что я обращал внимание при выборе нового редактора:
  1. Легкость и гибкость его настройки.
  2. Минимум проблем с кроссбраузерностью.

Познакомившись по ближе с markItUp!, я обнаружил что этот редактор довольно таки гибкий, не смотря на его легкость. Ко всему этому он еще и поддерживает разные режимы работы с текстом.

Вот основные вкусности, которые Вас могут заинтересовать:
  1. Быстрая и легкая интеграция;
  2. Поддержка горячих клавиш;
  3. Предварительный просмотр с помощью Ajax;
  4. Легко настраиваемые скины.

Так же стоит обратить внимание на то, что редактор позволяет работать с разными наборами тегов:
Html, BBcode, Wiki syntax.

Установка


Установка редактора очень легкая.
Сначала подключаем сам редактор и jQuery.


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


Далее нам следует подключить файл с настройками редактора, что несомненно очень удобно.


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


В ином случае нужно настроить самому, что я в принципе и сделал.


<script type="text/javascript" >
   mySettings = { ... } //тут Ваши настройки
</script>


А вот, например, как выглядит рабочий конфиг:


function mySettings() {
    return {
        previewParserPath:  '',
        onShiftEnter:     {keepDefault:false, replaceWith:'<br />\n'},
        onTab:            {keepDefault:false, replaceWith:'    '},
        markupSet:  [     
            {name:'H4', className:'editor-h4', openWith:'<h4>', closeWith:'</h4>' },
            {name:'H5', className:'editor-h5', openWith:'<h5>', closeWith:'</h5>' },
            {name:'H6', className:'editor-h6', openWith:'<h6>', closeWith:'</h6>' },
            {separator:'---------------' },
            {name: 'Жирный', className:'editor-bold', key:'B', openWith:'(!(<strong>|!|<b>)!)', closeWith:'(!(</strong>|!|</b>)!)' },
            {name: 'Курсив', className:'editor-italic', key:'I', openWith:'(!(<em>|!|<i>)!)', closeWith:'(!(</em>|!|</i>)!)'  },
            {name: 'Зачеркнуть', className:'editor-stroke', key:'S', openWith:'<s>', closeWith:'</s>' },
            {name: 'Подчеркнуть', className:'editor-underline', key:'U', openWith:'<u>', closeWith:'</u>' },
            {name: 'Цитировать', className:'editor-quote', key:'Q', replaceWith: function(m) { if (m.selectionOuter) return '<blockquote>'+m.selectionOuter+'</blockquote>'; else if (m.selection) return '<blockquote>'+m.selection+'</blockquote>'; else return '<blockquote></blockquote>' } },
            {name: 'Код', className:'editor-code', openWith:'<code>', closeWith:'</code>' },
            {separator:'---------------' },
            {name: 'Список', className:'editor-ul', openWith:'    <li>', closeWith:'</li>', multiline: true, openBlockWith:'<ul>\n', closeBlockWith:'\n</ul>' },
            {name: 'Список', className:'editor-ol', openWith:'    <li>', closeWith:'</li>', multiline: true, openBlockWith:'<ol>\n', closeBlockWith:'\n</ol>' },
            {separator:'---------------' },
            {name: 'Добавить изображение', className:'editor-image', replaceWith:'<img src="[!['+'Введите адрес изображения:'+':!:http://]!]" />' },
            {name: 'Добавить видео', className:'editor-video', replaceWith:'<video>[!['+'Введите адрес видео:'+':!:http://]!]</video>' },
            {name: 'Добавить ссылку', className:'editor-link', key:'L', openWith:'<a href="[!['+'Введите url адрес:'+':!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'Введите адрес ссылки...' },
            {separator:'---------------' },
            {name: 'Очистка от тегов', className:'editor-clean', replaceWith: function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } }
        ]
    }
}


Так же нужно подключить 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" />


Ну и наконец-то подключение самого markItUp к textarea.


<script type="text/javascript" >
   jQuery(document).ready(function() {
      jQuery("#markItUp").markItUp(mySettings());
   });
</script>
...
<textarea id="markItUp"></textarea>


На последок несколько ссылок:
  • Со всей документацией можно ознакомится тут
  • Примеры работы редактора здесь.

На сегодня все. Спасибо за внимание, и желаю всем успехов!
Андрей @Defari
карма
16,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (35)

  • 0
    а text-align он не умеет?
    • 0
      Думаю, что умеет. В этом случае, скорее всего, нужно подправить css файл.
    • 0
      Полагаю, что достаточно в markupSet добавить ещё кнопок в таком роде:

      {
         name:      'Выровнять направо',
         className: 'editor-align-right',
         openWith:  '<div style="text-align: right;">',
         closeWith: '</div>'
      }
      
      • 0
        Понятно, что можно добавить совершенно любой тег с любыми свойствами. Но если я захочу исправить выравнивание по правому краю, на выравнивание по левому, он догадается убрать старый див и нарисовать новый? А еще блоки текста с разными стилями могут быть вложены друг в друга самыми разнообразными вариантами.
        • 0
          Полагаю, что творческое употребление функции replaceWith: function(m) { … } (с применением регулярных выражений к полю m.selectionOuter или m.selection внутри неё) вполне способно справиться с задачею изменения выравнивания по правому краю на выравнивание по левому, если соответствующий блок является внешним по отношению к остаткам выделенного текста.

          Если же блоки текста с разными стилями вложены друг в друга куда более разнообразными вариантами, то задача изменения направления выравнивания вряд ли автоматизируется до уровня «достаточно кнопку на панели инструментов нажать» (уверен, что Вы и сами всецело отдаёте себе отчёт в этом), а вместо того потребует от пользователя снисхождения к неотступной необходимости руками выделять каждый из таких блоков прежде, чем кнопку нажать.
          • 0
            творческое употребление всяких JavaScript примочек позволяет обойтись и вовсе без MarktUp!, и сделать всё самому — а вопрос, насколько я понял, в том, позволяет ли MarktUp! обойтись для подобной задачи без творческого употребления чего бы то ни было?..
  • +3
    Статья все еще в Песочнице. Она точно ваша?
    • +2
      Да, это моя первая статья на Хабре. За нее мне не дали приглашение. Я немного подправил статью, и опубликовал снова.
      • 0
        Ну что ж, если вы пропихнули в песочницу две статьи (эту и про Блогосферу), значит, на Хабре прибыло :)
        • 0
          Собственно, я бы эту статью опять бы не опубликовал, но в песочнице ей хабрапарсер не много перебил внешний вид.
  • 0
    Мне тоже понравился этот редактор. Легко добавлять новые кнопки и теги. Сейчас как раз применяю его в одном из проектов.
  • 0
    а как на счёт прикрутки файл менеджера к нему?
  • +5
    Ну пипец, было же
    habrahabr.ru/blogs/webdev/22459/
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Как насчет TeX?
  • 0
    Эх, кто б подсказал WYSIWYG редактор с возможностью добавления своих сложных тегов для BBCode…
    • 0
      а этот разве не умеет?
      • 0
        а, этот не WYSIWYG…
      • 0
        Как же он TynyMCE заменять может???
        • 0
          Ни в TinyMCE, ни в CKEditor просто добавить новые сложные теги не выйдет, увы… Перемудрили они там с конвертацией туда-сюда, ИМХО…
  • +1
    В статье не много не хватает пробелов после «не».
    • 0
      Это — прогрессирующая тенденция, которая косвенно формирует соответствующее отношение к авторам.
      Немного не хватает культуры письменной речи (17-ый раздел).
  • 0
    Ваш список «некоторых проблем» с TinyMCE почему-то содержит ровно одну проблему — так и должно быть?
    • 0
      Это просто мой выход из положения. Это решение оказалось оптимальным для моей ситуации.
  • 0
    Сама проблема тоже покрыта туманом:
    Как оказалось, при процессе допиливания доработки редактора, нужно использовать редактор без сжатия.

    Вам удобней править сжатый код, чем код. отформатированный для людей?
    • 0
      Ему неудобно обновлять правленый и сжатый самостоятельно код при получении нового сжатого от авторов… Почему-то каждый раз сжимать самому, обновляя по несжатому, всё же менее удобно, чем не править авторский код вовсе. %)
  • 0
    TinyMCE — действительно редактор текста (с форматированием) с возможностью просмотра кода.

    А в этом редакторе я в примерах подобной функциональности не увидел (не туда смотрел?)
    Ах, да, preview у них в отдельном фрейме… Ужас какой…
    • 0
      MarkItUp нельзя сравнивать с WYSIWYG редакторами. Это не допустимо!

      Статья очень наивна, написана не достаточно опытным человеком. «чудесный JavaScript фреймворк jQuery». Ну это просто неплохой фреймверк. Обоснуйте его чудесность…
      • 0
        Полностью с Вами согласен. Опыт это вопрос времени и стремления. А с jQuery — чем дальше, тем легче. С другими фреймворками я дела не имел (пока еще), «чудесный», — просто синоним слова «отличный». В чем я за свой не большой опыт уже убедился не первый раз.
  • 0
    без подсветки синтаксиса? нафиг-нафиг.
  • 0
    мне бы хотелось увидеть редактор, использующий минимум кода.
    работающий через jQuery(ибо он уже и так используется на сайте).
    например, как тут 10k.aneventapart.com/1/Uploads/303/
    чтобы не дергать кучу скриптов для редактора, его панелей, его кнопок итд итп…
    хочется минималистичный и легковесный.
    единственный с натяжкой — Nicedit но он не jQuery = больше кода.
  • 0
    А как же Imperavi? Два файла, минимум кода, легко добавить новые теги и перевести код. Допилил под себя и использую в проектах.
    • 0
      он же вроде платный, разве нет?
  • 0
    А не подскажете, в нем можно сделать так же, как в СEditor: подключить свой css файл, чтоб в превью он показывал мои стили?
    • 0
      нашел:
      в файле
      \markitup\markitup\templates\preview.html
      

      вместо предложенного css подключить свой

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.