Введение
Всех приветствую!
Совсем недавно мне пришлось немного расширить функционал редактора одного проекта. Но как оказалось в моем случае я наткнулся на некие трудности. В этой статье я поделюсь с читателями как я вышел из сложившийся ситуации.
Как все было
В проекте, редактор которого следовало немного обновить, использовался как и в большинстве случаев всеми известный старожил TinyMCE. Лично я ничего против него не имею. Это отличный редактор который отлично справлялся и справляется сейчас со своими обязанностями на множестве сайтов. Я и сам использую его как основной в своих проектах. Но вернемся к теме топика, ибо речь не о нем пойдет далее.
Основная задача: мне нужно было не много доработать существующий редактор, а именно, добавить обрамление текста тегами, которых нет в текущем варианте редактора.
Конечно же, сначала мне пришла в голову идея просто доработать текущий редактор, то бишь TinyMCE. Не много почитав документацию, я понял что в общем-то и ничего сложного в этом нет. Но и были сущевственные минусы в способах, которые описаны в сети.
И вот некоторые из них:
Как оказалось, при процессе
У меня сразу появились мысли по этому поводу. В случае выбора варианта описанного выше, как минимум появилась бы проблема при возможных будущих обновлениях редактора.
Решение
По этому я решил пойти не много другим путем. Поскольку на сайте использовался чудесный JavaScript фреймворк jQuery, я подумал, — «А почему бы не найти какой либо другой редактор?».
Не много поискав, я нашел редактор, который называется markItUp!.
Первое на что я обращал внимание при выборе нового редактора:
- Легкость и гибкость его настройки.
- Минимум проблем с кроссбраузерностью.
Познакомившись по ближе с markItUp!, я обнаружил что этот редактор довольно таки гибкий, не смотря на его легкость. Ко всему этому он еще и поддерживает разные режимы работы с текстом.
Вот основные вкусности, которые Вас могут заинтересовать:
- Быстрая и легкая интеграция;
- Поддержка горячих клавиш;
- Предварительный просмотр с помощью Ajax;
- Легко настраиваемые скины.
Так же стоит обратить внимание на то, что редактор позволяет работать с разными наборами тегов:
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>
На последок несколько ссылок:
На сегодня все. Спасибо за внимание, и желаю всем успехов!