Пользователь
0,0
рейтинг
5 апреля 2012 в 11:48

Разработка → Сборка: markitUp, fancybox, elFinder — отличная замена WYSIWYG редакторов из песочницы

Я давно занимаюсь написанием систем управления контентом для сайтов и всегда в них использовал визуальные редакторы. В виду того, что я часто не только пишу cms, но и осуществляю дальнейшую их поддержку, мне надоело, что юзеры регулярно норовят намудрить с html-кодом (о копипасте из ворда я вообще молчу). И с этого года я стал вместо визивиг-редакторов вставлять markitUp с поддержкой markdown.

И действительно, проще за 3-4 часа объяснить основы html разметки, чем отучить пользователя копипастить из ворда. Все замечательно в markitup, но не хватает возможности загружать файлы на сервер и вставлять ссылки на них.

Сегодня решил посвятить время симбиозу замечательных jquery плагинов: markitUp, fancybox, elFinder. Результатом своего труда решил поделиться.

Понадобятся: fancybox, markitUp, elFinder. Так же могут пригодится jquery и jquery ui, хотя я гружу их из CDN.
Пример html кода страницы с редактором.
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
</head>
<body>
    <form>
        <textarea id="post-content"></textarea>
        <button>Сохранить</button>
    </form>
    <div id="markitup-elfinder"></div>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="js/markitup/skins/simple/style.css"/>
    <link rel="stylesheet" type="text/css" href="js/markitup/sets/markdown/style.css"/>
    <link rel="stylesheet" type="text/css" href="js/elfinder/css/elfinder.min.css"/>
    <link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css"/>
    <script src="http://www.google.com/jsapi"></script>
    <script>google.load("jquery", "1");</script>
    <script>google.load("jqueryui", "1");</script>
    <script src="js/markitup/jquery.markitup.js"></script>
    <script src="js/markitup/sets/markdown/set.js"></script>
    <script src="js/elfinder/js/elfinder.min.js"></script>
    <script src="js/elfinder/js/i18n/elfinder.ru.js"></script>
    <script src="js/fancybox/jquery.fancybox.pack.js"></script>
    <script src="js/script.js"></script>
</body>
</html>


И содержимое файла script.js:
function markitupElfinder(){
    $('#markitup-elfinder').elfinder({
        lang: 'ru',
        url : '/admin/dash/fm/', //тут естественно подставить свой урл к бекенду файломенеджера
        getFileCallback:function(file){
            $.markItUp({ replaceWith:'![]('+file.url+' "[![Описание:]!]")'});
            $.fancybox.close();
        }
    }).elfinder('instance');
    $.fancybox({
        content: $('#markitup-elfinder')
    });
}

$(document).ready(function(){
    $("#post-content").markItUp(mySettings);
});


В файле js/markitup/sets/markdown/set.js найти строку типа {name:'Picture', key:'P', replaceWith:'![[![Alternative text]!]]([![Url:!:http://]!] "[![Title]!]")'} и заменить ее на {name:'Picture', key:'P', call: 'markitupElfinder'}.
Поиск и замена в set.js не самый элегантный подход к редактированию конфига markitUp-а, но для примера сойдет.


Ну и несколько фоток, что у меня вышло:
Сам редактор
image

Окно файломенеджера:
image

При вставке появляется попап с запросом свойства title для тега img:
image

Результат работы:
image

Рабочий пример в архиве
Живой пример (спасибо KarNed)
Владимир @de1vin
карма
9,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • 0
    А можно рабочее демо?
    • +1
      Я до конца недели без сервера.
      Могу сегодня сделать демку и выложить только в виде архива.
      • 0
        выкладывайте куда-нибудь архив, а я размещу у себя на сервере :)
        • 0
          Выложил архив. Ссылка на пример в конце статьи
          • +1
            демка aboutwww.ru/m-el/
            • 0
              у меня в демке станадартный textarea и кнопка Сохранить. Видимо скрипты не применились.
              • 0
                Вы как верстальщик, могли бы более информативно описать проблему.
                Какой браузер? Есть ли информация об ошибках js в «инструментах разработчика»?
                • 0
                  локально разворачивается на ура, в ИЕ рабоатет и ваша демка, а в ФФ ошщибка:
                  $("#post-content").markItUp is not a function

                  $("#post-content").markItUp(mySettings);

                  script.js (line 16)
                  • 0
                    FF 11.0 всё работает.
                    $("#post-content").markItUp is not a function
                    

                    Видимо не загрузились скрипты с markItUp
                    • 0
                      моя ошибка — некорректно составленный фильтр адблока.
  • 0
    Ну не знаю… мне проще всё же обучить пользоваться кнопкой в ckeditor, куда можно вставлять текст из ворда. elFinder+ckeditor вполне себе уживаются
  • +1
    Я за вариант ckeditor (tinymce) с убранными панелями разукрашивания текста + свои регэкспы в фильтрах очистки текста + плагин типографа от Лебедева, например, для полной красоты.
    Редакторы вполне адекватно чистят текст от мусора из MS Word после соответствующей настройки.
    Пользователя нужно учить адекватно верстать текст в Word, а уж на сайт нормально сверстанный импортировать нет особых проблем.
    • 0
      У вас текст типографится перед сохранением или при выводе?
      Я отказался от типографа перед сохранением. У меня код сначала проходит фильтрацию, а за тем типографится
      • 0
        Сначала фильтры, затем типограф. Результат сохраняем для вывода на сайт.
  • 0
    Оно умеет рандерить preview не ajax-запросом? Т. е. можно ли подсунуть ему showdown/pagedown?
    • 0
      Вы о ренедеренги markdown в html? Мне не встречался маркдаун процессор на яваскрипте.
      Если найдется такой — сделать рендеринг не составит труда.
      Да и с маркдауном — это пример того, что я использую.
      Ни что не мешает использовать markitup как html или textile редактор. Главное — перед отображением пропускать через фильтр.
    • 0
      О, я не был знаком с showdown/pagedown — спасибо за наводку
      Да, подсунуть можно :)
      Можно точно так же написать callback функцию как я сделал для файломенеджера.
      • 0
        Понятно. Спасибо, попробую)
  • 0
    Спасибо, тоже считаю что markdown намного удобней чем wysiwyg.
  • +2
    Вы путаете теплое с мягким. WYSIWYG нужен для того, чтобы получать то, что видишь. А языки/способы разметки этого не дают.
    Ваш посыл понятен, но тогда называйте вещи своими именами. Например: Сборка: markitUp, fancybox, elFinder — отличное markdown решение.
    • 0
      Не могу не согласиться. Хотя markitUp — это не только макрдаун.
      В последнее время придерживаюсь мнения, что WYSIWYG в 99% случаев — бесполезная фишка. Потому что в для редактирования более-менее сложных страниц он не дает полного представления о том, как будет выглядеть контент.
      Из альтернативных способов разметки маркдаун считаю наиболее наглядным.
      В любом случае последнее слово остается за заказчиком.

      А заголовок выбрал таким только основываясь на своем опыте отказа от визуальных редакторов в пользу markitUp.
  • 0
    .elfinder('instance'); не обязательно, если вам не нужно получить инстанс elFinder
    • 0
      Да, вы правы. Я собирал из частей проекта, над которым сейчас работаю — не доглядел.

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