54
Как сделать текстовый онлайн- редактор и испортить себе жизнь Аксёнов Василий [email protected] @outring

Как сделать текстовый онлайн редактор и испортить себе жизнь

Embed Size (px)

Citation preview

Page 1: Как сделать текстовый онлайн редактор и испортить себе жизнь

Как сделать текстовый онлайн-редактор и испортить себе жизнь

Аксёнов Василий[email protected]

@outring

Page 2: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 3: Как сделать текстовый онлайн редактор и испортить себе жизнь

Договор № 1

Рабинович Мойша Йосифович именуемый в дальнейшем

"Заказчик", в лице Рабиновича Мойши Йосифовича,

действующего на основании Устава, с одной стороны, и

Шариков Полиграф Полиграфович, именуемый в дальнейшем

"Исполнитель", в лице Шарикова Полиграфа Полиграфовича,

действующего на основании свидетельства о государственной

регистрации 12 от 05.09.2008, с другой стороны, именуемые в

дальнейшем Стороны, заключили настоящий Договор о

нижеследующем…

Page 4: Как сделать текстовый онлайн редактор и испортить себе жизнь

Рабинович Мойша Йосифович именуемый в дальнейшем

"Заказчик", в лице Рабиновича Мойши Йосифовича, действующего

на основании Устава, с одной стороны, и Шариков Полиграф

Полиграфович, именуемый в дальнейшем "Исполнитель", в лице

Шарикова Полиграфа Полиграфовича, действующего на основании

свидетельства о государственной регистрации 12 от 05.09.2008, с

другой стороны, именуемые в дальнейшем Стороны, заключили

настоящий Договор о нижеследующем…

Договор № 1

Page 5: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 6: Как сделать текстовый онлайн редактор и испортить себе жизнь

Редактор в браузере?

DesignMode

document.designMode = 'on'

IE 5.5, Chrome 4, Safari 3.1, Opera 9, Firefox 2

ContentEditable

<div contenteditable="true">Editable content here

</div>

IE 5.5, Chrome 4, Safari 3.1, Opera 9, Firefox 3.5

Page 7: Как сделать текстовый онлайн редактор и испортить себе жизнь

Проблемы?

Page 8: Как сделать текстовый онлайн редактор и испортить себе жизнь

Генерируемый код

Mozilla Firefox

<span style="font-weight: bold;">Жирный текст</span>

<span style="font-weight: bold; font-style: italic; text-decoration: underline;"> Жирный, подчёркнутый и курсив!</span>

Internet Explorer

<STRONG>Жирный текст </STRONG>

<STRONG><EM><U>Жирный, подчёркнутый и курсив! </U></EM></STRONG>

Page 9: Как сделать текстовый онлайн редактор и испортить себе жизнь

Универсально — хорошо

Неуниверсально — плохо

Капитан О.

Page 10: Как сделать текстовый онлайн редактор и испортить себе жизнь

Популярные редакторы

TinyMCE

Всем нравитсяВроде работает

Есть документация

CKEditor

Всем нравитсяВроде работает

Нет документации

FAIL

Page 11: Как сделать текстовый онлайн редактор и испортить себе жизнь

Drag & Drop

Page 12: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 13: Как сделать текстовый онлайн редактор и испортить себе жизнь

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

Page 14: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 15: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 16: Как сделать текстовый онлайн редактор и испортить себе жизнь

Ищем границы слов

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

Page 17: Как сделать текстовый онлайн редактор и испортить себе жизнь

Поиск по средней ширине буквы

Рабинович Мойша Йосифович именуемый в || || || ||

Page 18: Как сделать текстовый онлайн редактор и испортить себе жизнь

Поиск по средней ширине буквы

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

|| || || ||| || | || || |

Page 19: Как сделать текстовый онлайн редактор и испортить себе жизнь

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

Page 20: Как сделать текстовый онлайн редактор и испортить себе жизнь

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

Page 21: Как сделать текстовый онлайн редактор и испортить себе жизнь

Selection API

Можно взять координаты выделенного текста!

tinyurl.com/selcoordsПочти во всех браузерахКроме Opera < 10.5 и Firefox < 4

Page 22: Как сделать текстовый онлайн редактор и испортить себе жизнь

Бешеный курсор

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

Page 23: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 24: Как сделать текстовый онлайн редактор и испортить себе жизнь

iframe

Page 25: Как сделать текстовый онлайн редактор и испортить себе жизнь

