...

View Full Version : Text Selection help (bbcode function)



micmania1
10-03-2008, 07:54 PM
Hi, I'm trying to create a bbcode function with functionality similar to that of which is used on this site.

Here's my function:


function bbCode(code) {
var text = "";
var e = 'message'; // ID

if (document.all) {
text = document.selection.createRange().text;
} else {
text = document.getSelection();
}

if (text != '') { // text must be highlighted
// Set new highlighted value
if (document.all) {
document.selection.createRange().text = '[' + code + ']' + text + '[/' + code + ']';
} else {
var setVal = document.getSelection() = '[' + code + ']' + text + '[/' + code + ']';
}
} else {
document.getElementById(e).innerHTML = document.getElementById(e).innerHTML + '[' + code + '][/' + code + ']';
}
}


The problem i'm having is detecting where the selected text is from. For example I could highlight the footer of my website which has no relation to the bbcode function, but when the 'bold' tag is clicked, it will wrap the footer in bold tags or any text on that page which I select.

Could somebody tell me how I can detect where the selected text is?

Thanks for your time.
Michael

micmania1
10-04-2008, 12:07 PM
Anybody?

Cranford
10-04-2008, 02:20 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function wrapText(openTag,closeTag){

var workArea = document.getElementById('subjectMatter');
!workArea.focus() ? workArea.focus() : null;
if (!document.selection)
{
var workText = workArea.value.substring(workArea.selectionStart,workArea.selectionEnd);
if (workText != "")
{
workArea.value = workArea.value.replace(workText,openTag+workText+closeTag);
workArea.selectionStart = "";
workArea.selectionEnd = "";
}
}
else {
var workText = document.selection.createRange();
if (workText.text != "")
{
workText.text = openTag+workText.text+closeTag;
document.selection.empty();
}
}
}

function undoSelection(){

var workArea = document.getElementById('subjectMatter');
!workArea.focus() ? workArea.focus() : null;
if (!document.selection)
{
var workText = workArea.value.substring(workArea.selectionStart,workArea.selectionEnd)
var tmp = workText.replace(/<[bui]+>/gi,'').replace(/<\/[bui]>/gi,'');
workArea.value = workArea.value.replace(workText,tmp)
workArea.selectionStart = "";
workArea.selectionEnd = "";
}
else {
var workText = document.selection.createRange();
var tmp = workText.text;
tmp = tmp.replace(/<[bui]+>/gi,'').replace(/<\/[bui]>/gi,'');
workText.text = ""+tmp+"";
document.selection.empty();
}
}

function undoAll(){

var workArea = document.getElementById('subjectMatter');
workArea.value = workArea.value.replace(/<[bui]+>/gi,'').replace(/<\/[bui]>/gi,'');
}

</script>
<style type="text/css">

body {background-color: #eae3c6; margin-top: 60px;}
div {width: 500px; margin: auto;}
textarea {padding: 8px; overflow: auto; margin-bottom: 8px;}
input {font-family: tahoma; font-size: 10pt;}
form {width: 500px; margin: auto;}
#fauxFooter {width: 300px; font-size: 18px; font-weight: bold; color: #00008b; margin-left: auto; margin-right: auto; margin-top: 250px; }

</style>
</head>
<body>
<div>
<textarea id="subjectMatter" cols="55" rows="10">The rain in Spain falls mainly on the plain.</textarea>
</div>
<form action="">
<input type="button" value="Boldface" onclick="wrapText('<b>','</b>')">&nbsp;&nbsp;&nbsp;
<input type="button" value="Italic" onclick="wrapText('<i>','</i>')">&nbsp;&nbsp;&nbsp;
<input type="button" value="Underline" onclick="wrapText('<u>','</u>')">&nbsp;&nbsp;&nbsp;
<input type="button" value='Un-Do Selected' onclick="undoSelection()">&nbsp;&nbsp;&nbsp;
<input type="button" value='Un-Do All' onclick="undoAll()">
</form>
<div id="fauxFooter"> Some meaningless text used for testing </div>
</body>
</html>

micmania1
10-04-2008, 02:28 PM
Thank you very much for your time and effort.

It works perfectly.

Cranford
10-04-2008, 02:31 PM
You're welcome. Good luck with your project.

skyer
01-04-2009, 11:35 AM
You're welcome. Good luck with your project.
yes your code is nice
one question
how to do code to work when nothing selected [cursor]
thanks

skyer
02-06-2009, 06:53 PM
in FF
cursor jumps to start position .

how to solve this ?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum