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>
    


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

    На сегодня все. Спасибо за внимание, и желаю всем успехов!
    Метки:
    Поделиться публикацией
    Похожие публикации
    Комментарии 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 подключить свой

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