how do i make a bold, italic, underline command,change text : The Official Microsoft ASP.NET Forums

Reply

young345

Member

201 Points

how do i make a bold, italic, underline command,change text

Feb 25, 2008 09:23 PM|LINK

hi,
i am trying to make my website so that when i click on a button it makes the selected text into bold or when i click another button it makes the selected text italic and finally when a thrid button is clicked it makes it underlined. i have tried searching for a way of doing this throught javascript but i cant seem to find any.

i also need to know maybe how the font can be changed from a dropdownlist of options such as arial etc

any suggestions or examples on how i can achieve this would be much appreciated as i really need to get this working,
thanks for any advice given

Reply

dprior

Participant

808 Points

151 Posts

Re: how do i make a bold, italic, underline command,change text

Feb 25, 2008 09:47 PM|LINK

When you say "selected text" do you mean the text selected by the cursor, or do you mean pre-defined text on the page? If it's predefined text on the page just put it inside an asp.net control - like a label (or panel if it makes more sense). Then you can programatically set the various styles by doing <control_id>.Style = <css style>

Please remember to mark any helpful responses as answers.

Reply

fshah

Member

230 Points

41 Posts

Re: how do i make a bold, italic, underline command,change text

Feb 25, 2008 10:09 PM|LINK

young345

Check the following Links

http://www.java2s.com/Code/JavaScript/GUI-Components/TextEditorinJavaScripttoolbarColorpickerBoldstyleetc.htm

http://www.geekpedia.com/tutorial198_Creating-a-Rich-Text-Editor-using-JavaScript.html

fshah

Please remember to click “Mark as Answer”, if it is solution to your Problem

Marked as answer by Hua-Jun Li - MSFT on Feb 28, 2008 08:13 AM

Reply

lspence

Star

11493 Points

1707 Posts

Re: how do i make a bold, italic, underline command,change text

Feb 26, 2008 02:33 AM|LINK

You can take this sample I'm providing as a starting point. It needs more work, but it might at least give you a starting point.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
        function SelectText()
        {
            var textValue = document.selection.createRange().text;
            document.form1.TextBox1.value = textValue;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Text1" runat="server" type="text" name="TextBox1" onselect="javascript:SelectText();" /> 
        <input id="Submit1" runat="server" type="submit" value="Bold" name="TextBox1" onserverclick="Submit1_ServerClick" />
        <input id="Submit2" runat="server" type="submit" value="Italic" name="TextBox1" onserverclick="Submit2_ServerClick" />
        <input id="Submit3" runat="server" type="submit" value="Underline" name="TextBox1" onserverclick="Submit3_ServerClick" /> <asp:Button
            ID="Button1" runat="server" OnClick="Button1_Click" Text="Reset TextBox" /><br />
        <br />
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem></asp:ListItem>
            <asp:ListItem>Arial</asp:ListItem>
            <asp:ListItem>Courier</asp:ListItem>
            <asp:ListItem>Courier New</asp:ListItem>
            <asp:ListItem>Georgia</asp:ListItem>
            <asp:ListItem>Lucida Console</asp:ListItem>
            <asp:ListItem>MS Sans Serif</asp:ListItem>
            <asp:ListItem>Tahoma</asp:ListItem>
            <asp:ListItem>Trebuchet MS</asp:ListItem>
            <asp:ListItem>Times New Roman</asp:ListItem>
            <asp:ListItem>Wingdings</asp:ListItem>
        </asp:DropDownList> Select Font</div>
    </form>
</body>
</html>

protected void Submit1_ServerClick(object sender, EventArgs e)
{
   Text1.Style.Add("font-weight", "bold");
}

protected void Submit2_ServerClick(object sender, EventArgs e)
{
   Text1.Style.Add("font-style", "italic");
}

protected void Submit3_ServerClick(object sender, EventArgs e)
{
   Text1.Style.Add("text-decoration", "underline");
}
    
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
   Text1.Style.Add("font-family", DropDownList1.SelectedValue);
}

protected void Button1_Click(object sender, EventArgs e)
{
   Text1.Value = string.Empty;
   DropDownList1.SelectedIndex = 0;
   Text1.Style.Add("font-weight", "normal");
   Text1.Style.Add("font-style", "normal");
   Text1.Style.Add("text-decoration", "none");
   Text1.Style.Add("font-family", "Tahoma");
}

