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>

На последок несколько ссылок:

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

На сегодня все. Спасибо за внимание, и желаю всем успехов!