<script>
// Допустим, что нам известен id нужного тега textarea
var Textarea = document.getElementById("message");
var Container = document.createElement("DIV");
// Добавим контейнер к родителю текстарии, потом перенесем ее внутрь контейнера и скроем
Textarea.parentNode.insertBefore(Container, Textarea);
Container.appendChild(Textarea);
Textarea.style.display = 'none';
// Создадим фрейм и добавим его в контейнер редактора
var iframe = "<iframe id='txt-frame' class='textarea' 'src=\"javascript: document.open(); document.domain='" + document.domain + "'; document.close();\" frameborder='0'></iframe>";
Container.innerHTML = iframe + Container.innerHTML;
var Frame = Container.childNodes[0];
// Хитрое определение IE ;)
var isIE = /*@cc_on!@*/false;
// Выделим документ фрейма в отдельную переменную
var FrameDoc = isIE ? Frame.contentWindow.document : Frame.contentDocument;
FrameDoc.open();
// Если содержимое тега body будет пустым, в FF курсор станет каким-то через-чур маленьким.
// Чтобы этого избежать, добавим & nbsp;
FrameDoc.write('<html><head><style>body{ margin:0; padding:8px; word-wrap:break-word; }</style></head><body>'+ Textarea.value +' </body></html>');
FrameDoc.close();
FrameDoc.designMode = "on";
Frame.contentWindow.focus();
function addImage(src)
{
// Если в IE не установить фокус на окне редактируемого фрейма,
// то в дальнейшем он может вставить код наверх вашей страницы, а не во фрейм ;)
Frame.contentWindow.focus();
var SelectionRange = isIE ? FrameDoc.selection.createRange() : Frame.contentWindow.getSelection().getRangeAt(0);
var html = "<img src='" + src + "' />";
if (isIE) {
// тут все просто
SelectionRange.pasteHTML(html);
} else {
// для остальных используем вспомогательный тег
SelectionRange.deleteContents();
var el = document.createElement("SPAN");
FrameDoc.getElementsByTagName("BODY")[0].appendChild(el);
// Firefox не поймет, если вы сразу замените outerHTML. В версиях ниже 3-ей такое свойство вообще у него отсутствует.
el.innerHTML = html;
SelectionRange.insertNode(el);
el.outerHTML = html;
}
}
</script>
