JSFiddle - React, Tailwind, and code Playground

by magneto903

HTML

<textarea id="test" >hhhhhhhh</textarea>

CSS

textarea {
  border: 2px solid grey;
}

JavaScript

var Textarea = document.getElementById("test"); 
var Container = document.createElement("DIV");

// Добавим контейнер к родителю текстарии, потом перенесем ее внутрь контейнера и скроем
Textarea.parentNode.insertBefore(Container, Textarea); 
Container.appendChild(Textarea);
Textarea.style.display = 'none';

// Создадим фрейм и добавим его в контейнер редактора
var iframe = "<iframe style='width: 100%; height: 100%;' 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></head><body>'+ Textarea.value +'& nbsp;</body></html>');
FrameDoc.close();
FrameDoc.designMode = "on";

FrameDoc.execCommand("Strikethrough", 'bold');

// Если в IE не установить фокус на окне редактируемого фрейма, 
// то в дальнейшем он может вставить код наверх вашей страницы, а не во фрейм ;)
Frame.contentWindow.focus();
var SelectionRange = isIE ? FrameDoc.selection.createRange() : Frame.contentWindow.getSelection().getRangeAt(0);

/*
// вставим картинку
var html = "<img src='mypicture.gif' />";

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