JSFiddle - React, Tailwind, and code Playground

by Anton Kolesnikov

HTML

<h2>Awesome WYSIWYG</h2>

<textarea name="txt" id="txt">This is Awesome text in Awesome WYSIWYG! :-)</textarea>
<input type="button" value="*Awesome button*" id="btn"></input>
<input type="button" value="**Awesome button**" id="btn_2"></input>

CSS

body {
    font-family:"Helvetica";
}
#txt {
    width: 100%;
    height: 150px;
}
#btn, #btn_2 {
    width: 48%;
    margin: 0 2% 0 0;
    height: 38px;
    float: left;;
}

JavaScript

var elBtn = document.getElementById('btn');
elBtn.onclick = function() { insertTag('txt', '*', '*') };
var elBtn = document.getElementById('btn_2');
elBtn.onclick = function() { insertTag('txt', '**', '**') }

function insertTag(text_name, tag_start, tag_end) {

    // For Chrome

    // Берем объект
    var areaText = document.getElementsByName(text_name).item(0);
    
    // Если что-то выделено ...
    if( document.getSelection ) {
        
        // Берем все, что выделения ...
        areaText.value = areaText.value.substring(0,areaText.selectionStart) +
        
        // ...вставляем открывающий тег ...
        tag_start +
        
        // ... вставляет выделенный текст ...
        areaText.value.substring(areaText.selectionStart, areaText.selectionEnd) +
        
        // ... вставляем закрывающий тег ...
        tag_end +
            
        // ... вставляем оставшуюся часть текста
        areaText.value.substring(areaText.selectionEnd, areaText.value.length);
    }
}