03.04.2019 07:55
kal1sha 29 5000 Источник
CodeX крутые ребята, которые базируются в Университете ИТМО. На базе этого университета студенты и выпускники создают интересные и полезные проекты: Hawk.so, Capella, AR-tester и другие.

Один проект очень помог нашему бизнесу. Редактор Editor.js сохраняющий исходный код в JSON.



Главной преимущество редактора это хранение и представление данных в JSON формате. Особенно поймут те у кого есть и веб-версия продукта и мобильное приложение. Для написание статей контент менеджеры любят использовать WYSIWYG-редактор, но после этого получаем «спагетти»:



«Спагетти» просто убивали всю верстку и интегрировать их в мобильные приложения было просто болью. Приходилось отдельно писать статью под веб-версию и мобильное приложение. Это долго и тяжело поддерживать.

Компромиссом является формат JSON. Он простой, имеет строгую структуру и гибкий. В админ панель добавляем Editor.js редактор, пишем контент и сохраняем его как JSON. По API отправляем мобильному приложению JSON и оформляем уже дальше его как нужно, а на веб-версию JSON конвертируем в HTML через Editor.js. И всем счастье.



Ребята предоставляют API для создании своих плагинов. На сайте хорошая документация с примерами. Используйте!

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


  1. AlexanderAstafiev
    03.04.2019 11:31
    #19978222

    Markdown не понравился?


    1. kal1sha Автор
      03.04.2019 11:34
      #19978234

      Markdown хороший, но для разработчиков. Не охота было ему обучать и контент менеджеров. Хотели просто предоставить редактор и все. Чтобы они даже не знали что такое JSON или Markdown, но чтобы в базе хранилось в красивом виде.


      1. AlexanderAstafiev
        03.04.2019 11:39
        #19978266

        Извините, но самое сложное в markdown — помечать заголовки символами "#"… Разве обучить менеджера markdown сложнее, чем написать текстовый блочный редактор со встроенным html-конвертером?


        1. kal1sha Автор
          03.04.2019 11:42
          #19978280

          Подскажите где взять редактор markdown для django и чтобы можно было и писать туда свои плагины? Если подскажите мы подумаем и может перейдем.


          1. AlexanderAstafiev
            03.04.2019 11:45
            #19978302

            Ну, первое, что гуглится — какой-то Martor, его вполне должно хватить, судя по фичам. А какие Вы хотите плагины?


            1. kal1sha Автор
              03.04.2019 11:47
              #19978312

              У вас есть с ним опыт? Как туда плагины свои вставить?


              1. AlexanderAstafiev
                03.04.2019 11:53
                #19978354

                Опыта именно с этим редактором нет, насчет плагинов не знаю. Какие именно плагины вы хотите?


                Markdown — это же просто соглашение о том, как писать текст. По этим соглашениям можно описать в простом тексте форматирование (жирный, курсив), абзацы, заголовки, списки (нумерованные и ненумерованные), картинки, простые таблицы. Вам необходимо использовать еще что-то кроме этого?


                1. kal1sha Автор
                  03.04.2019 11:56
                  #19978376

                  Ну если вы не знаете за плагины, то зачем вы пишите людям как нужно делать?

                  Нам нужно интегрировать glvrd.ru как нам его впихнуть в ваш Martor?

                  А вот в Editor.js мы его интегрировали за 30 минут. Понимаете?


              1. xa3apg
                03.04.2019 14:56
                #19979430

                Поспешили вы с вопросом, а можно было уделить пару минут и посмотреть на исходники. Расширяется через extensions, которых с данным редактором идет 5 штук, вполне наглядный код. Да и подключаются в соответствующей секции в settings.py.

                Но, как говорится, на вкус и цвет все фломастеры разные… лично мне ближе markdown, другим подойдет json формат :)


                1. kal1sha Автор
                  03.04.2019 15:00
                  #19979458

                  PostgreSQL имеет тип для json, а как мне хранить markdown? Просто как текст? Нет, спасибо.


                  1. Cerberuser
                    04.04.2019 05:43
                    #19981720

                    И много преимуществ Вы получаете от того, что в базе текст статьи хранится как json, а не как текст?


                    1. kal1sha Автор
                      04.04.2019 07:19
                      #19981810

                      Конечно! Я работаю с данным из поля без дополнительных преобразований.


                      1. Cerberuser
                        04.04.2019 07:23
                        #19981812

                        Уточню: много ли преимуществ, не опирающихся на то, что Ваш редактор использует json? Или ещё точнее: что Вы такого делаете с текстами статей вне редактора, что json Вам в этом помогает?


                        1. kal1sha Автор
                          04.04.2019 07:29
                          #19981816

                          Когда в мобильном приложении рендерю данные я должен по строчно понимать, что это за формат и какой там текст внутри. Типа:

                                  {
            "type" : "header",
            "data" : {
                "text" : "Описание главной проблемы",
                "level" : 3
            }
        },


                          Или например список:
                               {
            "type" : "list",
            "data" : {
                "style" : "Формат данных:",
                "items" : [
                    "1.",
                    "2.",
                    "3."
                ]
            }
        },


                          React native получает объект и с ним работает, как мне получить такой объект в переменную в react native?


      1. KvanTTT
        03.04.2019 11:51
        #19978338

        Так есть WYSIWYG Markdown редакторы, в которых синтаксис знать не обязательно. Например, онлайновый StackEdit и оффлайновая https://typora.io/.


        1. kal1sha Автор
          03.04.2019 11:52
          #19978344

          Я его использую на Mac Os, он хороший но там же нету API. Или уже добавили?


      1. PaulMaly
        05.04.2019 10:54
        #19987088

        Уже довольно давно есть компромиссный вариант с плагинами: madebymany.github.io/sir-trevor-js


    1. Coffin
      03.04.2019 12:29
      #19978534

      как на маркдауне написать статью в которой будут слайдеры с фотками и с возможностью показывать эти слайдеры с разными «темами», так еще и чтобы никому не пришлось учить макрдаун, ведь у всех вокруг «лапки»?


      1. Cerberuser
        04.04.2019 05:44
        #19981722

        А как её написать в любом другом формате? По идее, вставить соответствующий блок, внешний по отношению к формату. Или где-то это есть "из коробки"?


        1. Coffin
          04.04.2019 08:05
          #19981862

          Описать в JSON нет проблем 

          {
  type: "gallery",
  data: {
    theme: "default",
    title: "Галерея с котиками",
    images: [
      {
        description: ...,
        url: ..., 
        alt: ...,
        position: 0
      }
    ],
    level: 3
  }
}


          1. Cerberuser
            04.04.2019 08:08
            #19981864

            То есть, не нужно учить markdown, а нужно учить JSON?


            1. Coffin
              04.04.2019 08:23
              #19981890

              Смысл визуальных редакторов в том, что тебе не нужно ничего учить, а надо тыкать в кнопочки и картинки.


  1. vers
    03.04.2019 21:20
    #19980940

    Все блочные редакторы на contenteditable, которые мне удалось нагуглить (включая и Editor.js), страдают от одной и той же проблемы: выделение текста ограничено одним блоком. То есть, если вы нажмете левую кнопку мыши в середине одного параграфа и переместите указатель мыши на середину следующего параграфа, чтобы выделить несколько предложений, то выделение текста остановится на конце первого параграфа. Да, в Editor.js есть еще и «прямоугольный» режим, который позволяет вам выбрать все блоки, попадающие в указанную мышью прямоугольную область, но во-первых, это не совсем типичное поведение для текстового редактора (пресловутый контент-менеджер, привыкший работать в Microsoft Word, может и не догадаться, что так можно), а во-вторых, выделяется либо сразу весь блок, либо ничего — часть блока таким образом не выделить. Ну и плюс с клавиатуры такое не сделать, только мышью.

    В некоторых ситуациях эта проблема несущественна, например, если вам нужно быстро набрать большое количество текста с минимальными правками. Но если вам приходится часто заниматься редактурой уже написанных текстов, перемещая одни куски текста и переписывая другие, то WYSIWYG Markdown-редакторы могут оказаться удобнее в использовании.


    1. kal1sha Автор
      03.04.2019 21:21
      #19980944

      хороший кейс!


    1. n1cebro
      04.04.2019 17:15
      #19984236

      Думаю что это не было бы проблемой если бы где-то рядом была кнопка переключения в режим просмотра и обратно в режим редактирования


      1. vers
        05.04.2019 04:37
        #19985940

        Не совсем понял, как это могло бы помочь. Или вы предлагаете переключиться в режим просмотра, выделить текст, переключиться обратно, и чтобы выделение сохранилось? Мне кажется, так сделать не получится, потому что смежные параграфы реализованы отдельными contenteditable-блоками. Представьте, что каждый параграф — это отдельный textarea, просто без рамок. Очевидно, что нельзя начать выделять текст в одном textarea и продолжить выделение в следующем.


        Вообще в стандартных контролах для редактирования текста (как в браузере, так и в десктопных приложениях) существует много "мелочей", которые, как мне кажется, большинством людей воспринимается как данность, доступная повсеместно из коробки или же легко реализуемая. Помню, как в самом начале моей карьеры тимлид поручил мне "набросать по-быстрому простой WYSIWYG-редактор" для десктопного приложения, которое мы разрабатывали. Все нужно было отрисовать на Windows GDI: рамку, курсор, скроллбар, выделение, ну и, конечно, отрендерить сам текст. К счастью, никаких картинок или таблиц. По оценке тимлида у него бы на это ушло два дня, но поскольку я был тогда джуниор, то мне он щедро выделил аж целых четыре дня. У меня на все это ушло три недели с дикими овертаймами. (К концу разработки мне уже в буквальном смысле снились кошмары про то, что я забыл учесть кернинг при расчете ширины текста.) Еще через неделю, после того, как это ушло в продакшн, пользователи прислали нам несколько десятков багрепортов вида: «А что это я тут нажимаю Shift+Ctrl+End (выделить от курсора до конца текста), а оно не работает?» Еще через две недели, потраченные на то, чтобы попытаться все это реализовать, тимлид плюнул и решил заменить наш контрол на стандартный RichTextBox. Пусть он корявый и ущербный (например, выравнивание текста по ширине, которое так хотел тимлид, в нем не поддерживается), но зато все "мелочи" в нем, в отличие от нашего велосипеда, реализованы на 100%.


        В вебе ситуация еще более плачевная, поскольку к итак уже непростой задаче добавляются еще и ограничения браузера (если, конечно, вы не на канвасе все вручную рисуете — но тогда вам остается только посочувствовать). Есть прекрасный блог Content Uneditable от разработчиков CKEditor и вводная статья ContentEditable?—?The Good, the Bad and the Ugly, которая наглядно показывает масштаб проблемы, с которой сталкиваются начинающие разработчики, которые решили разработать свой онлайн-редактор и еще не подозревают, сколько "мелочей" им придется реализовать самостоятельно. Проиллюстрирую на примере Editor.js. Возьмем несколько абзацев текста, кликнем в середину первого абзаца и несколько раз нажмем кнопку "вниз" на клавиатуре. Сначала посмотрим, как это работает в "обычных" текстовых редакторах (Microsoft Word в качестве примера):


        Word


        Обратите внимание, как Word старается, по возможности, точно сохранить горизонтальную позицию курсора при переходе между строками и абзацами.


        Теперь тот же самый эксперимент на главной странице Editor.js:


        Editor.js


        Можно заметить, что при переходе между смежными абзацами позиция курсора теряется. (Плюс еще в конце каждого абзаца курсор сначала прыгает в конец строки перед переходом к следующему абзацу — ожидаемое поведение, если вспомнить, что каждый абзац ведет себя как отдельная textarea.) Можно возразить, что это мелочи — подумаешь, придется лишний раз кликнуть мышью — но из таких мелочей и складывается тот самый "user experience". Представьте себе контент-менеджера, годами пользовавшегося редакторами, которые ведут себя подобно Microsoft Word. У него все эти "мелочи" уже чуть ли ни на уровне мышечной памяти, поэтому процесс привыкания к поведению нового редактора у него будет выглядеть как-то так: нажал что-то на автомате -> получил неожиданный результат -> удивился -> вспомнил, что тут все не так -> в очередной раз проклял разработчиков -> исправил и продолжил работу до возникновения следующей проблемы. В результате он либо все-таки переучится, ценой потраченных нервов, либо плюнет на все и будет набирать текст в Word, а затем копировать результат в онлайн-редактор.


        1. n1cebro
          05.04.2019 10:25
          #19986872

          Вижу как эта тема болит у вас :) Я сам сталкивался с редакторами и даже пробовал написать свой по молодости но быстро понял насколько это не подьемная задача. Моя идея была в том, что бы дать пользователю возможность выделить текст независимо от редактируемых блоков, тоесть переключить в режим просмотра без блоков. Не уверен можно ли будет реализовать удаление в этом режиме, но как минимум можно будет скопировать часть текста.


  1. Raimon
    04.04.2019 02:37
    #19981578

    очень похоже draft.js… чем они отличаются?


    1. kal1sha Автор
      04.04.2019 07:16
      #19981806

      да, очень