Как сделать текстовый редактор на javascript
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Всем доброго времени суток. Помогите пожалуйста решить задачку.
Мне понадобился простенький текстовый редактор для сайта. С помощью гугла я нашёл несколько примеров такого редактора. В целом все они идентичны, и работают по тому же принципу, что и текстовый редактор данного сайта. Текст вводится в textarea, а разметка производится с помощью тегов bbCode. Можно, конечно, использовать один из таких вариантов;
Дело в том, что я видел гораздо более красивое решение (в оболочке Moodle). Там текст вводится прямо в iframe, и при разметке никакого bbCode'а или ещё чего-то постороннего не видно. Прям как в обычном ворде: нажал кнопку B - текст сразу стал жирным, нажал I - появился курсив, и т.д.
В общем, у меня появилось большое желание сделать нечто подобное. И, естественно, начались проблемы, т.к. этот вариант гораздо сложнее. Шаблонов или примеров такого редактора мне найти не удалось. Начал кумекать сам. В общем, вот всё, что у меня получилось:
Дальше ничего придумать не могу. Главная проблема с кареткой (или как там называется этот мигающий курсор). Как сделать, чтобы она перемещалась по тексту - ума не приложу. Ну и как сделать удаление или вставку текста - тоже мне непонятно. К тому же то, что я написал глючит в разных браузерах по разному. Например, в опере каждый символ печатается с новой строки. В связи с этим у меня возникло сомнение, что я вообще двигаюсь в нужном направлении. Может я всё начал неправильно?
Подскажите пожалуйста кто что знает по данной теме. Если бы кто-нибудь дал дал ссылку на пример (шаблон) такого редактора - было бы вообще отлично.
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
Привет! Меня зовут Данила, и я фронтенд-разработчик в KTS.
Однажды в одном из своих проектов мне потребовалось реализовать кастомный текстовый редактор на React.js. Задача показалась мне довольно интересной, и я решил рассказать о своем опыте. В статье я поэтапно покажу, как можно создать текстовый редактор с базовыми функциями.
Надеюсь, информация будет полезной и сэкономит кому-то время и силы.
Что будет в статье:
Что такое Draft.js?
Создание простых блоков
Создание интерактивных элементов
Обработка сочетаний клавиш
Экспорт-импорт HTML в редактор
1. Описание задачи
Сформируем список требований для нашего редактора. Он должен:
Иметь предустановленные стили элементов — заголовки, списки и т.д
Форматировать стили текста — жирность, курсив и т.д
Поддерживать интерактивные элементы — например, ссылки
Работать с сочетанием клавиш
Импортировать/экспортировать контент в HTML
Я понимал, что реализовывать все с нуля сложно и долго, так как браузеры могут по-разному обрабатывать нативные события работы с текстом.
Поэтому я начал искать информацию о том, как другие разработчики решали похожие задачи, и с какими подводными камнями они сталкивались. Выяснилось, что одним из популярных решений является пакет Draft.js.
2. Что такое Draft.js?
В 2016 году инженеры Facebook представили пакет для работы с текстом на React Conf. Draft.js — это фреймворк для работы с текстом на React.js. Он позволяет создать состояние редактора, которое будет хранить всю информацию о контенте, о положении курсора и многом другом. А также предоставляет кроссбраузерные функции для удобного изменения этого состояния. Draft.js работает с имутабельными данными при помощи immutable.js. Это означает, что при изменении состояния мы полностью перезаписываем его новой версией.
Контент в редакторе на Draft.js строится из блоков. Блок — структура данных, в которой хранится информация о тексте внутри него. Каждому блоку можно задавать свои уникальные данные, а так же задавать настройки его рендера: задавать тег, стили, атрибуты или просто указать React-компонент. К любому фрагменту текста блока можно применить inline-стили (например, сделать жирным). А для создания более сложных и интерактивных элементов в Draft.js есть системы Entities и Decorators. С их помощью можно рендерить произвольные React-компоненты и связывать их с фрагментами текста.
Более подробную информацию можно найти на официальном сайте фреймворка.
3. Архитектура
Наш компонент будет состоять из нескольких частей:
Весь API нашего редактора вынесем в отдельный React-hook useEditor.
Дизайн редактора может быть произвольным, и элементы управления могут находится далеко от самого окна редактора. Для того, чтобы не пробрасывать API редактора через props-ы множества компонентов, воспользуемся React Context. C его помощью компоненты смогут легко получить нужные данные и функции.
Таким образом, схема редактора будет выглядеть так:
4. Начинаем кодить
Чтобы не тратить время на создание и настойку сборки, воспользуемся Create React App. Код будет написан на Typescript, поэтому создадим проект с соответствующим шаблоном:
Установим необходимые зависимости:
draft-js — фреймворк Draft.js
Установим типы для вышеописанных библиотек:
Создадим файл useEditor.tsx. Данный файл будет содержать React-hook, в котором мы будем описывать всю логику нашего редактора:
С помощью метода EditorState.createEmpty() мы создаем пустое имутабельное состояние нашего редактора и сохраняем его в локальном состоянии. Постепенно мы будем добавлять в него функции и логику.
Создадим React Context, с помощью которого будем прокидывать API редактора:
Теперь в любом месте нашего приложения мы можем получить доступ к функциям редактора с помощью хука useEditorApi:
Добавим провайдер на страницу:
Создадим компонент окна редактора TextEditor:
Мы подключили базовый компонент Editor из пакета Draft.js. Именно он создаст редактируемое поле и будет управлять содержимым. Связываем его c ранее созданным API редактора.
Создадим компонент панели инструментов:
5. Создание простых блоков
Мы создали редактор, но пока он ни чем не отличается от простого textarea. Добавим возможность создания блоков.
По умолчанию Draft.js содержит настройки основных типов блоков. Полный список можно найти тут.
Создадим файл конфигурации config.ts:
Мы описали enum с названиями типов блоков, а также добавили новый блок сноски cite. Но пока редактор ничего не знает о том, как обрабатывать новые типы блоков. Для того, чтобы добавить произвольные блоки в Draft.js, необходимо создать имутабельную карту блоков. Воспользуемся методом Immutable.Map из пакета immutable (он устанавливается вместе с Draft.js). Мы описали название нашего нового блока (cite) и указали название тега, с которым он должен выводиться в DOM. Для того, чтобы не описывать стандартные блоки, объединим карту блоков по умолчанию с нашей при помощи метода DefaultDraftBlockRenderMap.merge:
Далее укажем редактору новую конфигурацию блоков:
Теперь наш редактор умеет обрабатывать типы блоков. Для создания элементов управления типом блоков, нам необходимо добавить в хук useEditor два поля:
toggleBlockType — функция переключения типа блока;
currentBlockType — переменная со значением текущего типа блока, с помощью которой можно будет добавить элементу активное состояние.
Draft.js содержит класс RichUtils со вспомогательными методами для редактирования текста. Для реализации toggleBlockType воспользуемся методом RichUtils.toggleBlockType, чтобы применить определенный тип блока к текущему состоянию редактора:
Реализация currentBlockType будет выглядеть следующим образом:
Разберем код подробнее.
Шаг 1: получаем карту, в которой хранится информация о том, где находится каретка пользователя. Напомню что Draft.js работает с имутабельными данными, и чтобы посмотреть что хранится в selection, можно воспользоваться методом toJS .
Шаг 2: получаем карту контента нашего редактора.
Шаг 3: по ключу находим блок, в котором сейчас находимся. Ключ — это просто уникальный хеш, который сгенерировал Draft.js.
Шаг 4: получаем тип найденного блока.
Теперь у нас есть все необходимое, чтобы создать элементы управления типами блоков.
6. Inline-cтили текста
Теперь создадим функции применения стилей к выделенному тексту.
Draft.js содержит встроенные типы стилей для inline-cтилей. Воспользуемся ими и добавим свой произвольный тип. Наш стиль будет менять цвет фона и цвет шрифта текста.
Для начала опишем в нашем конфиге enum для inline-cтилей:
Так как у нас появился произвольный стиль, нам нужно описать, какие стили он будет применять. Для этого создадим карту:
И теперь нам необходимо подключить карту в Editor:
Теперь редактор знает, как обрабатывать наши стили. Далее нужно реализовать кнопки управления inline-cтилями:
toggleInlineStyle — функция включения/выключения inline-cтиля;
hasInlineStyle — функция, которая укажет, применен ли конкретный стиль для выделенного текста.
Для реализации этой задачи мы снова можем воспользоваться RichUtils:
Теперь мы легко можем добавить кнопки управления inline-cтилями:
7. Создание интерактивных элементов
Рассмотрим процесс создания интерактивных элементов на примере вставки ссылок. Для этого мы воспользуемся Entities. Entity — объект, который хранит мета-данные для определенного фрагмента текста. У него есть три свойства:
type — название типа Entity
mutability — тип привязки к тексту (подробнее об этом будет ниже)
Создадим в конфиге перечисление типов Entity:
Далее создадим React-компонент Link, именно он будет отображаться на месте ссылок:
Стоит отметить, что при создании каждой Entity присваивается уникальный хеш-ключ. С помощью него мы можем получить доступ к сохраненным мета-данным, в данном случае к — url. Его мы будем задавать при создании Entity-ссылки.
Для того чтобы Draft.js понимал, к какому фрагменту текста привязана Entity, существует система Decorators.
Декоратор состоит из трех частей:
strategy — функция поиска фрагмента текста на месте которого нужно отобразить компонент
component — компонент, который нужно отобразить
props — пропсы которые нужно передать компоненту.
Создадим декоратор для привязки ссылок:
Теперь мы можем подключить созданный декоратор к нашему редактору:
Отлично! Теперь наш редактор умеет обрабатывать ссылки. Теперь научим его редактировать и добавлять их.
Так как в редакторе может быть несколько типов Entity, cоздадим общую функцию для добавления Entity. Она будет доступна только внутри хука и не будет доступна в компонентах. Для добавления типа ссылки создадим отдельную функцию addLink, она будет доступна в API редактора:
Стоит отметить, что Entity имеет три режима привязки к тексту:
MUTABLE — текст может быть изменен
IMMUTABLE — при изменении текста Entity будет удален
SEGMENTED — работает так же как IMMUTABLE, с той лишь разницей, что, если текст состоит из нескольких слов, то при удалении символа, удаляется слово, но оставшиеся слова остаются привязанными к Entity. (Пример: "Маша мы|ла раму" → [backspace] → "Маша раму")
Мы выбрали MUTABLE, так как текст ссылки может быть редактируемым.
Теперь мы легко можем реализовать кнопку добавления ссылки. Чтобы указать адрес ссылки, воспользуемся prompt:
Ссылки добавляются. Давайте доработаем редактор, чтобы можно было редактировать url уже созданной ссылки.
Для упрощения примера сделаем так, чтобы при клике на ссылку в редакторе снова появлялся prompt с предзаполненным url.
Обработаем клик в компоненте:
И создадим функцию, с помощью которой мы сможем перезаписывать данные Entity:
Стоит отметить, что существует несколько типов изменения состояния редактора. Каждый из них нужен, чтобы Draft.js правильно определял, как изменение влияет на некоторые функции: например, повтор и отмена.
Вот и все. Теперь мы можем легко добавлять и редактировать произвольные Entity в нашем редакторе.
8. Обработка сочетаний клавиш
Во многих текстовых редакторах можно редактировать контент с помощью сочетания клавиш. В Draft.js есть механизм для реализации такого поведения. Сочетание клавиш должно выполнять определенное действие — команду. Создадим функцию обработки этих команд.
Функция принимает на вход название команды и текущее состояние редактора, и должна вернуть одно из двух значений:
handled — команда применена
not-handled — команда не применена.
Во избежание гонки обновлений состояния всегда нужно стараться работать с последней актуальной версией. Подробнее об этом можно прочитать тут.
С помощью RichUtils.handleKeyCommand мы добавим обработку стандартных сочетаний клавиш. Например, ctrl + I или cmd + I для применения ранее созданного стиля ITALIC.
Далее необходимо прокинуть нашу функцию в компонент редактора:
Отлично, у нас есть обработка стандартных сочетаний клавиш. Но мы пойдем дальше и добавим свою комбинацию для нашего произвольного стиля текста ACCENT. Для начала расширим тип стандартных команд, чтобы ts на нас не ругался:
Далее создадим функцию для обработки нажатия клавиш:
Обратите внимание, что мы используем функцию getDefaultKeyBinding. Именно она содержит логику по стандартным сочетаниям клавиш. Еще мы воспользовались утилитой KeyBindingUtil.hasCommandModifier для того, чтобы определять, когда пользователь зажал командную клавишу: ctrl или cmd. Таким образом, при нажатии клавиш q + ctrl или q + cmd будет выполнена команда accent. Теперь нужно ее обработать в handleKeyCommand:
Так мы можем добавлять произвольные сочетания клавиш.
9. Экспорт/ Импорт HTML в редактор
Неотъемлемой частью текстового редактора является возможность экспорта и импорта данных. В Draft.js есть функция convertToRaw, которая позволяет выгрузить json с данными о всем контенте.
На основе этих данных можно сформировать HTML. Побродив по просторам сети и npm, я нашел несколько пакетов, которые позволяли подробно указать, как конвертировать контент в HTML и из HTML. Взвесив все за и против, я остановился на пакете draft-convert (который мы установили при сетапе проекта), так как он позволял удобно реализовать желаемые возможности.
Создадим файл convert.tsx — в нем мы объявим функции для конвертирования состояния редактора в HTML и обратно.
Создадим функцию конвертирования состояния редактора в HTML. В ней мы опишем правила, по которым хотим конвертировать данные редактора в разметку:
Чтобы воспользоваться нашим конвертером, создадим функцию toHtml:
И для примера добавим кнопку, которая будет выводить сгенерированный HTML в консоль:
Отлично, теперь мы можем экспортировать HTML из нашего редактора. Теперь добавим возможность импорта первоначального контента. Опишем правила конвертации HTML в данные редактора:
Теперь подключим конвертер в HTML к редактору. Для этого воспользуемся стандартным методом EditorState.createWithContent и доработаем EditorApi:
Теперь нам остается только передать HTML и ура! Наш редактор умеет загружаться с предустановленным контентом.
10. Вместо заключения
Спасибо за внимание!
Прогресс не стоит на месте, с каждым днем появляются все более новые и навороченные api и библиотеки. В статье я постарался показать, как в свое время я решал данную задачку. Правда, в моем случае на проекте был подключен Mobx, и все возможности хука useEditor были реализованы в виде класса. Но, так как задача довольно обширная, я решил не перегружать статью и использовать стандартные и всеми известные хуки React.js.
Полный код из статьи можно найти по этой ссылке.
Если вы тоже решали подобные задачи, поделитесь в комментариях — какими инструментами вы пользовались?
Файлы JS для этих компонентов не включены в пакет библиотеки и могут быть взяты из:
Библиотека Webix поддерживает интеграцию популярных текстовых редакторов в приложение с помощью собственных компонентов. На данный момент вы можете добавить следующие текстовые редакторы:
Чтобы встроить любой из редакторов на вашу веб-страницу, вы должны сослаться не только на Webix, но и на специальный файл JavaScript из папки компонентов. Этот файл подключится к выбранному редактору и загрузит дополнительные файлы к нему.
Обратите внимание, в примерах документации файлы связаны по-другому, в своем приложении используйте описанную ниже схему.
Задать путь к компоненту
Вы можете задать путь к источнику нужного редактора на CDN. Существуют три способа сделать это:
- с помощью свойства cdn в конфигурации компонента. Этот способ позволяет задать путь к конкретной версии нужной библиотеки или локальному CDN;
- не задавая путь вообще. В этом случае будет использован официальный CDN компонента или глобальный cdnjs (если источник компонента там присутствует);
- напрямую включив все файлы на страницу компонента. В этом случае необходимо задать значение false свойству cdn, чтобы избежать возможных конфликтов с версией компонента, включенной по умолчанию.
Конфигурация редактора
У каждого стороннего редактора есть свое API. Если вы хотите использовать его для настройки редактора, получите объект редактора с помощью метода getEditor().
У метода есть необязательный параметр waitEditor. Если для него установлено true , метод вернет промис, который позволит подождать готовности редактора, после чего использовать его свойства, например:
Ссылки на API каждого из редакторов в описаниях ниже.
Текстовый редактор Ace
Вы можете скачать файл JS для текстового редактора Ace из github.
Ace - это редактор встраиваемого кода, написанный на JavaScript. Распространяется по лицензиям BSD и легко встраивается в любую веб-страницу или JS приложение.
Пример по теме: Ace Editor
Инициализация
Подключите редактор в HTML файле:
Создайте экземпляр редактора на странице следующим образом:
Текстовый редактор NicEdit
Вы можете скачать файл JS для текстового редактора NicEdit Editor из github.
NicEdit - это простой и быстрый WYSIWYG редактор для веб-сайтов. Будучи очень легким, он делает любой элемент/контейнер HTML редактируемым или преобразует стандартные текстовые области в поля редактирования.
Инициализация
Подключите редактор в HTML файле:
Создайте экземпляр редактора на странице следующим образом:
Текстовый редактор TinyMCE 4
Вы можете скачать файл JS для текстового редактора TinyMCE Editor из github.
TinyMCE - это независимы от платформы веб-редактор JavaScript HTML WYSIWYG. Может конвертировать поля HTML TEXTAREA или другие элементы HTML в экземпляры редактора.
Инициализация
Подключите редактор в HTML файле:
Создайте экземпляр редактора на странице следующим образом:
Настройка редактора
Для работы со свойствами конфигурации TinyMCE, используйте свойство config:
Текстовый редактор TinyMCE 5
Вы можете скачать файл JS для текстового редактора TinyMCE 5 Editor из github.
Поскольку версия 5 редактора TinyMCE Editor не имеет полной обратной совместимости, Webix предоставляет для нее отдельную интеграцию.
Инициализация
Инициализация и настройки редактора схожи с 4-ой версией:
Подключите редактор в HTML файле:
Создайте экземпляр редактора на странице следующим образом:
Текстовый редактор CodeMirror
Вы можете скачать файл JS для CodeMirror из github.
CodeMirror - это компонент JavaScript, который предоставляет редактор кода в браузере. Если режим доступен для вашего языка программирования, редактор подсветит код и при желании обозначит отступы.
Инициализация
Подключите редактор в HTML файле:
Создайте экземпляр редактора на странице следующим образом:
Для обозначения языка кода, появилось дополнительное свойство mode.
Текстовый редактор CKEditor 4
Вы можете скачать файл JS для текстового редактора CKEditor 4 из github.
CKEditor 4 - это готовый к использованию редактор WYSIWYG, который привносит функции текстового процессора непосредственно на ваши веб-страницы. Он подходит для редактирования простых текстов, а также для разметки HTML.
Инициализация
Подключите редактор в HTML файле:
Текстовый редактор CKEditor 5
Вы можете скачать файл JS для текстового редактора CKEditor из github.
Сборка CKEditor 5 содержит 4 готовых к использованию редакторов форматированного текста. Библиотека Webix использует один из них - Document editor. Редактор Document editor (DecoupledEditor) ориентирован на редактирование текста средствами схожими на привычные инструменты Word. Редактор отлично подходит для создания документов, которые впоследствии будут распечатаны или экспортированы в PDF.
Внешний вид по умолчанию для редактора напоминает режим Classic. Чтобы применить стиль для документов (подробнее о работе с внешним видом), задайте настройку mode:"document" в конфигурации компонента и укажите нужный CSS. В этом случае, внешний вид будет основан на следующих классах:
- webix_ck_toolbar (контейнер тулбара),
- webix_ck_body (родительский контейнер редактора - используется для отступов в "документе"),
- webix_ck_editor (контейнер редактора).
Инициализация
Подключите редактор в HTML файле:
Создайте экземпляр файла на странице следующим образом:
Monaco
Вы можете скачать файл JS для редактора Monaco Editor из github.
Monaco Editor - это редактор кода, поддерживаемый VS Code. Лицензируется по MIT, поддерживает IE 11, Edge, Chrome, Firefox, Safari и Opera. Редактор Monaco не поддерживается в мобильных браузерах и мобильных веб-платформах.
Инициализация
Подключите редактор в HTML файл:
Создайте экземпляр редактора на странице следующим образом:
Редактор Rich Text
Вы можете скачать файл JS для редактора Rich Text из github.
RichText - это полностью настраиваемый редактор JavaScript с поддержкой HTML и markdown в качестве форматов для ввода и вывода.
Наша задача — внедрить красивый и надежный текстовый редактор в React-приложение. Он позволит пользователю писать статьи/рассказы так же, как если бы он это делал в Medium, Google Docs или любом другом редакторе, который поддерживает следующие функции:
- блочное форматирование (обычный текст, заголовки H1, H2 и т. д.);
- строчное форматирование (жирный шрифт, подчеркивание, курсив и т. д.);
- вставку ссылок и изображений или даже упорядоченных и неупорядоченных списков элементов.
Мы также увидим, как можно получить доступ к тексту, который вставил пользователь, вместе с примененным форматированием, в виде HTML.
Мы будем использовать библиотеку, в которую встроен фреймворк DraftJS, разработанный компанией Facebook. Говоря простым языком, DraftJS — это “фреймворк для редактора форматированного текста на React” (из официальной документации). Чтобы упростить реализацию редактора с помощью этого фреймворка, можно воспользоваться оберточной библиотекой: react-draft-wysiwyg.
Wysiwyg означает What you see is what you get (“Что видишь, то и получаешь”), и это идеальное описание для подобного редактора. Пользователь применяет к тексту определенное форматирование и таким образом определяет, как будет выглядеть его статья/рассказ впоследствии (например, когда текст будет опубликован на сайте).
Сначала нужно добавить необходимые зависимости:
Поскольку эта библиотека включает в себя вышеупомянутый фреймворк, нужно добавить и то, и другое в качестве зависимостей в проект.
Приступить к работе и добавить компонент Editor в проект очень просто:
Не забудьте про импорт CSS — в противном случае у вас не будет применен стиль по умолчанию, и вы потратите 15 минут, пытаясь понять, из-за чего возникла проблема
В приведенном выше фрагменте мы передаем два обязательных свойства, чтобы редактор можно было использовать. Объект editorState — это EditorState , который содержит (как указано в документации):
- текущее состояние содержимого текста;
- текущее состояние выбора;
- полностью оформленное представление содержимого;
- стеки отмены/повтора;
- последний тип изменений, внесенных в содержимое.
Для преобразования внутреннего состояния редактора в HTML понадобится другая библиотека. Мы обсудим это ниже.
Разумеется, нам нужно красивое, современное веб-приложение, а интерфейсу по умолчанию нужны доработки. Не волнуйтесь — сейчас мы рассмотрим план действий по улучшению редактора.
Стандартный вид редактора
Вот что нужно сделать.
- Полностью изменить внешний вид панели инструментов.
- Применить пользовательские иконки.
- Разделить опции, которые видят пользователи настольных ПК и пользователи мобильных устройств.
- Стилизовать выпадающие и всплывающие окна.
Ввод данных с приведенного выше скриншота будет выглядеть следующим образом:
Прежде всего, посмотрим, как настроить параметры. Добавляем свойство toolbar в компонент Editor. Для этого используйте следующий код:
В документации все описано довольно подробно, но не хватает некоторых пунктов. Вот несколько конкретных советов по работе с этим редактором.
Сначала посмотрим, как можно настроить встроенную стилизацию редактора (какие стили можно применить к тексту) и как отобразить внешний вид этих опций в пользовательском интерфейсе.
- Кроме полужирного шрифта, курсива и подчеркивания, вы также можете использовать зачеркнутый шрифт, моноширинный шрифт, надстрочные и подстрочные знаки.
- Вы можете отображать опции в выпадающем списке или распределить их по панели инструментов.
- Для каждой опции встроенного редактирования вы также можете предоставить собственную иконку SVG.
- Иконка будет импортирована в таком виде:
Вы можете также настроить другие поля объекта панели инструментов:
В документации эти опции даны вместе с объяснениями, поэтому не будем останавливаться на них подробно. Настройка каждой из них аналогична настройке опции inline .
Теперь рассмотрим более сложный вариант. Иногда при вставке изображений можно столкнуться с проблемами.
Очень важно установить параметр previewImage на true . В противном случае во всплывающем окне, где вы выбрали изображение, будет отображаться URL, а не само изображение. Скорее всего, с остальными опциями вы легко разберетесь. А как насчет uploadCallback ?
Самый важный момент тут — вернуть промис, обратный вызов resolve которого вернет URL-адрес изображения, указанного в поле link .
В конце туториала, с целью сохранения чистоты и детализации демонстрации, рассмотрим, как получить HTML-эквивалент состояния ввода.
Для этого потребуется добавить другую библиотеку. Здесь есть несколько вариантов. Воспользуемся draft-convert. Метод convertToHtml вернет то, что было введено в редактор в виде HTML.
Здесь editorState инстанцируется следующим образом:
Мы также можем настроить HTML-вывод метода convertToHtml с помощью следующего кода:
Выше используется переопределение, потому что в библиотеке при вставке изображения выводилось и больше ничего! Теперь вывод правильный — .
Мы рассмотрели основные шаги по реализации редактора форматированного текста. Надеемся, что эта статья была полезна для вас. Спасибо за прочтение!
Довольно часто для моих проектов требуется надежный wysiwyg редактор для форматирования статей и различной сложности текстов. Ниже список наиболее интересных на мой взгляд решений.
FroalaEditor
Простой и легковесный, с богатым API, адаптированный под огромное количество фреймфорков он также оснащен мощным защитным механизмом против атак XSS.
ContentTools
ContentTools - небольшой и красивый редактор контента. В библиотеке не используется какой-либо JavaScript-фреймворк или библиотека (даже jQuery), но отлично работает с любым из них. Пакет ContentTools состоит из 5 библиотек, каждый из которых может использоваться независимо. Он разработан, чтобы его было легко расширить.
TinyMCE
TinyMCE - независимый от платформы веб-интерфейс JavaScript HTML WYSIWYG. Это позволяет вам конвертировать поля текстовой области HTML или другие элементы HTML в экземпляры редакторов. Вы можете загружать и управлять файлами на Microsoft Azure, Google Диске, Amazon S3, DropBox и других. Он следует спецификациям WAI-ARIA, что делает его совместимым с программами чтения с экрана, такими как JAWS и NVDA. Существует также корпоративное решение, в котором вы получаете приоритетную поддержку.
Summernote
Summernote - текстовый редактор, основанный на Bootstrap. Для него доступны различные темы, и они работают от Bootswatch. Существует также версия, конвертированная в материальную тему MaterialNote
Quill
Мощный и с богатым API тектовый редактор, в то же время очень легковесный.
MediumEditor
CKEditor4
CKEditor - это готовый к использованию текстовый редактор HTML, предназначенный для упрощения создания веб-контента. Он привносит общие функции текстовых процессоров прямо на ваши веб-страницы.
Redactor
Redactor - быстрый, мощный и расширяемый редактор с группой поддержки качества. Он существует уже 7 лет и находится в стадии активного развития. Он также автоматически загружает изображения в Amazon S3.
Я надеюсь, что этот список поможет вам выбрать хороший текстовый редактор для вашего проекта и сэкономить время на поиске плагина, который наилучшим образом соответствует вашим потребностям.
Читайте также: