Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Создание

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
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Сергей Татаринцев — Тестирование CSS-регрессий с Gemini
Next

0

Share

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

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Создание 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

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

Views

Total views

624

On Slideshare

0

From embeds

0

Number of embeds

20

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×