JSFiddle - React, Tailwind, and code Playground

by Zero Fx

HTML

<!doctype html>
<html lang="ru">
<head>
    <title>xxx</title>
</head>
<body>



<textarea id="txt" placeholder="Ваше сообщение здесь!"></textarea>
<span onClick="addImage('http://hashcode.ru/upfiles/logo.png');">Add image</span>


<script>
// Допустим, что нам известен id нужного тега textarea
var Textarea = document.getElementById("txt"); 
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; width:394px; word-wrap:break-word; }</style></head><body>'+ Textarea.value +'&nbsp;</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) {
        // тут все просто
       ...

CSS

.textarea
{
    height:120px;
    width:100%;
    background-color:#f0f0f0;
    border:1px solid #c6c6c6;
    word-wrap:break-word;
}
textarea
{
    width:150px;
    height:100px;
    border:1px solid black;
}
span
{
    cursor:pointer;
}