My Blog
http://Lspence.blogspot.com

(Please MARK this post as ANSWERED, if you find it helpful)

Marked as answer by Hua-Jun Li - MSFT on Feb 28, 2008 08:14 AM

Reply

young345

Member

201 Points

720 Posts

Re: how do i make a bold, italic, underline command,change text

Feb 26, 2008 10:57 AM|LINK

thanks so much for your relpy, i have trued out your code, however when i go to run it i get the following error, do you what is the cause of it and how can i fix it? thank you

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: BC30456: 'Submit1_ServerClick' is not a member of 'ASP.default_aspx'.

Source Error:

Line 33:     <div>

Line 34:         <input id="Text1" runat="server" type="text" name="TextBox1" onselect="javascript:SelectText();" />
Line 35:         <input id="Submit1" runat="server" type="submit" value="Bold" name="TextBox1" onserverclick="Submit1_ServerClick" onclick="return Submit1_onclick()" />
Line 36:         <input id="Submit2" runat="server" type="submit" value="Italic" name="TextBox1" onserverclick="Submit2_ServerClick" onclick="return Submit2_onclick()" />
Line 37:         <input id="Submit3" runat="server" type="submit" value="Underline" name="TextBox1" onserverclick="Submit3_ServerClick" onclick="return Submit3_onclick()" /> <asp:Button

Reply

lspence

Star

11493 Points

1707 Posts

Re: how do i make a bold, italic, underline command,change text

Feb 26, 2008 11:31 AM|LINK

Remove the onclick="return .._onclick()" from each of the buttons.

My Blog
http://Lspence.blogspot.com

(Please MARK this post as ANSWERED, if you find it helpful)

Reply

young345

Member

201 Points

720 Posts

Re: how do i make a bold, italic, underline command,change text

Feb 26, 2008 04:30 PM|LINK

i tired your suggestions but then another error appeared which said the following, do u know what the problem is?

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: BC30456: 'Submit1_ServerClick' is not a member of 'ASP.default_aspx'.

Source Error:

Line 33:     <div>

Line 34:         <input id="Text1" runat="server" type="text" name="TextBox1" onselect="javascript:SelectText();" />
Line 35:         <input id="Submit1" runat="server" type="submit" value="Bold" name="TextBox1" onserverclick="Submit1_ServerClick"  />
Line 36:         <input id="Submit2" runat="server" type="submit" value="Italic" name="TextBox1" onserverclick="Submit2_ServerClick" />
Line 37:         <input id="Submit3" runat="server" type="submit" value="Underline" name="TextBox1" onserverclick="Submit3_ServerClick" />

Reply

lspence

Star

11493 Points

1707 Posts

Re: how do i make a bold, italic, underline command,change text

Feb 26, 2008 04:36 PM|LINK

Are you using the HTML Submit Button? I used it instead of the ASP.NET Button Server Control.

My Blog
http://Lspence.blogspot.com

(Please MARK this post as ANSWERED, if you find it helpful)

Reply

young345

Member

201 Points

720 Posts

Re: how do i make a bold, italic, underline command,change text

Feb 26, 2008 04:56 PM|LINK

hi,

yeah im using the submit button like you have done, i cant seem to undertsand what the problem is. i am following the code you gave me. its probably me, m not undertsanding something

Reply

young345

Member

201 Points

720 Posts

Re: how do i make a bold, italic, underline command,change text

Feb 26, 2008 04:57 PM|LINK

iv used the second website recommended and it worked a treat as it offfers me the controls i needed.

thanks for everyones help [:)]

how do i make a bold, italic, underline command,change text RSS

11 replies

young345

how do i make a bold, italic, underline command,change text

dprior

Re: how do i make a bold, italic, underline command,change text

fshah

Re: how do i make a bold, italic, underline command,change text

lspence

Re: how do i make a bold, italic, underline command,change text

young345

Re: how do i make a bold, italic, underline command,change text

Compilation Error

lspence

Re: how do i make a bold, italic, underline command,change text

young345

Re: how do i make a bold, italic, underline command,change text

Compilation Error

lspence

Re: how do i make a bold, italic, underline command,change text

young345

Re: how do i make a bold, italic, underline command,change text

young345

Re: how do i make a bold, italic, underline command,change text

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft