Редактор Editorjs

Приглашаю протестировать и обсудить поле Editorjs. Поле аналогично полю HTML, является дочерним от него, умеет все то же самое, только в нем принудительно используется только один редактор Editorjs. Официальный сайт редактора editorjs.io 

Внешний вид при просмотре

Внешний вид при редактировании

Настройки поля

ВНИМАНИЕ! Использовать только в новых типах контента. Используемая с полем библиотека преобразования блоков в верстку не умеет преобразовывать произвольный html код в блоки. Поэтому, если вы смените тип поля с html на editorjs с уже имеющимся контентом, при редактировании в редакторе вы увидите пустой экран.
По этой же причине редактор поставляется отдельным полем, а не редактором. Так как редакторы движка не могут повлиять на вывод поля при просмотре. А блоки Editorjs надо сперва обработать, «превратив» в верстку, которую потом можно отдать типографу на очистку.

В данный момент доступны только 5 типа блоков: встроенные параграфы, заголовок, изображение, список и разделитель. Поддерживается вставка объектов (ютуб, вимео, картинки и др.) через ссылку. 

Тестировалось на 2.16.2
Будет ли работать на более старой версии или default шаблоне не знаю.
Вы всегда сможете в дальнейшем отказаться от использования этого поля, сменив его на html. Все тексты сохранятся.

Сообщения о найденных недочетах и багах приветствуются. Предложения по развитию обсуждаются только при условии финансирования...

Поле не появилось бы без финансовой поддержки от CEH9I

очень крутой редактор. помню, я когда-то кого-то мучил чтоб его адаптировать под инсту )

спасибо!

Я правильно понял. что из уже имеющегося поля html в этот формат не преобразуется. Но если поставить этот редактор у поля, а потом перейти на другой редактор, то все будет ОК?

Предложения по развитию обсуждаются только при условии финансирования...

а что еще можно в него встроить, так как доп финансирование можно рассмотреть, если конечно редактор имеет возможность обрабатывать большее количество типов сущностей, чем перечисленные 5:)

Вот это подарок. Спасибо.

Надо будет перевести на Инглаш. 

Да, а зачем там «Поиск»?

Так, идейку подкину, смена цвета текста.

Еще подсказки за текстом. Еще «Quote» нужен

 Def, именно так и написано в моем сообщении

если вы смените тип поля с html на editorjs с уже имеющимся контентом, при редактировании в редакторе вы увидите пустой экран

и

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

У себя прописал такие стили 

.editorjs{
    max-width: 99%;
    padding: 20px;
}

.ce-block__content {
    max-width: 99%;
}

.ce-toolbar__content {
    max-width: 99%;
    margin: 0 auto;
    position: relative;
}

@media(min-width: 650px){
    .editorjs{
        padding-left: 60px;
    }
}

так как иначе редактор показывался узким в отличие от стандартного контейнера.

Вставка таблиц наверное тоже актуальна помимо таких опций.

Если надо реализовать доплату, то напишите, уверен многие и не только я поддержат.

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

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

.ce-block:only-of-type .ce-paragraph[data-placeholder-active]:empty::before, .ce-block:only-of-type .ce-paragraph[data-placeholder-active][data-empty="true"]::before {
  content: "Полковнику никто не пишет и ссылки не шлет";
}

Не знаю зачем тап паддинг аж 300. Сделал так, но можно вообще 0

.codex-editor__redactor {
padding-bottom: 10px !important;
}

Подсказки перед текстом сделал так:

.ct--shown {
z-index: 9999;
}

И еще очень большой недостаток. Не воспроизводятся видео МП4. Надо посмотреть есть ли в интернете решения.

Поставил себе «Quote». Выглядит в редакторе поправимо стилями.

Но при отправке выдаёт за место Цитаты  — <hr>

delimiter — тоже выдает как <hr>

Забыл, «цитата» работает как надо, я там с буквой ошибся. Пардон. Прикрепил точно такой же, только с цитатой. 

