Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.12.2012, 23:51
Профессор
Отправить личное сообщение для platedz Посмотреть профиль Найти все сообщения от platedz
 
Регистрация: 15.08.2012
Сообщений: 285

wysiwyg редактор своими руками
В принципе основной вопрос заключается в том, как же это можно реализовать как-то универсально. Т.е. О том как с помощью exec команд, я в общем и целом знаю, но этот способ удобен только на первый взгляд, в интернете таких примеров довольно много, но вот если мне скажем нужно добавить что-то свое, а самое главное, что если мне нужно изменить скажем цвет у текста, которому уже назначен какой-то цвет. Как это все пересчитать, определить свойства у родителей и тд.
Т.е. я хочу сделать обертку, скажем <span></span>, назначить скажем цвет, шрифт, и тд. Проверить нет ли конфликтов в свойствах с родителями.
Раньше встречал несколько интересных статей на эту тему, но теперь к сожалению не могу найти.
Подскажите, пожалуйста, уважаемые форумчане.
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2012, 06:32
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

platedz, так в чем конкретно вопрос? Берите да делайте - определяйте свойства родителей, пересчитывайте.
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2012, 11:09
Аспирант
Отправить личное сообщение для schmetterling Посмотреть профиль Найти все сообщения от schmetterling
 
Регистрация: 02.12.2012
Сообщений: 30

platedz, вам поможет свойство contenteditable. И, возможно, вот эта статья:
http://habrahabr.ru/post/38077/
Ответить с цитированием
  #4 (permalink)  
Старый 04.12.2012, 11:23
Профессор
Отправить личное сообщение для platedz Посмотреть профиль Найти все сообщения от platedz
 
Регистрация: 15.08.2012
Сообщений: 285

Спасибо, конечно, но это немного не то.
Т.е. как вставить, я понимаю, а вот как определить, что и где вставлено, как убрать лишние атрибуты, те. если я в 12345 оберну в span 123 и добавлю к нему стиль style="color: #fff;", а затем оберну 34 и добавлю ему span="color: #aaa;" Как переместить закрывающий и открывающий тег, и самое главное, если я добавлю span="color:#aaa;" еще и backgound: #fff;
Где-то рассмативались эти вопросы, но никак не могу найти где. Если кто-то подскажет, буду крайне признателен.
Ответить с цитированием
  #5 (permalink)  
Старый 05.12.2012, 08:05
Аспирант
Отправить личное сообщение для schmetterling Посмотреть профиль Найти все сообщения от schmetterling
 
Регистрация: 02.12.2012
Сообщений: 30

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

Правда, эти объекты нативно не поддерживаются в ie < 9, но есть решение от гугла, с которой они поддерживаться будут:
http://code.google.com/p/ierange/
Ответить с цитированием
  #6 (permalink)  
Старый 05.12.2012, 08:34
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

schmetterling, мне кажется про Range это будет лучше http://learn.javascript.ru/vydelenie...ge-i-selection
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #7 (permalink)  
Старый 05.12.2012, 09:40
Аспирант
Отправить личное сообщение для schmetterling Посмотреть профиль Найти все сообщения от schmetterling
 
Регистрация: 02.12.2012
Сообщений: 30

cyber, ну, что читал -- на то и кинул.
Ответить с цитированием
  #8 (permalink)  
Старый 05.12.2012, 13:51
Профессор
Отправить личное сообщение для platedz Посмотреть профиль Найти все сообщения от platedz
 
Регистрация: 15.08.2012
Сообщений: 285

Большое спасибо, буду изучать.
Ответить с цитированием
  #9 (permalink)  
Старый 05.12.2012, 13:53
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

schmetterling, кстати статья на хабре и учебника одинаковая?О_о
интересно , кто написал оригинал)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #10 (permalink)  
Старый 05.12.2012, 15:02
Аспирант
Отправить личное сообщение для schmetterling Посмотреть профиль Найти все сообщения от schmetterling
 
Регистрация: 02.12.2012
Сообщений: 30

Сообщение от cyber
schmetterling, кстати статья на хабре и учебника одинаковая?О_о
интересно , кто написал оригинал)
Ну, статья на хабре датирована 2009-м годом, а по вашей ссылке -- 2012-м)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Посоветуйте бесплатный WYSIWYG редактор с файловым менеджером Rooner Библиотеки/Тулкиты/Фреймворки 4 14.09.2012 18:10
Новый WYSIWYG редактор, идеи, предложения, советы Logo Общие вопросы Javascript 4 27.05.2011 02:24
Подскажите бесплатный WYSIWYG редактор. dark777 Общие вопросы Javascript 1 26.01.2011 08:17
ищу WYSIWYG редактор Sub-zerro Общие вопросы Javascript 4 29.12.2010 16:43
WYSIWYG редактор текста HTML страницы на javascript Дмитри Чижиков Ваши сайты и скрипты 4 14.09.2009 16:05