Редакторы HTML5 WYSIWYG («Что видишь, то и получаешь») всегда пользуются большим спросом. Но сейчас их так много, что трудно найти лучших. В этом посте я собираюсь представить некоторые из лучших плагинов jQuery и HTML5 WYSIWYG, сэкономив ваше время на поиск плагина, который соответствует вашим потребностям.
Froala
Froala WYSIWYG HTML Editor прост в интеграции и использовании. Это требует минимальных знаний кодирования. Требуется jQuery 1.11.0 или выше и иконический шрифт с именем Font Awesome 4.4.0. В сочетании со всеми функциями пользовательского интерфейса и UX, он также обладает мощным механизмом защиты от атак XSS.
Особенности
- 34 кб в архиве
- Встроенное редактирование
- Сочетания клавиш доступны
- Требуются базовые знания HTML и JavaScript
- Темная и светлая тема (можно настроить, отредактировав файл LESS)
- Оптимизировано для мобильных устройств
- MS-Word дружественный
- Поддерживаются 34 языка, включая поддержку RTL (справа налево)
ContentTools
ContentTools — это небольшой и красивый редактор контента. Библиотека не использует JavaScript-фреймворк или библиотеку (даже jQuery), но прекрасно работает с любым из них. Пакет ContentTools состоит из 5 библиотек, каждая из которых может использоваться независимо. Он разработан, чтобы его можно было легко расширять.
Особенности
- 49 кб в архиве
- Встроенное редактирование
- Изменение размера изображений и видео
- поддерживает отмену / повтор
Aloha
Aloha Editor — это функциональная библиотека для редактирования контента. Это позволяет создавать впечатления от редактирования, встроенные в ваше веб-приложение. Основным недостатком является то, что он по-прежнему не поддерживает вставку изображения.
Особенности
- Размер 142 КБ
- MS-Word дружественный
- Кросс-браузерная совместимость
- Настраиваемый
TinyMCE
TinyMCE — это независимый от платформы веб-интерфейс JavaScript HTML WYSIWYG. Это позволяет вам преобразовывать поля текстовой области HTML или другие элементы HTML в экземпляры редактора. Вы можете загружать файлы и управлять ими в Microsoft Azure, Google Drive, Amazon S3, DropBox и других. Он соответствует спецификации WAI-ARIA , что делает его совместимым с программами чтения с экрана, такими как JAWS и NVDA. Существует также корпоративное решение, в котором вы получаете приоритетную поддержку.
Особенности
- Встраивание живых медиа
- Встроенное редактирование изображений
- Проверка орфографии (предприятие)
- MS-Word дружественный
- Поддержка более 40 языков
- Надежная кросс-браузерная производительность
bootstrap3-WYSIWYG
bootstrap3-wysiwyg — это плагин JavaScript, который позволяет легко создавать простые, красивые редакторы WYSIWYG с помощью wysihtml5 и Twitter Bootstrap .
Особенности
- 206 КБ минимизировано
- Требуется поддержка JS
- Пользовательский шаблон для панели инструментов
- Пользовательские темы доступны
- Выставляет такие события, как
loadblur
Summernote
Summernote — это текстовый редактор, основанный на Bootstrap. Для него доступны различные темы, и они работают на Bootswatch . Существует также версия, преобразованная в тему материалов с именем MaterialNote.
Особенности
- 80 КБ JS + CSS
- Поддерживает Bootstrap 3.xx
- Может быть легко интегрирован с Django, Rails или Angular
- Легко настраиваемый
- Интеграция CodeMirror
CKEditor
CKEditor — это готовый текстовый редактор HTML, разработанный для упрощения создания веб-контента. Он приносит общие функции текстового процессора прямо на ваши веб-страницы.
Особенности
- Индивидуальная сборка с использованием CKBuilder
- MS Word дружественный
- Встроенное редактирование
- Отменить / повторить поддержку
- Поддержка RTL
- Поддерживает около 60 языков
Trumbowyg
Trumbowyg — самый легкий из всех перечисленных здесь редакторов. Хотя все существующие редакторы WYSIWYG имеют размер более 45 КБ, Trumbowyg составляет всего 16 КБ. Это зависит от jQuery> = 1.7.
Особенности
- Всего 16 кб
- 30+ локализаций
редактор
Redactor — это быстрый, мощный и расширяемый редактор с командой поддержки качества. Он существует уже 7 лет и активно развивается. Он также автоматически загружает изображения в Amazon S3.
Особенности
- 75 кб минимизировано
- Встроенное редактирование текста
- Поддержка CodeMirror
- Перетащите функциональность для изображений
- Поскольку редактор основан на плагинах, его можно легко расширить.
Вывод
В этой статье я показал вам, как мне кажется, одни из лучших плагинов jQuery и HTML5 WYSIWYG . Я надеюсь, что этот список поможет вам выбрать хороший текстовый редактор для вашего проекта и сэкономит время на поиске плагина, который лучше всего соответствует вашим потребностям.