Забыл, «цитата» работает как надо, я там с буквой ошибся. Пардон. Прикрепил точно такой же, только с цитатой. 

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

Забыл, «цитата» работает как надо, я там с буквой ошибся. Пардон. Прикрепил точно такой же, только с цитатой. 

Странно, в настройках поля цитату включил, а на фронте не появилось

Здравствуйте.

Новый сайт, типы контентов уже созданы, но контента на сайте нет ещё. 

ВНИМАНИЕ! Использовать только в новых типах контента

Что будет, если использовать в уже созданных типах контента? Работать не будет?

но контента на сайте нет ещё.

Работать не будет?

Будет работать.

Ключевое тут нет контента. Проблема не в старом контенте. А в том, что при попытке отредактировать старую статью, созданную, допустим, в Tiny, вы ничего не увидите, список блоков будет пустой, и при сохранении потеряете содержимое статьи. Если старые записи редактировать не будете, можете использовать поле и при наличии контента. 

Ну и вы всегда можете в дальнейшем переключиться с типа поля Editorjs (если поле по каким-то причинам не понравится) на тип поля html с тем же Tiny, и продолжить наполнять сайт. Это поле хранит данные точно также (добавляя специальные классы, чтобы можно было преобразовать верстку в блоки обратно), как и обычное поле с редактором.

Надеюсь подробно объяснил.

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

В принципе я так и понял, просто хотел уточнить. Благодарю за чёткий ответ и проделанную работу.

Больше скажу. Вполне себе реально написать альтернативу используемому в поле парсеру блоки->html->блоки github.com/Edd-G/editorjs-simple-html-parser 

И убрать из него требование к наличию специальных классов, а все непонятные блоки пропускать. И тогда поле сможет «переваривать» любую верстку. Но это вышло за рамки хотелок заказчика. И непонятно, насколько универсально такой мигратор бы получился.

Def Извеняюсь. Там надо в system/fields/editorjs.php строка 272 напишите «Quote» с маленькой буквы «quote». Делал поздно, да и вообще делал другие плагины а цитату использовал как «Тест». Я этот editorjs впервые внутри вижу. 

А все возможные плагины в редактор можно встроить?)

 Вы напишите какой вам нужен, я попробую.

Я искал способ воспроизведения mp4 через ссылку, нашел какой то, но не получилось его пристроить. «VideoPlayer not defined» А без mp4 к сожалению эдитор мне не подходит.

Никогда еще Штирлиц не был так близок к провалу.

Но, блин нету парсера Видео. 

Прокрепил файл. Может кто закончит, я не знаю как парсеры делать. Брал копию с embed, не сработало. Так то все воспроизводится, и если добавить блок в /system/libs/Durlecode/EJSParser/Parser.php

    private function parseVideo($block)
 
 
    {
            $figure = $this->dom->createElement('figure');
 
            $attrs = [];
 
            $caption = (!empty($block->data->caption)) ? $block->data->caption : '';
 
            if ($block->data->withBorder) $attrs[] = "withborder";
            if ($block->data->withBackground) $attrs[] = "withbackground";
            if ($block->data->stretched) $attrs[] = "stretched";
 
            $style = (count($attrs) > 0) ? implode(' ', $attrs) : false;
 
            $class = $this->addClass($block->type, false, $style);
 
            $figure->setAttribute('class', $class);
 
            $video = $this->dom->createElement('video');
 
            $video->setAttribute('src', $block->data->url);
            $video->setAttribute('alt', $caption);
 
            $figure->appendChild($video);
 
            if (!empty($caption)) {
                $figCaption = $this->dom->createElement('figcaption');
                $figCaption->appendChild($this->html5->loadHTMLFragment($caption));
                $figure->appendChild($figCaption);
            }
 
            $this->dom->appendChild($figure);
        }

отправляетса без ожибок. Но блок не выведет.

Тут, цитата и код.