...

View Full Version : Problem with a javascript bbcode implementation? SOLVED!!



cdc08x
09-24-2005, 04:10 PM
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!!

cdc08x
09-24-2005, 04:49 PM
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:



<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 = '' + aSelection + '';
txtArea.focus();
range.move('textedit');
range.select();
}
else {
var oldStringLength = range.text.length + ''.length;
txtArea.value += '[bold]';
txtArea.value += '';
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!! :thumbsup:

Vladdy
09-24-2005, 06:57 PM
Here is IE/Gecko implementation:
www.vladdy.net/demos/textareainsertion.html

cdc08x
09-24-2005, 09:19 PM
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?

cdc08x
09-24-2005, 11:09 PM
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:


<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('','','txtA')"><strong>B</strong></a>
<!-- ... -->
</body>

slimjim
04-06-2008, 07:56 PM
With IE it doesnt let you nest the tags unless you highlight a text.



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.

slimjim
04-07-2008, 05:31 AM
Here is what is happening if this helps more.



{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

slimjim
04-08-2008, 08:23 PM
I use range.moveStart(...) and range.moveEnd(...) to set selection in a correct position

vividona
07-06-2009, 10:04 AM
how can I add to this code:
tesxt size - font color - audio file



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum