1. Как сделать текстовый онлайн-редактор
и испортить себе жизнь
Аксёнов Василий
artyv@kontur.ru
@outring

3. Договор № 1
Рабинович Мойша Йосифович именуемый в дальнейшем
"Заказчик", в лице Рабиновича Мойши Йосифовича, действующего
на основании Устава, с одной стороны, и Шариков Полиграф
Полиграфович, именуемый в дальнейшем "Исполнитель", в лице
Шарикова Полиграфа Полиграфовича, действующего на основании
свидетельства о государственной регистрации 12 от 05.09.2008, с
другой стороны, именуемые в дальнейшем Стороны, заключили
настоящий Договор о нижеследующем…

4. Договор № 1
Рабинович Мойша Йосифович именуемый в дальнейшем
"Заказчик", в лице Рабиновича Мойши Йосифовича, действующего
на основании Устава, с одной стороны, и Шариков Полиграф
Полиграфович, именуемый в дальнейшем "Исполнитель", в лице
Шарикова Полиграфа Полиграфовича, действующего на основании
свидетельства о государственной регистрации 12 от 05.09.2008, с
другой стороны, именуемые в дальнейшем Стороны, заключили
настоящий Договор о нижеследующем…

6. Редактор в браузере?
DesignMode ContentEditable
document.designMode = 'on' <div contenteditable="true">
Editable content here
</div>
IE 5.5, Chrome 4, Safari 3.1, IE 5.5, Chrome 4, Safari
Opera 9, Firefox 2 3.1, Opera 9, Firefox 3.5

7. Проблемы?

8. Генерируемый код
Mozilla Firefox Internet Explorer
<span style="font-weight: <STRONG>Жирный текст
bold;">Жирный текст</span> </STRONG>
<span style="font-weight: <STRONG><EM><U>Жирный,
bold; font-style: italic; text- подчёркнутый и курсив!
decoration: underline;"> </U></EM></STRONG>
Жирный, подчёркнутый и
курсив!</span>

9. Универсально — хорошо
Неуниверсально — плохо
Капитан О.

10. Популярные редакторы
TinyMCE CKEditor
Всем нравится Всем нравится
Вроде работает Вроде работает
Есть документация Нет документации
 FAIL

11. Drag & Drop

13. Пользователю нужен фидбек

16. Ищем границы слов
Рабинович Мойша Йосифович именуемый в
дальнейшем "Заказчик", в лице Рабиновича
Мойши Йосифовича, действующего на
основании Устава, с одной стороны, и Шариков
Полиграф Полиграфович, именуемый в
дальнейшем "Исполнитель", в лице Шарикова
Полиграфа Полиграфовича, действующего на
основании свидетельства о государственной
регистрации 12 от 05.09.2008, с другой стороны,
именуемые в дальнейшем Стороны, заключили
настоящий Договор о нижеследующем…

17. Поиск по средней ширине буквы
Рабинович Мойша||
|| Йосифович именуемый||
|| в

18. Поиск по средней ширине буквы
Рабинович Мойша||
|| || ||
Йосифович именуемый в
|
дальнейшем "Заказчик", в лице Рабиновича |
|| | || ||
Мойши Йосифовича, действующего на
основании Устава, с одной стороны, и Шариков
Полиграф Полиграфович, именуемый в
дальнейшем "Исполнитель", в лице Шарикова
Полиграфа Полиграфовича, действующего на
основании свидетельства о государственной
регистрации 12 от 05.09.2008, с другой
стороны, именуемые в дальнейшем
Стороны, заключили настоящий Договор о
нижеследующем…

19. Нормальный способ тоже не поможет

20. Курсор = схлопнутое выделение

21. Selection API
Можно взять координаты выделенного
текста!
tinyurl.com/selcoords
Почти во всех браузерах
Кроме Opera < 10.5 и Firefox < 4

22. Бешеный курсор
Рабинович Мойша Йосифович именуемый в
дальнейшем "Заказчик", в лице Рабиновича
Мойши Йосифовича, действующего на
основании Устава, с одной стороны, и Шариков
Полиграф Полиграфович, именуемый в
дальнейшем "Исполнитель", в лице Шарикова
Полиграфа Полиграфовича, действующего на
основании свидетельства о государственной
регистрации 12 от 05.09.2008, с другой стороны,
именуемые в дальнейшем Стороны, заключили
настоящий Договор о нижеследующем…

24. iframe

25. Спасибо DesignMode
iframe

26. Отслеживаем координаты мыши

27. Bubbling

28. Bubbling

30. ReBubbling + coords fix

32. Здравствуй, Опера!

34. getElementFromPoint

35. В редакторе всё
редактируется

36. В редакторе всё
редактируется… почти

39. Отслеживаем события

40. Универсально — хорошо
Неуниверсально — плохо
Догадайтесь-ка кто!

42. Не отслеживаем события

44. Editing API спасёт мир
tinyurl.com/editapi
tinyurl.com/editapi2

45. Editing API спасёт мир?
tinyurl.com/editapi
tinyurl.com/editapi2

47. Своя модель отображения

48. Canvas
habr.ru/p/141434

49. HTML DOM API
docs.google.com

50. Google Kix View Model
Рабинович Мойша Йосифович именуемый в дальнейшем
c
"Заказчик", в лице Рабиновича Мойши Йосифовича, действующего
c
на основании Устава, с одной стороны, и Шариков Полиграф
c
Полиграфович, именуемый в дальнейшем "Исполнитель", в лице
c
Шарикова Полиграфа Полиграфовича, действующего на основании
c
свидетельства о государственной регистрации 12 от 05.09.2008, с
c
другой стороны, именуемые в дальнейшем Стороны, заключили
c
настоящий Договор c нижеследующем…
о

51. Google Kix View Model
Рабинович Мойша Йосифович именуемый в дальнейшем и потом даже
c
"Заказчик", в лице Рабиновича Мойши Йосифовича, действующего
c
на основании Устава, с одной стороны, и Шариков Полиграф
c
Полиграфович, именуемый в дальнейшем "Исполнитель", в лице
c
Шарикова Полиграфа Полиграфовича, действующего на основании
c
свидетельства о государственной регистрации 12 от 05.09.2008, с
c
другой стороны, именуемые в дальнейшем Стороны, заключили
c
настоящий Договор c нижеследующем…
о

52. Google Kix View Model
Рабинович Мойша Йосифович именуемый в дальнейшем и потом
c
даже "Заказчик", в лице Рабиновича Мойши Йосифовича,
c
действующего на основании Устава, с одной стороны, и Шариков
c
Полиграф Полиграфович, именуемый в дальнейшем "Исполнитель",
c
в лице Шарикова Полиграфа Полиграфовича, действующего на
c
основании свидетельства о государственной регистрации 12 от
c
05.09.2008, с другой стороны, именуемые в дальнейшем Стороны,
c
c
заключили настоящий Договор о нижеследующем…

53. Google Kix View Model Cursor
<div></div>

54. @outring