работа wisiwing

[vanoha]

Уважаемые товарищи асы. Прошу вас объяснить или хотя бы показать направления куда копать...
Заинтересовался по поводу принципа работы wisiwing, но не как не могу понять как могут отражаться стили и картинки в textarea или вводится текст в div (даже при помощи js)... Я так понимаю "собака зарыта" не так уж глубоко, но до меня дойти не может... В нэте так и не смог найти хоть какой то материал по принципал работы данной "штуковины". Если есть спецы, можно ли как то кратко рассказать как это работает?

[m1lk1way]

С чего вы взяли, что там картинка внутри textarea?) Попробуйте на простом примере - ВК, проинспектируйте поле для ввода сообщения. Там вообще нету не инпутов не textarea, там все из простых div состоит, однако и текст можно вводить и картинки запихивать =)
Скорее вам нужны дивы с contentEditable атрибутом. покопайте в эту сторону.
Надеюсь, поставил вас на рельсы

[vanoha]

m1lk1way, спасибо что хоть кто то откликнулся...
Да, я тоже наткнулся на contenteditable="true", однако попробовав что то поменять в диве (кроме текста) при помощи js, ну например картинку вставить или цвет текста поменять, почему то все тэги отображаются как текст...

[vanoha]

Пардон, это я чуть накосячил... Ну теперь направление понял, осталось разобраться с курсором и выделенным текстом...

[m1lk1way]

vanoha,
есть такая штука в js - selection. Получить пользовательское выделение(если браузер не IE) можно хоть сейчас, выделив что угодно на сайте и в консоли - window.getSelection().toString()
Вообще можно кросс-браузерно и об этом вот тут
ну а получив выделение, очень легко его заменять на нужный нам текст.
К примеру получив выделенный текст на входе - дать, к примеру, тот же выделенный текст на выходе, только обернутый в любой другой тег.
Насчет выделения вроде разжевал, да в рот положил - глотайте теперь.
UPD
Быстрое, но точное гугление и проблема с курсором решается
Там с примером. Не стесняйтесь задавать вопросы если что-то по коду не ясно.

[vanoha]

Что я делаю не так?

function Strong(thisob){
	var PosStart = 0, PosEnd=0, sel, range;
	if (window.getSelection) { 
		sel = window.getSelection();
		if (sel.rangeCount){ 
			range = sel.getRangeAt(0);
		  	if (range.commonAncestorContainer.parentNode == thisob){
				PosStart = range.startOffset;
				PosEnd = range.endOffset;
			}
      	}
    }
	var dovs = $(thisob).html().slice(0, PosStart);
	var posvs = $(thisob).html().slice(PosEnd);
	$(thisob).html(dovs+"<strong>"+range.toString()+"</strong>"+posvs);
}

[vanoha]

Не ужели ни одного профи не может подсказать? Дело в том, что если е выделил слово в конце предложения, а затем слово где то в середине, то слово из середины перепрыгивает почти в смое начало предложения. Почему так происходит? Может мне кто нибудь объяснить?

[vanoha]

m1lk1way, очень жду вашей помощи...