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

Defari 13 сентября 2011 в 16:27 16,1k

Введение


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

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

Как все было


В проекте, редактор которого следовало немного обновить, использовался как и в большинстве случаев всеми известный старожил 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>


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

На сегодня все. Спасибо за внимание, и желаю всем успехов!
Проголосовать:
+28
Сохранить: