Необходимо сделать выделенный текст полужирным / курсивом / подчеркнутым с помощью javascript, а также сохранить и получить то же самое с помощью C #

Мне нужно сделать выделенный текст текстового поля полужирным / курсивом / подчеркнутым, используя javascript. Для этого я использую следующий код.

<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>

Но проблема здесь в том, что когда я нажимаю на жирное изображение, жирным шрифтом выделяется весь текст, но не выделенный текст. Это не работает и с двумя другими изображениями.

При сохранении текста текстового поля я не могу получить текст, включая теги html, даже после попытки с

document.getElementById('TextBox1').innerHTML;

Я могу получить только значение текстового поля.

Есть ли способ сохранить и получить то же самое с помощью javascript или C #

Заранее спасибо SC