Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
•
0 likes•676 views
В 2016 году интернет-изданиям недостаточно просто писать интересные материалы, нужно быстро и качественно их оформлять и показывать на разных устройствах. Я расскажу о нашем опыте создания JS-редактора, с помощью которого ежедневно публикуются десятки постов для 3 миллионов читателей.
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
- 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
- 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
- 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
- 28. 28
- 29. Copy&Paste 29
- 30. 30
- 31. 31
- 35. Undo / Redo 35
- 36. 36
- 37. Undo / Redo Сохранение Editor State при каждом действии пользователя: •контент •выделенный элемент (один или несколько) •положение курсора в тексте •тема, лэйаут 37
- 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