Пользователь
0,1
рейтинг
16 апреля 2013 в 18:10

Разработка → Bootstrap-wysiwyg: крошечный текстовый редактор




Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб в минифицированном и сжатом виде и чуть больше 6 Кб исходного кода, базовые функции редактирования на основе execCommand, drag-and-drop для вставки изображений, поддержка стандартных горячих клавиш и ничего лишнего. Редактор работает в современных браузерах (Chrome 26, Firefox 19, Safari 6) и на мобильных платформах (IOS 6 iPad/iPhone, Android 4.1.1 Chrome). Зависимости — jQuery, jQuery HotKeys и Bootstrap.

Текст редактируется в div с атрибутом contenteditable, без создания iframe и textarea. У него нет стандартного тулбара и стилей — их можно создавать средствами Bootstrap. Команды редактирования привязываются к кнопкам с помощью атрибута data-edit. Вот пример фрагмента тулбара, управляющего начертанием текста:

<div class="btn-group">
        <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
        <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
        <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
        <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
</div>

Клавиатурные сокращения можно задавать через объект hotKeys:

$('#editor').wysiwyg({
        hotKeys: {
                'ctrl+b meta+b': 'bold',
                'ctrl+i meta+i': 'italic',
                'ctrl+u meta+u': 'underline',
                'ctrl+z meta+z': 'undo',
                'ctrl+y meta+y meta+shift+z': 'redo'
        }
});

Собственно, это почти всё. Ещё несколько нюансов работы с редактором описаны на демо-страничке с инструкцией и в репозитории проекта.

Этот редактор возник в ходе работы над проектом MindMup — веб-приложением для создания ассоциативных карт. Разработчикам был нужен простой редактор контента, но существующие варианты их не устраивали — они тянули за собой кучу кода для поддержки старых браузеров и встроенные тулбары, неудобные схемы работы через фреймы и скрытые текстовые поля, плохо работали на мобильных устройствах с тач-интерфейсом и конфликтовали с Bootstrap. Используя возможности HTML5, jQuery и Bootstrap, удалось уместить необходимый минимум функционала менее чем в двести строк кода.

После публикации кода на Гитхабе оказалось, что именно такого современного и лёгкого редактора всем очень недоставало — за две недели набралось почти две тысячи подписчиков.

Редактор распространяется под лицензией MIT.

