РИТ++ 2017 завершён!

Разработка Rich Text Editor: проблемы и решенияПриложения

Доклад принят в программу конференции
Егор Яковишен
Setka

Фронтенд-тимлид, разработчик Setka Editor — веб-редактора для создания материалов со сложной версткой. Автор и преподаватель курсов по JavaScript в Moscow Coding School и Skillbox.

Тезисы

Краткая история редактирования текста в браузерах. Родовые проблемы WYSIWYG-редакторов. Типы и функции современных веб-редакторов.

Обработка различных способов ввода (клавиатура, голос, copy&paste, autocomplete/autocorrect, gesture input). Проблемы с использованием contenteditable и execCommand. Браузерные API: Selection, Input Method Editor, Clipboard, MutationObserver, CompositionEvents. Спецификация W3C Input Events.

Хранение состояния документа (document state): модель данных, виды сущностей, рендеринг в разных форматах, семантика HTML-кода. Способы изоляции CSS в редакторе (iframe, БЭМ-нотация, CSS reset, Shadow DOM). Привычный UX: выделение текста, copy&paste, горячие клавиши, undo/redo. Адаптация контента под разные устройства и экраны. Многопользовательское редактирование и синхронизация изменений. Работа в оффлайн-режиме.

Public API редактора и подключение плагинов. Примеры современных редакторов: Quill от Salesforce, Trix от Basecamp, Draft.js от Facebook. Обзор крупных проектов: Google Docs, iCloud Pages, Office 365.

Будущее rich text editing.

Браузеры
,
Фронтенд / другое
,
Дизайн-системы
,
ES.Next

Другие доклады секции Приложения