5

I need to make selected text of textbox bold/italic/underline using javascript. For that i am using the following code.

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

But the issue here is, when i click on bold image its making the whole text into bold but not the selected text. It´s not working for the other two images either.

While saving the text of textbox I am unable to get the text including html tags even after trying with

document.getElementById('TextBox1').innerHTML;

I am able to get only the value of textbox.

Is there any way to save and retrieve the same using javascript or C#

Thanks in advance SC

Ferruccio
  • 98,941
  • 38
  • 226
  • 299
DotnetDude
  • 101
  • 1
  • 1
  • 5
  • I just stumbled upon this thread and wanted to let you guys know that [this post on SO](http://stackoverflow.com/questions/717224/how-to-get-selected-text-in-textarea) might help you. – luk2302 Jul 15 '13 at 14:25

2 Answers2

2

Here is a question that answers your problem about getting the highlighting text How to get selected text in textarea?

About making the selected text bold you would need to use html tags or something like bbcode and parse it to html when you print it on to a page.

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

EDIT 2: Here is an example of how I would've done this: jsfiddle link

The HTML:

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

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

The javascript (jquery) code:

$(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);
});
Community
  • 1
  • 1
Joakim
  • 2,217
  • 15
  • 20
  • Hi Joakim, Thanks for teh reply. But I'm unable to get the selected text. As soon as i click on Bold image, the selected text getting unselected. Could you please help me. – DotnetDude May 11 '11 at 04:27
  • See the link I added to my answer, which displays how you can use the jquery plugin refered to in the first link in my answer. – Joakim May 11 '11 at 06:15
  • Hi Joakim, with the link they have provided, I cpould only get the selected text, but i can't format(make it bold) and put bak in the same text box. If its not possible with textbox, is there any other control in which i can format the text. Please advise. – DotnetDude May 12 '11 at 04:38
  • Updated my answer once again with an example of how you could do it. – Joakim May 12 '11 at 10:52
1

document.execCommand("bold", false, null); this is Simplest techinique which worked for me in all browsers ...

Sagar Kadam
  • 487
  • 1
  • 3
  • 10