Obtenga todo el texto antes de SelectionStart y después de SelectionEnd

Estoy creando un editor de texto desde cero.

código para ponerse en negrita

$('#bold').click(function(){ var start = window.getSelection().toString(); var bolded = '' + start + ''; var cursorPositionBegin = $('#TextEditor').prop("selectionStart"); var cursorPositionEnd = $('#TextEditor').prop("selectionEnd"); // to check alert(bolded); }) 

CÓDIGO HTML

 

Cuando hago clic en #bold para un conjunto seleccionado de caracteres, quiero agregar caracteres en #TextEditor. Pensé que tal vez obtener la posición inicial y final del cursor podría ayudar a separar y unir el comienzo y el final junto con los caracteres para formar lo que necesito.

Yo tambien uso jQuery

[actualización 1] ¿O hay un método alternativo para hacer lo que necesito? [actualización 2] agregó contenteditable="true" a div donde se colocó la ID de #TextEditor

Tu ayuda será apreciada.

Como @weBBer dijo, no podrá agregar tags dentro del elemento textarea use div con el atributo contenteditable = “true” en su lugar

 $('#bold').click(function(){ var string = window.getSelection().toString(); var bolded = '' + string + ''; var selC, range; if (window.getSelection) { selC = window.getSelection(); if (selC.rangeCount) { range = selC.getRangeAt(0); range.deleteContents(); range.insertNode(document.createTextNode(bolded)); } } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); range.text = bolded; } });