Илья Сименко @ilya42
карма
524,7
рейтинг 0,1
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • +5
    Количество доступных шрифтов можно уменьшить, а вот количество font size'а — добавить.
    Чуть более расширенные настройки создания линка (не только линк, а и rel, title).
    Возможность заресайзить картинку.

    И будет самое оно)
    • +14
      Лучше добавить не варианты font size, а теги: h1, h2, h3, p…
      • 0
        Тоже подумал про h# тэги.
    • +5
      Пригодился бы просмотр в html варианте,
      плюс кнопку картинки с урлом,
      плюс добавить возможность выравнивания текста относительно картинки
      и хотя-бы тег alt="".
      Ресайз картинки вполне успешно умеет firefox (поэтому считаю не критично).
      Еще как вариант файловый менеджер тоже не помешал бы.

      В остальном вполне приличный редактор.
      Приятно что есть аплоад картинок. Дизайн приятный. Приятно потрогать :)
  • +4
    А есть нечто подобное, но для markdown?
    • +5
      Я вот что недавно нашёл, но ещё пока не ковырялся. Самый смак в том, что результат форматирования виден сразу в том же месте, где пишешь, а не в отдельном окошке. Видна одновременно и разметка и WYSIWYG.
      • 0
        Если бы оно встраивалось на сайт, было бы здорово)
  • 0
    Есть же простой redactor, чем не устроил? imperavi.com/redactor/
    • +20
      Может быт тем, что он платный?
      • +1
        github.com/dybskiy/redactor-js

        «Starting with version 7.6.2 redactor-js is licensed under Creative Commons Attribution-NonCommercial 3.0 license
        For commercial use please buy license here: redactorjs.com/download/ or use earlier version».
        • +2
          На всякий случай отмечу, что по лицензии CC-BY-NC некоммерческое использование разрешается бесплатно с указанием авторства.
        • 0
          Пробовал использовать старые версии, однако обнаружились минусы такого решения: во-первых, версии Redactor с MIT/GPL-лицензией достаточно трудно сразу же найти (хотя всё же возможно); во-вторых, для повседневного использования их надо дорабатывать, мелких багов хватает.
    • 0
      Буквально месяц назад выбрал его, из того что было он был больше всех по душе (мне нужен был вообще достаточно простой редактор, все эти функции аля microsoft office не знаю даже для кого), теперь гляну и на этот, тем более что жизнь без bootstrap'а уже не представляю)
    • 0
      Осенью работал с ним. Пришлось писать свои расширения для нормального автосейва (и то не все ситуации удалось отловить через api), почему-то авторы вместо нормального колбэка решили сами сабмитить текст куда-то. Код библиотеки неряшлив, но это эстетическая сторона. Cкверная поддержка редактором IE (8 и 9), много мелких глюков со сложной версткой в разных браузерах, некоторые из них сильно напрягают клиентов. Глюки с undo.
    • 0
      Пробовал. На первый взгляд даже понравился, но первая же неделя использования на боевом сайте показала негодность редактора — например, иногда из него куда-то бесследно пропадала часть редактируемого текста. Пришлось отказаться.
  • +9
    А результирующий HTML позырить как?
    • 0
      Это же contenteditable.
      Через $("#editor").html() можно вытащить html.
      • 0
        Я имел в виду, что почти все wysiwyg-редакторы предоставляют возможность писать еще и на голом HTML по желанию.
  • 0
    Скажите этот редактор поддерживает drag-изменение размеров рисунка в google chrome?
    • 0
      Вижу что нет. А можете добавить какой-то обработчик ресайза. чтобы в Хроме работал?
      • +8
        И так потихоньку простой wysiwyg редактор, начнет перерастать в непростой.
        • 0
          Если добавить эту функцию то он из простого перерастет в «уникальный» т.к. в tinymce такой функции — НЕТ (хорошо допустим что недоискал и если она есть то покажите)
          • 0
            Эту функцию не редактор, а браузер предоставляет. Потому ни у кого ее и нет. Ее же реализовывать надо вручную.
            • 0
              Вот об этом я и говорю. Есть же компонент который делает crop на рисунке.
              Также можно сделать и ресайз
          • +1
            Недавно реализовывал для ckeditor, если нужно — пишите в личку.
            • +1
              Идеальный вариант — выставить на github
              • +1
                Спрошу у заказчика, приемлемо ли это. Кстати, сейчас посмотрел, в tinymce, похоже, уже тоже реализовали, взгляните на их демо.
                • 0
                  Да, вижу. Спасибо. Но всетаки предложение по github остается в силе
            • 0
              А вот кстати там уже второй год тема висит в багтрекере — dev.ckeditor.com/ticket/6668.
  • +4
    Задумка хорошая, шустренько работает, только как насчет использовать и типографию bootstrap?
    <div class="text-right" вместо <div align="right"
    
    <small> вместо <font size="1">
    

    Получился бы bootstrap-редактор для bootstrap :)

    p.s. и bold страдает, font-weght унаследовал от .hero-unit
  • +4
    А для Оперы он не работает?
  • +4
    В Opera не работают операции с выделенным текстом.
  • –2
    > Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб
    и из соседней темы: Самый скоростной домашний Интернет — в Японии (2Гбит/сек)
    Как говориться, почувствуйте разницу :)
    • +4
      А мобильный 3г у вас везде ловит?

      А вообще руки бы поотрывать людям, которые считают, что экономить на весе страниц (тактах процессора, мегабайтах оперативы) не нужно.
      • +3
        Видимо меня не так поняли, я просто задумался о том разрыве в современных технологиях, которое сейчас существует. Где-то приходиться писать компактный код и я разумеется понимаю важность этого, а где-то уже жируют так, что 2 Гбит/с уже дома!
        • 0
          Не всегда, но часто, компактный JS = быстрый JS
          Обычно из-за сокращения количества функционала и уровня абстракции до минимума.
  • 0
    Неплохо. Из замеченных недостатков:

    • На iOS приходится тыкать по кнопкам дважды (нужно обрабатывать тач события, самое простое on «click touchstart»)
    • При клике на link хотелось бы иметь возможность редактировать существующую ссылку, если на ней стоит выделение
  • 0
    Работает только с Bootstrap, так что для многих толку от него не много.

    Вообще беда с этими wysiwyg-редакторами. Сколько искал, нигде не смог найти подходящего (красивого, с хорошим api, бесплатного) редактора.
    • 0
      Кажется нашёл такой: wysihtml5. Глюков не замечено, внешний вид полностью настраивается, никаких зависимостей не тащит, лицензия MIT.
  • 0
    Обнаружен подобный редактор, но попроще: bootstrap-wysihtml5.
    • 0
      Я бы категорически не рекомендовал, в коде структурная помойка. Наиболее неудобный для модификации и исправления дефектов редактор из тех, что мне попадались, я бы даже назвал это анти-API. Впрочем, если планируется использовать из коробки, то все равно.
  • +7
    Извините… но все редакторы привязанные к… Microsoft® Internet Explorer's designMode feature… это откровенное говно.

    Да, он красивый снаружи… и все. На этом плюсы заканчиваются. HTML код который получается в конце — будет разный в разных браузерах. SEO? Хрен там… Mozilla вставляет b, IE вставляет strong… какая нибудь опера вообще вставит туда span style=«font-weight:bold»
    • 0
      Редактор от Имперави тоже сначала был именно таким.
    • 0
      Я «причёсывал» на стороне сервера. Ага, регулярки, они самые :(
  • 0
    это всего 1.5 Кб

    Зависимости — jQuery, jQuery HotKeys и Bootstrap.

    А это только мне кажется бредовой вся эта современная вакханалия с «зависимостями»? В чем глубинный смысл оптимизации до 1.5кб, если человек зашедший на страничку все равно будет скачивать полмегабайта включаемых скриптов? :)
    • 0
      В том, что jQuery и Bootstrap сейчас использует каждый второй, если не первый сайт, и в кэшах и CDN всех уровней они почти наверняка есть.
      • +1
        По-моему не очень так довод с учетом что кеш непредсказуем, а библиотеки часто обновляются…
        • 0
          Каждый раз одно и то же :(

          Ну, да, CDN тоже могут упасть и некоторое время не раздавать. На практике они поднимаются намного быстрее, чем мои же сервера. Админы CDN работают оперативнее или реализовано авто-восстановление.

          А насчёт версий:
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
          

          Версия зафиксирована. Проблем пока не вижу.
  • 0
    В firefox кнопка вставки изображений не работает :(
  • +1
    В Опере 12.15 под Linux Mint 14 x86 вот такие символы вместо иконок

    Шрифта стоят стандартные + установлены tff-mscorefonts
    • 0
      Похоже, шрифт с иконками не подгрузился.
      fortawesome.github.io/Font-Awesome/ — Здесь иконки видно?
      • 0
        Нет. Такие же непонятные закорючки. Видимо рано ещё использовать кастомные шрифты.
        • +3
          Скорее всего, перед Вами известный глюк Оперы.

          Видимо, рано ещё использовать Оперу; подождите перехода её на движок Chromium и затем далее на Blink.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Если бы это был мой редактор, то с чего бы мне о себе писать в третьем лице? Кроме того, топик был бы в хабе «Я пиарюсь».
  • 0
    Реквестирую bbcode вариант!
    • +3
      • 0
        Знаем, пользуемся, но полумертвая поддержка и глючность, временами зашкаливают, увы.
  • 0
    А как вставить ссылку, что текст был не сам URL ссылки?
  • 0
    Все хорошо, но с textarea не работает :)
    • 0
      Несложная конструкция «над»

      <textarea id="txt">&lt;div class=&quot;hero-unit&quot;&gt;&lt;h1&gt;&lt;a href=&quot;http://mindmup.github.io/bootstrap-wysiwyg/&quot;&gt;bootstrap-wysiwyg&lt;/a&gt;&lt;br&gt;&lt;small&gt;tiny wysiwyg rich text editor for Bootstrap&lt;/small&gt;&lt;/h1&gt;&lt;/div&gt;</textarea>
      
      
      <div id="editor"></div>
      


      $(function(){
         // связать поле ввода с редактором
         $('#editor').html($('#txt').val()).wysiwyg(); // перегнать HTML код в редактор
         $('#editor').bind('keyup',function(){ $('#txt').val($('#editor').html())}); // забрать HTML код из редактора
      
         // плюшка - редактирование в textarea и просмотр в HTML
         // $('#txt').bind('keyup', function(){ $('#editor').html($('#txt').val()); }) // обновлять значение в поле, если поменяли в редакторе
         // ИЛИ
         $('#txt').hide(); // чтоб не поле мешалось
      });
      
  • 0
    Круто! Красота-красотой, но название и текущий размер шрифта нужно показывать (желательно сделать выбор цвета шрифта/фона). И добавить ссылки для загрузки видео, файлов и яндекс/гугл карт. И опциональную кнопочку редактирования исходного кода. И редактор таблиц, конечно. Это тот минимум без которого его нельзя серьезно использовать в админках организаций (все хотят табличку с ценами, цветной заголовок, выложить презентацию в pdf и яндекс-карту со схемой проезда) и блогохостингах (как же без видео), а для комментариев чересчур много наворотов и нет возможности цитирования.

    Пока, к сожалению, ни туда и не сюда, и размер тут не имеет значения…
  • 0
    P.S. У отмены/восстановления другие иконки: glyphicons.com/ (внизу), www.actualtools.com/images/newsletters/61-3-undo-redo-menu-commands.gif и ссылки должны автоматически подчеркиваться.

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