В 2016 году интернет-изданиям недостаточно просто писать интересные материалы, нужно быстро и качественно их оформлять и показывать на разных устройствах. Я расскажу о нашем опыте создания JS-редактора, с помощью которого ежедневно публикуются десятки постов для 3 миллионов читателей.

1. Создание
WYSIWYG-редакторов
для веба
25.08.2016
Егор Яковишен
frontend team lead
@yaplusplus

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10
What You See
is
What You Get

11. 11
FrontPage
CKEditorTinyMCE
RedactorScribe
Aloha EditorTrix
Medium.js Summernote
ProseMirror
Squire
goog.editor
Froala
ContentTools
Draft.js

12. Проблемы
•What You See !== What You Get
•Грязный HTML-код
•Слишком много инструментов и возможностей
•Разное поведение contenteditable в браузерах
12

13. 13

14. 14

15. 15

16. 16

17. HTML
The hobbit was a very well-to-do hobbit, and his name was Baggins.
The <a href=”http://en.wikipedia.org/wiki/The_Hobbit">hobbit</a>
was a very well-to-do hobbit,
and his name was <strong><em>Baggins</em></strong>.
<strong><em>Baggins</em></strong>
<em><strong>Baggins</strong></em>
<em><strong>Bagg</strong><strong>ins</strong></em>
<em><strong>Bagg</strong></em><strong><em>ins</em></strong>
17

18. Задачи
•WYSIWYRG
•Чистый кроссбраузерный HTML
•Гибкая система настроек
•Адаптация под различные устройства и экраны
•Привычный UX: горячие клавиши, контекстное меню,
copy&paste, undo/redo
•Удобен как для редакторов, так и для дизайнеров
18

19. Архитектура редактора
•Пост
•Контент
•Тема
•Лэйаут
•Инструменты
19

20. Контент
20

21. Тема
21

22. Лэйаут
22

23. Виртуальный DOM
•На вход получаем DOM Node, HTML или что-то ещё
•Формируем из содержимого поста дерево элементов
•Рендерим пост в любом формате: HTML, Markdown, JSON…
•Удобно для тестирования
23

24. Виртуальный DOM
HTML
<p class=“style_title”>Заголовок</p>
24
Virtual DOM
Paragraph
• tagName: ‘p’
• attributes:
• className: ‘style_title’
• content: ‘Заголовок’

25. Инкапсуляция стилей
•БЭМ-нотация
•Локальная очистка стилей
•Уникальные классы для каждого стиля:
stk-theme_village-2016__bigtitle
stk-theme_village-2016__mb2
25

26. Очистка HTML
26

27. Вставка эмбедов
27

28. 28

29. Copy&Paste
29

30. 30

31. 31

32. Копирование в Trello
32

33. Копирование в Trello
33

34. Copy&Paste
•onBeforeCopy
•onBeforeCut
34

35. Undo / Redo
35

36. 36

37. Undo / Redo
Сохранение Editor State при каждом действии пользователя:
•контент
•выделенный элемент (один или несколько)
•положение курсора в тексте
•тема, лэйаут
37

38. Модульные flex-сетки
38

39. 39

40. Desktop & Mobile preview
40

41. 41

42. 42
Инструменты

43. ContentEdit
43

44. Цифры
•91 модуль
•~330 КБ minified
•~15 000 строк кода
•4,5 месяца работы
•3 внедрения
•> 20 млн просмотров в месяц
•Время сборки поста: 10-60 минут
44

45. 45
Wordpress

46. Егор Яковишен
FRONT-END TEAM LEAD
yakovishen@setka.io
@yaplusplus