Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Post Text Selection help (bbcode function)

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

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Anybody?

  • #3
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    Code:
    <!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>

  • Users who have thanked Cranford for this post:

    micmania1 (10-04-2008)

  • #4
    New Coder
    Join Date
    Jun 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you very much for your time and effort.

    It works perfectly.

  • #5
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    You're welcome. Good luck with your project.

  • #6
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Cranford View Post
    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

  • #7
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    in FF
    cursor jumps to start position .

    how to solve this ?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •