🔒 Locked

[web] Javascript - Add HTML tags around selection

Started by InsaneBoarder234 Jun 27, 2006 at 10:25 AM 2 replies 27.4k views

Original Post

Jun 27, 2006 at 10:25 AM

I'm having difficulty finding suitable pages about this on google. Basically I'm writing a simple editor and I want to add a few buttons that will add tags around the current selection for formatting. So far I have this piece of &#106avascript to apply bold to the selected piece of text.


function ApplyBold()
{
    theSelection = document.selection.createRange().text;
    if(theSelection)
    {
        document.selection.createRange().text = "" + theSelection + "";
        document.selection.anchorOffset = selStart;
    }
}

I have a few questions.. (1) How can I only affect the selection if it is within the textarea named 'text' on the form named 'editor'? (2) If there is no selection, or the 'text' textarea doesn't currently have keyboard focus, how can I detect this and use it to simply add "" into the textarea at the location of the cursor? (i.e. if I click at the start of the textarea, then click in another text box, then call ApplyBold() via a button, ApplyBold will insert the strong tag at the start of the 'text' textarea). Thanks!

konForce

Jun 27, 2006 at 1:32 PM

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>	<title>Untitled</title><script type="text/javascript">function applyTag(obj, tag){	wrapText(obj, '<'+tag+'>', '</'+tag+'>');};function wrapText(obj, beginTag, endTag){	if(typeof obj.selectionStart == 'number')	{		// Mozilla, Opera, and other browsers		var start = obj.selectionStart;		var end   = obj.selectionEnd;				obj.value = obj.value.substring(0, start) + beginTag + obj.value.substring(start, end) + endTag + obj.value.substring(end, obj.value.length);	}	else if(document.selection)	{		// Internet Explorer		// make sure it's the textarea's selection		obj.focus();		var range = document.selection.createRange();		if(range.parentElement() != obj) return false;	    if(typeof range.text == 'string')	        document.selection.createRange().text = beginTag + range.text + endTag;	}	else		obj.value += text;		};</script>	</head><body>Blah blah blah.
<textarea id="ta" rows="10" cols="50"></textarea> 

<input type="button" value="Bold" onclick="applyTag(document.getElementById('ta'), 'b')" /><input type="button" value="Italics" onclick="applyTag(document.getElementById('ta'), 'i')" /></body></html>

InsaneBoarder234

Jun 27, 2006 at 2:22 PM

That works great, thanks!

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.