Editor.js прекрасный редактор сохраняющий исходный код в JSON формате

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

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



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



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

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



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

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 29

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

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

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

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

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

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


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

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

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

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

                    Но, как говорится, на вкус и цвет все фломастеры разные… лично мне ближе markdown, другим подойдет json формат :)
                      –11
                      PostgreSQL имеет тип для json, а как мне хранить markdown? Просто как текст? Нет, спасибо.
                        +4

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

                          –1
                          Конечно! Я работаю с данным из поля без дополнительных преобразований.
                            0
                            Уточню: много ли преимуществ, не опирающихся на то, что Ваш редактор использует json? Или ещё точнее: что Вы такого делаете с текстами статей вне редактора, что json Вам в этом помогает?
                              +2
                              Когда в мобильном приложении рендерю данные я должен по строчно понимать, что это за формат и какой там текст внутри. Типа:

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


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


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

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

                0
                Я его использую на Mac Os, он хороший но там же нету API. Или уже добавили?
                0
                Уже довольно давно есть компромиссный вариант с плагинами: madebymany.github.io/sir-trevor-js
                +3
                как на маркдауне написать статью в которой будут слайдеры с фотками и с возможностью показывать эти слайдеры с разными «темами», так еще и чтобы никому не пришлось учить макрдаун, ведь у всех вокруг «лапки»?
                  0

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

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

                    {
                      type: "gallery",
                      data: {
                        theme: "default",
                        title: "Галерея с котиками",
                        images: [
                          {
                            description: ...,
                            url: ..., 
                            alt: ...,
                            position: 0
                          }
                        ],
                        level: 3
                      }
                    }
                    
                      0
                      То есть, не нужно учить markdown, а нужно учить JSON?
                        +2
                        Смысл визуальных редакторов в том, что тебе не нужно ничего учить, а надо тыкать в кнопочки и картинки.
                +1
                Все блочные редакторы на contenteditable, которые мне удалось нагуглить (включая и Editor.js), страдают от одной и той же проблемы: выделение текста ограничено одним блоком. То есть, если вы нажмете левую кнопку мыши в середине одного параграфа и переместите указатель мыши на середину следующего параграфа, чтобы выделить несколько предложений, то выделение текста остановится на конце первого параграфа. Да, в Editor.js есть еще и «прямоугольный» режим, который позволяет вам выбрать все блоки, попадающие в указанную мышью прямоугольную область, но во-первых, это не совсем типичное поведение для текстового редактора (пресловутый контент-менеджер, привыкший работать в Microsoft Word, может и не догадаться, что так можно), а во-вторых, выделяется либо сразу весь блок, либо ничего — часть блока таким образом не выделить. Ну и плюс с клавиатуры такое не сделать, только мышью.

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

                      Не совсем понял, как это могло бы помочь. Или вы предлагаете переключиться в режим просмотра, выделить текст, переключиться обратно, и чтобы выделение сохранилось? Мне кажется, так сделать не получится, потому что смежные параграфы реализованы отдельными 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, а затем копировать результат в онлайн-редактор.

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

                    Only users with full accounts can post comments. Log in, please.