Necesito hacer el texto seleccionado en negrita/cursiva/subrayado usando javascript, y también guardar y recuperar el mismo usando C#

Question

Necesito hacer que el texto seleccionado de cuadro de texto sea negrita/cursiva/subrayado usando javascript. Para eso estoy usando el siguiente código.

<img src="~/images/Bold" alt="Bold" onclick="changeFont('TextBox1','b');" /> 
<img src="~/images/Italic" alt="Italic" onclick="changeFont('TextBox1','i');" /> 
<img src="~/images/Underline" alt="Underline" onclick="changeFont('TextBox1','u');" /> 

<script type="text/javascript" language="javascript"> 
    function changeFont(txt, change) { 
     if (change == 'b') { 
      if (document.getElementById(txt).style.fontWeight == 'bold') 
       document.getElementById(txt).style.fontWeight = 'normal'; 
      else 
       document.getElementById(txt).style.fontWeight = 'bold'; 
     } 
     else if (change == 'i') { 
      if (document.getElementById(txt).style.fontStyle == 'italic') 
       document.getElementById(txt).style.fontStyle = 'normal'; 
      else 
       document.getElementById(txt).style.fontStyle = 'italic'; 
     } 
     else { 
      if (document.getElementById(txt).style.textDecoration == 'underline') 
       document.getElementById(txt).style.textDecoration = 'none'; 
      else 
       document.getElementById(txt).style.textDecoration = 'underline'; 
     } 
    } 
</script> 

Pero la cuestión aquí es, cuando hago clic en la imagen negrita su haciendo que todo el texto en negrita, pero no el texto seleccionado. Tampoco funciona para las otras dos imágenes.

Mientras se guarda el texto del cuadro de texto no estoy en condiciones de obtener el texto que incluye etiquetas HTML, incluso después de probar con

document.getElementById('TextBox1').innerHTML; 

soy capaz de obtener sólo el valor del cuadro de texto.

¿Hay alguna manera de guardar y recuperar la misma utilizando JavaScript o C#

gracias de antemano SC

Answer 1

Aquí es una pregunta que responde a su problema de conseguir el texto resaltado How to get selected text in textarea?

Al hacer que el texto seleccionado sea negrita, necesitaría usar etiquetas html o algo así como bbcode y analizarlo en html cuando lo imprima en una página.

EDIT: Here is a page that shows the jquery plugin "fieldselection" in action.

EDIT 2: Aquí está un ejemplo de cómo lo habría hecho esto: jsfiddle link

El HTML:

<input id="bold" type="button" value="B" /> 
<br /> 
<textarea id="editor"></textarea> 

<div id="resultAsHtml"></div> 
<br /> 
<div id="resultAsText"></div> 

El Javascript (jQuery) código:

$(document).ready(function() { 

    $("#editor").keyup(Update); 

    function Update(){ 
     var text = $(this).val(); 
     var result = ParseToHtml(text); 
     $("#resultAsHtml").html(result); 
     $("#resultAsText").text(result); 
    } 

    $("#bold").click(function(){ 
     var range = $("#editor").getSelection(); 
     var textToReplaceWith = "[b]"+ range.text + "[/b]"; 
     $("#editor").replaceSelection(textToReplaceWith , true); 

     var text = $("#editor").val(); 
     var result = ParseToHtml(text); 
     $("#resultAsHtml").html(result); 
     $("#resultAsText").text(result); 
    }); 

    function ParseToHtml(text) { 
     text = text.replace("[b]", "<b>"); 
     text = text.replace("[/b]", "</b>"); 
     text = text.replace(" ","&nbsp;"); 
     text = text.replace("\n","</br>"); 
     return text; 
    } 

    $("#bold").replaceSelection("[b]" + $("#editor").getSelection() + "[/b]", true); 
}); 

Answer 2

document.execCommand ("negrita", falso, nulo); esto es la tecnología más simple que funcionó para mí en todos los navegadores ...