Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   wysiwyg редактор своими руками (https://javascript.ru/forum/events/33696-wysiwyg-redaktor-svoimi-rukami.html)

platedz 04.12.2012 01:51

wysiwyg редактор своими руками
 
В принципе основной вопрос заключается в том, как же это можно реализовать как-то универсально. Т.е. О том как с помощью exec команд, я в общем и целом знаю, но этот способ удобен только на первый взгляд, в интернете таких примеров довольно много, но вот если мне скажем нужно добавить что-то свое, а самое главное, что если мне нужно изменить скажем цвет у текста, которому уже назначен какой-то цвет. Как это все пересчитать, определить свойства у родителей и тд.
Т.е. я хочу сделать обертку, скажем <span></span>, назначить скажем цвет, шрифт, и тд. Проверить нет ли конфликтов в свойствах с родителями.
Раньше встречал несколько интересных статей на эту тему, но теперь к сожалению не могу найти.
Подскажите, пожалуйста, уважаемые форумчане.

danik.js 04.12.2012 08:32

Цитата:

Сообщение от platedz
, как же это можно реализовать как-то универсально

Это будет трудно. Кроссбраузерный wysiwyg -за пределами реальности ))
Хотя простенький может и можно сделать.

platedz, так в чем конкретно вопрос? Берите да делайте - определяйте свойства родителей, пересчитывайте.

schmetterling 04.12.2012 13:09

platedz, вам поможет свойство contenteditable. И, возможно, вот эта статья:
http://habrahabr.ru/post/38077/

platedz 04.12.2012 13:23

Спасибо, конечно, но это немного не то.
Т.е. как вставить, я понимаю, а вот как определить, что и где вставлено, как убрать лишние атрибуты, те. если я в 12345 оберну в span 123 и добавлю к нему стиль style="color: #fff;", а затем оберну 34 и добавлю ему span="color: #aaa;" Как переместить закрывающий и открывающий тег, и самое главное, если я добавлю span="color:#aaa;" еще и backgound: #fff;
Где-то рассмативались эти вопросы, но никак не могу найти где. Если кто-то подскажет, буду крайне признателен.

schmetterling 05.12.2012 10:05

platedz, тогда вам нужно гуглить ещё и о Range-объектах. Вам не нужно текстовую вёрстку самому менять ни в коем случае) Просто указываете границы (или берёте их из выделения), создаёте Range-объект, а потом оборачиваете его в нужный span (спец. методом surroundContent).
Вот статья:
http://habrahabr.ru/post/55922/

Правда, эти объекты нативно не поддерживаются в ie < 9, но есть решение от гугла, с которой они поддерживаться будут:
http://code.google.com/p/ierange/

cyber 05.12.2012 10:34

schmetterling, мне кажется про Range это будет лучше http://learn.javascript.ru/vydelenie...ge-i-selection

schmetterling 05.12.2012 11:40

cyber, ну, что читал -- на то и кинул.

platedz 05.12.2012 15:51

Большое спасибо, буду изучать.

cyber 05.12.2012 15:53

schmetterling, кстати статья на хабре и учебника одинаковая?О_о
интересно , кто написал оригинал)

schmetterling 05.12.2012 17:02

Цитата:

Сообщение от cyber
schmetterling, кстати статья на хабре и учебника одинаковая?О_о
интересно , кто написал оригинал)

Ну, статья на хабре датирована 2009-м годом, а по вашей ссылке -- 2012-м)


Часовой пояс GMT +3, время: 02:08.