Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1313
  • Last Modified:

Applying bold or italic or underline to a selection in a text area

Hi,

I was wondering if it is possible to have an area of selected text be made bold (or italic/underline - i only need 1 but all 3 would be great) and then stored in a SQL database using a escape() string over AJAX.

Currently I have a from which calls a javascript function which then AJAX's an escape() string (to keep whitespaces).

I would like to be able to display the bold in 3 ways:

1. In the text area itself as it is being made (happy for this to be in tag form)

2. In the textarea when recalled for editing (again happy for this to be in tag form)

3. As actual bold text when displayed in a standard HTML page as I display my current output, simply as a paragraph.

I am not looking for a WYSIWYG style editor or anything like that, simply the option to add bold.  If there is an easy way to size as well that would be great but a bonus.
0
Vanq69
Asked:
Vanq69
  • 2
  • 2
1 Solution
 
sunithnairCommented:
Try this code. This will add the necessary tags to the selected text inside a textarea. You can store them in database and later retrieve it which will automatically show up with tags when editing and formatted when shown in the browser as HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function formatText(el,tag)
{
    var selectedText = document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);
    if(selectedText!='')
    {
        var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
        el.value=el.value.replace(selectedText,newText)
    }
} 
</script>
</head>
<body>
<form action="" id="myForm">
<textarea name="myTextarea" rows="12" cols="50">This is just some sample text in the text area. You will be able to select some text here and click on the buttons below to add html tags to it</textarea><br>
<input type="button" value="Bold" onclick="formatText(myTextarea,'b')" />
<input type="button" value="Italic" onclick="formatText(myTextarea,'i')" />
<input type="button" value="Underline" onclick="formatText(myTextarea,'u')" />
</form>
</body>
</html> 

Open in new window

0
 
Vanq69Author Commented:
That is perfect, thank you so much.  Exactly what I wanted and worked easily.

Really is a credit when people are able to be so helpful.

Thank you.
0
 
Vanq69Author Commented:
Brilliant assistance with working example.
0
 
sunithnairCommented:
No Problem. The credit should also go to the person in this forum http://forums.devshed.com/javascript-development-115/textarea-bold-on-selected-area-512438.html. This is where I found the solution.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now