работа wisiwing
 

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

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

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

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

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

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

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);
}

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

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