Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Создание

WYSIWYG-редакторов

для веба
25.08.2016
Егор Яковишен

frontend team lead
@yaplusplus
2
3
4
5
6
7
8
9
10
What You See

is

What You Get
11
FrontPage
CKEditorTinyMCE
RedactorScribe
Aloha EditorTrix
Medium.js Summernote
ProseMirror
Squire
goog.editor
Froala
Co...
Проблемы
•What You See !== What You Get
•Грязный HTML-код
•Слишком много инструментов и возможностей
•Разное поведение con...
13
14
15
16
HTML
The hobbit was a very well-to-do hobbit, and his name was Baggins.

The <a href=”http://en.wikipedia.org/wiki/The_Hob...
Задачи
•WYSIWYRG
•Чистый кроссбраузерный HTML
•Гибкая система настроек
•Адаптация под различные устройства и экраны
•Привы...
Архитектура редактора
•Пост
•Контент
•Тема
•Лэйаут
•Инструменты
19
Контент
20
Тема
21
Лэйаут
22
Виртуальный DOM
•На вход получаем DOM Node, HTML или что-то ещё
•Формируем из содержимого поста дерево элементов
•Рендерим...
Виртуальный DOM
HTML
<p class=“style_title”>Заголовок</p>
24
Virtual DOM
Paragraph
• tagName: ‘p’
• attributes:
• classNam...
Инкапсуляция стилей
•БЭМ-нотация
•Локальная очистка стилей
•Уникальные классы для каждого стиля:



stk-theme_village-2016...
Очистка HTML
26
Вставка эмбедов
27
28
Copy&Paste
29
30
31
Копирование в Trello
32
Копирование в Trello
33
Copy&Paste
•onBeforeCopy
•onBeforeCut
34
Undo / Redo
35
36
Undo / Redo
Сохранение Editor State при каждом действии пользователя:
•контент
•выделенный элемент (один или несколько)
•п...
Модульные flex-сетки
38
39
Desktop & Mobile preview
40
41
42
Инструменты
ContentEdit
43
Цифры
•91 модуль
•~330 КБ minified
•~15 000 строк кода
•4,5 месяца работы
•3 внедрения
•> 20 млн просмотров в месяц
•Время...
45
Wordpress
Егор Яковишен
FRONT-END TEAM LEAD
yakovishen@setka.io

@yaplusplus
Próxima SlideShare
Cargando en…5
×

Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33

568 visualizaciones

Publicado el

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

Publicado en: Internet
  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33

  1. 1. Создание
 WYSIWYG-редакторов
 для веба 25.08.2016 Егор Яковишен
 frontend team lead @yaplusplus
  2. 2. 2
  3. 3. 3
  4. 4. 4
  5. 5. 5
  6. 6. 6
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. 10 What You See
 is
 What You Get
  11. 11. 11 FrontPage CKEditorTinyMCE RedactorScribe Aloha EditorTrix Medium.js Summernote ProseMirror Squire goog.editor Froala ContentTools Draft.js
  12. 12. Проблемы •What You See !== What You Get •Грязный HTML-код •Слишком много инструментов и возможностей •Разное поведение contenteditable в браузерах 12
  13. 13. 13
  14. 14. 14
  15. 15. 15
  16. 16. 16
  17. 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. 18. Задачи •WYSIWYRG •Чистый кроссбраузерный HTML •Гибкая система настроек •Адаптация под различные устройства и экраны •Привычный UX: горячие клавиши, контекстное меню,
 copy&paste, undo/redo •Удобен как для редакторов, так и для дизайнеров 18
  19. 19. Архитектура редактора •Пост •Контент •Тема •Лэйаут •Инструменты 19
  20. 20. Контент 20
  21. 21. Тема 21
  22. 22. Лэйаут 22
  23. 23. Виртуальный DOM •На вход получаем DOM Node, HTML или что-то ещё •Формируем из содержимого поста дерево элементов •Рендерим пост в любом формате: HTML, Markdown, JSON… •Удобно для тестирования 23
  24. 24. Виртуальный DOM HTML <p class=“style_title”>Заголовок</p> 24 Virtual DOM Paragraph • tagName: ‘p’ • attributes: • className: ‘style_title’ • content: ‘Заголовок’
  25. 25. Инкапсуляция стилей •БЭМ-нотация •Локальная очистка стилей •Уникальные классы для каждого стиля:
 
 stk-theme_village-2016__bigtitle
 
 stk-theme_village-2016__mb2 25
  26. 26. Очистка HTML 26
  27. 27. Вставка эмбедов 27
  28. 28. 28
  29. 29. Copy&Paste 29
  30. 30. 30
  31. 31. 31
  32. 32. Копирование в Trello 32
  33. 33. Копирование в Trello 33
  34. 34. Copy&Paste •onBeforeCopy •onBeforeCut 34
  35. 35. Undo / Redo 35
  36. 36. 36
  37. 37. Undo / Redo Сохранение Editor State при каждом действии пользователя: •контент •выделенный элемент (один или несколько) •положение курсора в тексте •тема, лэйаут 37
  38. 38. Модульные flex-сетки 38
  39. 39. 39
  40. 40. Desktop & Mobile preview 40
  41. 41. 41
  42. 42. 42 Инструменты
  43. 43. ContentEdit 43
  44. 44. Цифры •91 модуль •~330 КБ minified •~15 000 строк кода •4,5 месяца работы •3 внедрения •> 20 млн просмотров в месяц •Время сборки поста: 10-60 минут 44
  45. 45. 45 Wordpress
  46. 46. Егор Яковишен FRONT-END TEAM LEAD yakovishen@setka.io
 @yaplusplus

×