Спасибо DesignMode

iframe

Page 26: Как сделать текстовый онлайн редактор и испортить себе жизнь

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

Page 27: Как сделать текстовый онлайн редактор и испортить себе жизнь

Bubbling

Page 28: Как сделать текстовый онлайн редактор и испортить себе жизнь

Bubbling

Page 29: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 30: Как сделать текстовый онлайн редактор и испортить себе жизнь

ReBubbling + coords fix

Page 31: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 32: Как сделать текстовый онлайн редактор и испортить себе жизнь

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

Page 33: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 34: Как сделать текстовый онлайн редактор и испортить себе жизнь

getElementFromPoint

Page 35: Как сделать текстовый онлайн редактор и испортить себе жизнь

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

Page 36: Как сделать текстовый онлайн редактор и испортить себе жизнь

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

Page 37: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 38: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 39: Как сделать текстовый онлайн редактор и испортить себе жизнь

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

Page 40: Как сделать текстовый онлайн редактор и испортить себе жизнь

Универсально — хорошо

Неуниверсально — плохо

Догадайтесь-ка кто!

Page 41: Как сделать текстовый онлайн редактор и испортить себе жизнь

КРУШИ ДОМА

ЛОМАЙ ЖИЗНЬ ЛЮДЯМ

Page 42: Как сделать текстовый онлайн редактор и испортить себе жизнь

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

Page 43: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 44: Как сделать текстовый онлайн редактор и испортить себе жизнь

Editing API спасёт мир

tinyurl.com/editapitinyurl.com/editapi2

Page 45: Как сделать текстовый онлайн редактор и испортить себе жизнь

Editing API спасёт мир?

tinyurl.com/editapitinyurl.com/editapi2

Page 46: Как сделать текстовый онлайн редактор и испортить себе жизнь
Page 47: Как сделать текстовый онлайн редактор и испортить себе жизнь

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

Page 48: Как сделать текстовый онлайн редактор и испортить себе жизнь

Canvas

habr.ru/p/141434

Page 49: Как сделать текстовый онлайн редактор и испортить себе жизнь

HTML DOM API

docs.google.com

Page 50: Как сделать текстовый онлайн редактор и испортить себе жизнь

Google Kix View Model

Рабинович Мойша Йосифович именуемый в дальнейшем

"Заказчик", в лице Рабиновича Мойши Йосифовича, действующего

на основании Устава, с одной стороны, и Шариков Полиграф

Полиграфович, именуемый в дальнейшем "Исполнитель", в лице

Шарикова Полиграфа Полиграфовича, действующего на основании

свидетельства о государственной регистрации 12 от 05.09.2008, с

другой стороны, именуемые в дальнейшем Стороны, заключили

настоящий Договор о нижеследующем…

c

c

c

c

c

c

c

c

Page 51: Как сделать текстовый онлайн редактор и испортить себе жизнь

Google Kix View Model

Рабинович Мойша Йосифович именуемый в дальнейшем

"Заказчик", в лице Рабиновича Мойши Йосифовича, действующего

на основании Устава, с одной стороны, и Шариков Полиграф

Полиграфович, именуемый в дальнейшем "Исполнитель", в лице

Шарикова Полиграфа Полиграфовича, действующего на основании

свидетельства о государственной регистрации 12 от 05.09.2008, с

другой стороны, именуемые в дальнейшем Стороны, заключили

настоящий Договор о нижеследующем…

c

c

c

c

c

c

c

c

и потом даже

Page 52: Как сделать текстовый онлайн редактор и испортить себе жизнь

Google Kix View Model

Рабинович Мойша Йосифович именуемый в дальнейшем и потом

даже "Заказчик", в лице Рабиновича Мойши Йосифовича,

действующего на основании Устава, с одной стороны, и Шариков

Полиграф Полиграфович, именуемый в дальнейшем "Исполнитель",

в лице Шарикова Полиграфа Полиграфовича, действующего на

основании свидетельства о государственной регистрации 12 от

05.09.2008, с другой стороны, именуемые в дальнейшем Стороны,

заключили настоящий Договор о нижеследующем…

c

c

c

c

c

c

c

c

Page 53: Как сделать текстовый онлайн редактор и испортить себе жизнь

Google Kix View Model Cursor

<div></div>

Page 54: Как сделать текстовый онлайн редактор и испортить себе жизнь

@outring