Rich Text Editors – одна из тех вещей, которые вы видите почти в каждом приложении, но обычно то, как они работают, отчасти абстрагируется от большинства разработчиков некоторыми библиотеками, такими как DRACKJS , Трикс или придерживаться старого старого доволен (Подробнее об этом позже). Но приятно попробовать построить его с нуля, чтобы посмотреть, как он будет работать в этих редакторах, и не рассматривать их как магию.
доволен
Довольствоваемое – это свойство, которое поддерживается большинством браузеров, которые позволяют вам сделать любой элемент редактируемым. Перейти на открыть инструменты Dev и запустите следующий фрагмент
document.getElementsByTagName("body")[0].contentEditable = true
Теперь вся страница должна стать редактируемой и даже ключевыми привязками, такими как Ctrl+b , ctrl+i , ctrl+u должно сработать. Теперь вы можете подумать, что вы закончили построить богатый текстовый редактор. Вот настоящая проблема с доволен Это не работает одинаково во всех браузерах. Поэтому, когда вы нажимаете Enter в Chrome, он добавляет новый Br Tag, находясь в Firefox, каждый добавляет абзац. Чтобы ухудшить ситуацию, когда вы вставляете немного текста с других веб -сайтов, стиль сохраняется и может привести к различным элементам DOM в разных браузерах. Когда вы решите создать мобильное приложение, он не может отображать этот DOM, сгенерированный редактором, если вы не используете WebView, что может быть плохо для производительности.
Хорошие части довольных
Довольствоваемое Дает вам возможность легко отображать богатый текст, так как это просто DOM, вы можете отображать пользовательские компоненты React внутри него (например, упоминания). Вставка действительно работает (хотя это приводит к другому DOM). И это поддерживается во многих браузерах.
Мы могли бы воспользоваться преимуществами хороших частей довольного, оставив одни свои плохие части, просто сохранив нашу собственную модель данных в JavaScript. Оставляя рендеринг до довольного. Редакторы, как DRACKJS делает это внутри.
Попытка 1
Давайте моделируем наши данные в формате Markdown. Сначала мы построим простой компонент, который имеет div Это довольно и будет иметь локальное состояние, которое отслеживает текущий текст и позицию курсора. Мы можем использовать OnKeydown на довольном, как вы бы сделали на любом текстовом вводе в React. Мы можем обрабатывать клавиши Backspace, удаление и стрелки на основе текущей позиции курсора и введенного текста. Мы также должны проверить, является ли нажатый клавиш печатным символом, и опустить его, если это не так (Alt, Shift, Capslock …). Код для этого – здесь в филиале пытаться- один Анкет Теперь, когда наш основной текстовый редактор выйдет дальше, нам нужно обрабатывать вставку.
Обработка вставки
Для обработки пасты мы проходим OnPaste атрибут довольным div и мы используем e.preventdefault (); Чтобы предотвратить вставку по умолчанию. Мы можем получить простой текст, пропуская стиль текста, чтобы быть вставленным с помощью
e.clipboardData.getData("text/plain");
тогда мы можем вручную вставить его, используя
document.execCommand('insertHTML', false, newText);
И мы также обновляем наше локальное состояние, которое содержит текст и позицию курсора. В следующем разделе мы будем обрабатывать основные функции богатого текста (жирный, курсив, подчеркивание …). А также позже мы будем создавать такие функции, как упоминания, рендеринг, компоненты реагирования внутри него.
Этот пост фактически опубликован с https://rafi993.me/posts/2019-28-07-building-rich-text-editor-part-1/
Оригинал: “https://dev.to/rafi993/building-rich-text-editor-55go”