Богатые текстовые редакторы , также известный как WYSIWYG (Что вы видите, это то, что вы получаете) редакторы везде – комментарий разделы, форумы, онлайн-редакторы текста. Всякий раз, когда вы хотите выйти за пределы простого или
И включить видимое, интерактивное форматирование в вашем редакторе, вы должны пойти
Удовлетворены
Маршруйте и постройте правильный богатый редактор.
К счастью, с множеством JavaScript Frameworks и библиотек, созданные с единственной целью здания Богатый опыт редактирования на основе веб Ты никогда больше не должен иметь дело со злом то есть Удовлетворены
Отказ
В этом сообщении я хотел бы представить вам мои лучшие выборы для Лучшие Frameworks js богатый текстовый редактор на 2021.
Таким образом, весь этот список основан на глубоких исследованиях, которые я сделал во время работы на моем первом продукте – Кодева , Инструмент для блога для разработчиков Отказ
Кодева Был создан, чтобы обеспечить наилучшее техническое ведение блога и перекрестного опыта. Он имеет форму расширения браузера + PWA Hybrid, обеспечивающий систему автоматической наполнения для популярных платформ блогирования и специализированного редактора богатых контентов.
С тем, что сказал, CoDewrete – это продукт, который определил мои рамки. Итак, что они?
Основы
Для базовой линии функций, которые должны иметь структуру, я выбрал те, которые определенно требуются кодовыеWRite. Те, кто включен:
- богатый Встроенный контент форматирование , с вариантами настройки и расширения предоставляемых функциональных возможностей
- Встраивает и поддержка контента другого блока –
S, списки, блокировки, блокировки и т. Д.
- Возможность использования и определения пользовательских горячие клавиши а также Правила ввода отметки (Важно для разработчиков, динамически меняющиеся входные данные MD в отформатированный контент)
- Глубоко Пользовательская интерфейс и гибкость, возможность создавать форматирование панелей инструментов, «блок» боковых меню, плавающие панели инструментов и т. Д.
- ” Недостаточный «Поддержка основных операций – история, отменить, повторить, копировать, вставить.
За исключением правил ввода глубокой настройки и ввода на заказ, это все функциональные возможности, которые вы должны ожидать, что для предоставления каждой современной структуры.
Конечно, мы также ищем качество Техническое обслуживание , размер сообщества, Документация и простота использования API Отказ
Специфики
Помимо оснований, у меня были некоторые дополнительные требования, которые были очень специфически для того, что я хотел быть кодом.
Грамматика Проверка поддержки инструментов
Вы знаете эти расширения браузера, которые предоставляют вам проверку грамматики AI на каждом входе, например, e.g., Грамматически ? Те работают очень хорошо в обычной С, но часто борьба в сложном, богатых текстовых редакторах. Это из-за различий в обработке
Удовлетворены
элементы. Разные структуры работают лучше или хуже с инструментами, такими как грамматический.
Хотя можно утверждать, что такие вопросы должны быть решены на стороне грамматики, они не могут объяснить все возможное Удовлетворены
Структура там, и поэтому необходима небольшая помощь.
Редактор в редакторе
Это очень конкретно с кодом. Чтобы обеспечить лучший опыт технического обслуживания, я хотел иметь как лучшее написание, так и Опыт кодирования . Это означало, что фрагменты кода должны быть обработаны должным образом – с чем-то вроде CodeMirror или Монако редактор – Что, в свою очередь, означал встраивать редактор в редакторе!
Редактируемые встраиваемые отличаются от традиционных, таких как с, как они намного больше интерактивный . Они не могут быть встроены через
, так как несколько отдельных экземпляров редактора Monaco принесет любое устройство к коленям. Кроме того, вы должны быть в состоянии редактировать контент в любом из этих экземпляров, включая такие операции, как Select, Copy, Paste и т. Д. Добавить синхронизация курсора между внутренними и внешними редакциями для всего этого, и у вас довольно сложная установка на ваших руках.
Хорошо иметь
Помимо всего уже перечисленного, у меня еще больше требований. * «Хорошо, у них» * S, как я их позвонил, были те черты, которые я знал, я не буду использовать сразу, но был бы полезен по линии. Это были:
- Мобильная поддержка – Как настольное расширение браузера, Codewrete не предназначался для мобильных устройств. Помимо этого, это сложно обеспечить надлежащий опыт редактирования и кодирования на небольших сенсорных устройствах без физической клавиатуры. С этим сказанным, я подумал о том, чтобы сделать кодовое владение для мобильных устройств в течение одного дня, поэтому хотел, чтобы мои рамки выбора его поддерживают.
- Совместное редактирование – Теперь, изначально, я хотел, чтобы Codewrete для отдельных кодовых блоггеров, но я всегда планировал поддержать “Живой коллаб” по линии. Вы знаете, курсоры в режиме реального времени, разрешение конфликта и т. Д.? Live Collab – это требовательная функция, которая требует структуры, имеющих хорошо структурированную API и правильно структуру, ручку и обновления хранения.
Со всеми требованиями к функциям с самого пути позвольте мне быстро объяснить, как будет структурирован этот список.
Все упомянутые функции будут объединены в короткий список для вас, чтобы вы могли быстро взглянуть на установленные функции данной структуры, причем каждая функция помечена 🎉, 👎 или 😑 для «прошедших», «Не удалось», и «Несколько пройдено» соответственно.
Сейчас не каждая структура в этом списке включает в себя каждую функцию – даже из базовой категории! Тем не менее, эти действительно лучшие варианты от всего этого, о которых я знаю, и все они действительно заслуживают место в этом списке.
С этим сказанным, некоторые заслуживают этого больше, чем другие, и поэтому я разделил все 6 записей В этом списке на 3 категории – «Стоит упомянуть» , «Рубины-вверх» и «Победитель» Отказ Таким образом, у вас нет только четкое различие между каркасами, но также может следовать моему путешествию, так как я решил на мой последний выбор.
Надеюсь, это достаточно вступления. Мы знаем, что мы ищем, мы знаем, как все это работает, и теперь – в список!
Quill.
Квинс казалось хорошей рамками с самого начала. Это независимый от UI, работает с грамматикой, легко настраивает пользовательский интерфейс, и все это хорошие вещи.
Тем не менее, проблемы возникают, когда вы копаете глубже. Казалось бы, простые API становится все более сложным, поскольку вы ищете настраиваемость, правила ввода Markdown не поддерживаются, а приемность всего проекта является под вопросом .
Странно, репо кажется активным, но документы, однако широкие, кажется, немного застряли в прошлом, а Пакет NPM не был обновлен более года.
С этим сказанным, quill до сих пор сделала это в этот список (хотя и сама внизу), благодаря своему «Кажущаяся простота» Отказ Если все, что вы хотите, это простой, но богатый редактор, у вас нет никаких пользовательских требований и не ищите глубокую настройку; Quill – это хороший, быстрый и простой в настройке редактор.
- Основные операции: 🎉
- UI настраиваемость: 🎉
- Встроенное форматирование: 🎉
- Встраивается и блоки: 😑 (за исключением изображений и видео, требует сложной установки)
- Горячие клавиши: 🎉
- Правила ввода отметки: 👎 (см. https://github.com/quilljs/quill/seues/3192 )
- Хороший API: 😑 (простые снаружи, сложный на внутренней стороне)
- Документация: 😑 (широкий, но застрял во времени)
- Техническое обслуживание: 😑 (поддерживается, но не на самом деле)
- Грамматически: 🎉
- Вложенные редакторы: 👎 (см. https://github.com/quilljs/quill/ssues/2772 )
- Поддержка мобильной связи: 🎉
- Совместное редактирование: 😑 (см. https://github.com/quilljs/quill/issues/2099 )
Проект
Теперь Проект.js Казалось бы, «Go-to To» Rich Editor Framework для реагирования. Это приходит прямо из команды Facebook, глубоко «Реагирование» API, а силы любит Facebook Messenger или Twitter.
Если вам понравилось работать с реагированием ранее, вам понравится API Prush.js. Помимо быть адаптированным к реакции, это чистый, простой и хорошо документированный.
Эта простота, однако, влияет не только на API, но и весь дизайн структуры. Сама рамок является просто ядром, с ограниченной функциональностью, но A Прочная система плагинов Отказ Это означает, что вам придется делать еще несколько исследований и найти хорошие плагины (вот хорошая коллекция ) Или построить необходимые плагины самостоятельно.
- Основные операции: 🎉
- UI настраиваемость: 🎉
- Встроенное форматирование: 🎉
- Встраивает и блоки: 🎉
- Горячие клавиши: 🎉
- Правила ввода уценки: 😑 (возможно через плагин )
- Хорошая API: 🎉
- Документация: 🎉.
- Техническое обслуживание: 🎉.
- Грамматически: 🎉
- Вложенные редакторы: 😑 (возможно, хотя никаких ресурсов на это доступно)
- Поддержка мобильной связи: 🎉
- Совместное редактирование: 👎 (см. https://github.com/facebook/drath-js/issues/93 )
Редактор
Editor.js имеет руки вниз, лучший API из любой рамки в этом списке. Это просто, независимое, простое, простое в использовании и имеет чистый, чистый вывод JSON.
Такая отличная API приходит по цене, хотя. Рамки не хватает поддержки для совместного редактирования и входных правил ввода. Грамматическая поддержка также поражает или пропускает, так как edited.js – это Блок стиль редактор (Каждый абзац контента является его собственным Containediredity
). Кроме того, мобильная поддержка, хотя присутствует, поставляется с несколькими икотами.
Что касается настройки – имеется архитектура плагина для его поддержки, хотя она довольно ограничена. Плагины позволяют добавлять дополнительные функции, такие как блоки или встроенные форматирование, но настройка UI не такой обширной, как и в других рамках.
С тем, что сказал, я целый – сердечно рекомендую редактор. Джобще для тех, кто ищет капельницу, простое в использовании редактор с потрясающим интерфейсом UI. Что-то вроде квиль, просто на самом деле поддерживается, и, возможно, еще лучше!
- Основные операции: 🎉
- UI настраиваемость: 😑 (возможна, но ограничена по сравнению с другими рамками)
- Встроенное форматирование: 🎉
- Встраивает и блоки: 🎉
- Горячие клавиши: 🎉
- Правила ввода Markdown: 👎 (см. https://github.com/codex-team/editor.js/issues/709 )
- Хорошая API: 🎉
- Документация: 🎉.
- Техническое обслуживание: 🎉.
- Грамматически: 😑 (работает, но только «в зависимости»)
- Вложенные редакторы: 😑 (возможно, «Доказательство концепции» Доступно плагин )
- Мобильная поддержка: 😑 (работает, но глючит)
- Совместное редактирование: 👎 (см. https://github.com/codex-team/editor.js/issues/819 )
Шифер
С Шифер мы поднимаемся в игру! Казалось бы, навсегда в Бета , Slate – это глубоко настраиваемый богатый редактор Framework, предназначенная для реагирования.
Аналогично для Confull.js он имеет хорошую API, надежную инфраструктуру плагинов и глубокие соединения с реакцией. Однако у него есть некоторые дополнительные преимущества и, как правило, больше настраиваемый Отказ Кроме того, экосистема плагина немного меньше, чем черновика. Джей, но можно сказать, что в среднем качество плагина лучше. В качестве примера вот a Хороший плагин коллекция Отказ
Slate – это первая структура в этом списке, что несколько проверяет все коробки. Несмотря на то, что в настоящее время Slate не хватает документации о совместных редактированных и вложенных редакторах, API позволяет для таких функций. Это оставляет Отсутствие поддержки Android как самый большой недостаток.
- Основные операции: 🎉
- UI настраиваемость: 🎉
- Встроенное форматирование: 🎉
- Встраивает и блоки: 🎉
- Горячие клавиши: 🎉
- Правила ввода отметки: 🎉
- Хорошая API: 🎉
- Документация: 🎉.
- Техническое обслуживание: 🎉.
- Грамматически: 🎉
- Вложенные редакторы: 😑 (возможно, «Доказательство концепции» Доступно )
- Мобильная поддержка: 😑 (Android Неподдерживаемые , iOS в основном работает)
- Совместное редактирование: 😑 (возможно, но вряд ли задокументированы )
Проспект
С Проспект мы достигаем вершины! Это безусловно Самые функциональные полные рамки в этом списке.
Все особенности, которые мы ищем присутствуют в Проземиррере. Основы – проверено, настраиваемость – проверено, мобильная и грамматическая поддержка – проверено! Даже совместные редактирование и вложенные редакторы кода получают пропуск – есть выделенные примеры для оба эти Краевые чехлы! Единственный недостаток, который прозеюритор имеет его сложность Отказ
Ожидается, что рамочная структура, которая будет иметь комплексное API. Это естественно, но все же, что-то указывать, как новички в рамках, то есть подавляющее большинство, может сначала бороться. Добавьте к этому минимализму инструментария (включает в себя только основные «строительные блоки» для вас, чтобы поставить их вместе), и вы вполне вызова.
С тем, что сказал, я бы сказал, что нет лучших оснований для создания богатых текстовых редакторов в 2021 году, чем проземерир. Тем не менее, это оставляет вопрос – почему не проземирский победитель?
- Основные операции: 🎉
- UI настраиваемость: 🎉
- Встроенное форматирование: 🎉
- Встраивает и блоки: 🎉
- Горячие клавиши: 🎉
- Правила ввода отметки: 🎉
- Хорошая API: 😑 (довольно сложный)
- Документация: 🎉.
- Техническое обслуживание: 🎉.
- Грамматически: 🎉
- Вложенные редакторы: 🎉
- Поддержка мобильной связи: 🎉
- Совместное редактирование: 🎉
Stipap (v2)
Итак, «победитель», а также лучший богатый редактор Framework для 2021 года, является Tiptap Действительно Это построит На вершине проземерицы (Итак, моя точка зрения о том, что она лучше всего стоит), но предоставляет гораздо дружелюбную API, что позволяет вам создать отличное редактирование опыта намного быстрее!
Есть одна оговорка, хотя. Видите ли, когда я кладу тьпп на подиум, я на самом деле ссылаюсь на Tiptap v2 Отказ
Tiptap V1 уже приятная, полезная обертка вокруг проземеригора, но ему не хватает хорошей документации, текста напечатает и совместима только с Vue 2.
Tiptap V2 исправляет все эти проблемы с улучшенным, независимым каркасом API, Teamptry Rewrite и отличными документами. Тем не менее, это в бета-версии – Закрытая бета Отказ Чтобы получить доступ к структуре, вы должны спонсирует своих разработчиков на Github. Благородное дело, но барьер для въезда тем не менее.
Они Открыто заявлено что структура будет доступна публично после достижения цели $ 5000/месяц от спонсоров github.
Теперь подумайте о том, что вы будете, но лично я ценю хорошие продукты, а Tiptap является одним из них. Таким образом, в качестве спонсора GitHub я получил доступ к Tiptap V2, и я должен признать – это лучший инструмент для работы. Я не могу сказать, что это лучший богатый контент редактор Framework, поскольку это роль Проституции, но это отличное продление на вершине.
С комбинированными API и документацией обоих инструментов вы сможете создать любой богатый редактор, который вы можете подумать, просто как я смог создать кодовое владение. Вам все равно придется узнать API ProSemirror для реализации более продвинутых функций, хотя он придет постепенно и будет гораздо проще благодаря оболочкам TiPtap.
Итак, это мой нет. 1 . И вы можете либо ждать, пока он станет публичным (это действительно близко) или спонсирует потрясающую команду за Tiptap и получить доступ прямо сейчас!
- Основные операции: 🎉
- UI настраиваемость: 🎉
- Встроенное форматирование: 🎉
- Встраивает и блоки: 🎉
- Горячие клавиши: 🎉
- Правила ввода отметки: 🎉
- Хорошая API: 🎉
- Документация: 🎉.
- Техническое обслуживание: 🎉.
- Грамматически: 🎉
- Вложенные редакторы: 🎉
- Поддержка мобильной связи: 🎉
- Совместное редактирование: 🎉
Это это для этого списка. Я надеюсь, что вы найдете это полезным. В конце концов, вы только что узнали через несколько минут, что заняло меня дни! Я не могу дождаться, чтобы увидеть, какие удивительные редактирующие впечатления вы создаете с любым из этих замечательных инструментов! Не стесняйтесь делиться ими, ваши мысли и все, что связано с темой в комментариях ниже!
Во всяком случае, для большего количества веб-разработки, следуйте за мной на Twitter , Facebook или через Моя рассылка Отказ Спасибо за чтение, и счастливое кодирование!
Что касается кодового производства – вы сейчас знаете. Это питание от Tiptap v2 наряду с Vue 3 и TSX комбо. Если вы являетесь техническим блоггером, как я, не стесняйтесь Проверьте кодовое владение Действительно Это повысит вашу продуктивность и опыт работы с отличным Грамматико-совместимый Rich Text Editor , посвященный Монако редактор Для обработки фрагментов кода (один и тот же, один идинг против кода) и красивее интеграция для форматирования их. Кроме того, вы получите One-Щелкнуть Автозаполнение Функциональность для блогирующих платформ, таких как Средний , Dev.to С Hashnode все Ghost Blogs и даже больше в будущем, с автоматическим Механизм разрешения выпуска Для обработки неприятных вещей, таких как размеры изображений, или фрагмент для преобразования GitHub Gist для среднего!
Платные планы Coadewrite начинаются по мере $ 3/месяц , но вы также можете попробовать это бесплатно! Кроме того, если вы читаете это, используйте код First100.
чтобы получить срок службы срок службы 20% Если вы один из первых 100 человек, чтобы использовать код. Это так мало, как $ 2,40/месяц или просто 24 доллара в год Действительно
Оригинал: “https://dev.to/areknawo/top-js-rich-text-editor-frameworks-for-2021-53n8”