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 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2005
    Location
    Latina (Italy)
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Problem with a javascript bbcode implementation? SOLVED!!

    Hi all!
    This is my problem: I'm trying to build a kinda bbcode form (something similar to the one I'm using to post this thread, actually!!).
    I'd like to build the "BOLD" button, for example, having this effect: it would insert a '['b']' string (into the textarea where the user writes) before the selection, and a '['/b']' after, if something's selected, and place the caret AFTER this all
    OR
    if nothing's selected, it would have to write '['b']['/b']' and insert the caret in the middle.

    The main problem for me is to place the textcursor wherever I want!!
    I've searched and tried a lot but I can't manage this!!
    Can someone please help me?

    Thanx a lot!!
    Last edited by cdc08x; 09-25-2005 at 12:10 AM.

  • #2
    New Coder
    Join Date
    Sep 2005
    Location
    Latina (Italy)
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Funny, isn't it?
    I've found the solution out (in IE, at least!!):
    this is something I suppose could appear useful to anyone with the same problem:

    Code:
    <head>
    <!-- ... -->
    <script language="JavaScript" type="text/javascript">
    <!--
    function createTag(tagId,areaId) {
    	var txtArea = document.getElementById(areaId);
    	var aSelection = document.selection.createRange().text;
    	var range = txtArea.createTextRange();
    
    	if(tagId==0) {
    		if(aSelection) {
    			// Add tags around selection
    			document.selection.createRange().text = '[bold]' + aSelection + '[/bold]';
    			txtArea.focus();
    			range.move('textedit');
    			range.select();
    		}
    		else {
    			var oldStringLength = range.text.length + '[bold]'.length;
    			txtArea.value += '[bold]';
    			txtArea.value += '[/bold]';
    			txtArea.focus();
    			range.move('character',oldStringLength);
    			range.collapse(false);
    			range.select();
    		}
    	}
    	return;
    }
    //-->
    </script>
    </head>
    <body>
    <!-- ... -->
    	<form onSubmit="return false;">
    		<textarea id="txtA"></textarea>
    	</form>
    	<a href="javascript:createTag(0,'txtA')"><strong>B</strong></a>
    <!-- ... -->
    </body>
    I'm really happy now, believe me!!
    Last edited by cdc08x; 09-24-2005 at 05:51 PM.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is IE/Gecko implementation:
    www.vladdy.net/demos/textareainsertion.html
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #4
    New Coder
    Join Date
    Sep 2005
    Location
    Latina (Italy)
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanx very much!
    But... well... now I'm searching for a way to replace the caret on Mozilla platforms too!

    It doesn't seem so easy.

    May someone help me?

  • #5
    New Coder
    Join Date
    Sep 2005
    Location
    Latina (Italy)
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Eureka!!

    I'm nearly sure someone will consider me a madman... and perhaps he won't be so wrong but... eureka!! I found out the solution (searching around the web and trying many times...).
    Here's a good solution for IE and Moz, BOTH:
    Code:
    <html>
    <head>
    <!-- ... -->
    <script language="JavaScript" type="text/javascript">
    <!--
    var clientInfo = navigator.userAgent.toLowerCase();
    var isIE = ( clientInfo.indexOf("msie") != -1 );
    var isWin = ( (clientInfo.indexOf("win")!=-1) || (clientInfo.indexOf("16bit") != -1) );
    
    function createBBtag( openerTag , closerTag , areaId ) {
    	if(isIE && isWin) {
    		createBBtag_IE( openerTag , closerTag , areaId );
    	}
    	else {
    		createBBtag_nav( openerTag , closerTag , areaId );
    	}
    	return;
    }
    
    function createBBtag_IE( openerTag , closerTag , areaId ) {
    	var txtArea = document.getElementById( areaId );
    	var aSelection = document.selection.createRange().text;
    	var range = txtArea.createTextRange();
    
    	if(aSelection) {
    		document.selection.createRange().text = openerTag + aSelection + closerTag;
    		txtArea.focus();
    		range.move('textedit');
    		range.select();
    	}
    	else {
    		var oldStringLength = range.text.length + openerTag.length;
    		txtArea.value += openerTag + closerTag;
    		txtArea.focus();
    		range.move('character',oldStringLength);
    		range.collapse(false);
    		range.select();
    	}
    	return;
    }
    
    function createBBtag_nav( openerTag , closerTag , areaId ) {
    	var txtArea = document.getElementById( areaId );
    	if (txtArea.selectionEnd && (txtArea.selectionEnd - txtArea.selectionStart > 0) ) {
    		var preString = (txtArea.value).substring(0,txtArea.selectionStart);
    		var newString = openerTag + (txtArea.value).substring(txtArea.selectionStart,txtArea.selectionEnd) + closerTag;
    		var postString = (txtArea.value).substring(txtArea.selectionEnd);
    		txtArea.value = preString + newString + postString;
    		txtArea.focus();
    	}
    	else {
    		var offset = txtArea.selectionStart;
    		var preString = (txtArea.value).substring(0,offset);
    		var newString = openerTag + closerTag;
    		var postString = (txtArea.value).substring(offset);
    		txtArea.value = preString + newString + postString;
    		txtArea.selectionStart = offset + openerTag.length;
    		txtArea.selectionEnd = offset + openerTag.length;
    		txtArea.focus();
    	}
    	return;
    }
    //-->
    </script>
    </head>
    <body>
    <!-- ... -->
    <form onSubmit="return false;">
    	<textarea id="txtA"></textarea>
    </form>
    <a href="javascript:createBBtag('[bold]','[/bold]','txtA')"><strong>B</strong></a>
    <!-- ... -->
    </body>
    Last edited by cdc08x; 09-25-2005 at 07:32 AM.

  • #6
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with a javascript bbcode implementation?

    With IE it doesnt let you nest the tags unless you highlight a text.

    Code:
    So if you click bold tag and then click underline tag, the underline tag goes to the end instead of in the middle of the bold tag.
    
    Same if I click a bold tag and while cursor is in the middle of both starting and ending bold tag and then click a list tag, list tag goes to the end instead of between the 2 bold tags.
    Works fine in FF

    Funnier thing is, the editor for posting this, works fine in IE

    But i need the code listed in this post to work for IE.

  • #7
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is what is happening if this helps more.

    Code:
    {p}cursor{/p}
    Click link again and should be like this.
    {b}{s}{/s}{/b}
    Instead it ends up like this.
    {b}{/b}{s}{/s}
    
    But only in IE
    Last edited by slimjim; 04-07-2008 at 06:39 AM. Reason: not showing up

  • #8
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I use range.moveStart(...) and range.moveEnd(...) to set selection in a correct position

  • #9
    New Coder
    Join Date
    Feb 2009
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    how can I add to this code:
    tesxt size - font color - audio file


  •  

    Posting Permissions

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