Page 1 of 1
BB CODE!!
Posted: Mon May 19, 2008 2:17 pm
by kanchan
Hi!
How can i make the BB CODE same like this DevNetwork Forum has?
i need only the BOLD, UNDERLINE, ITALICS, IMG, FONT SIZE and FONT COLOR
is this possible?
can you please tell me how to do this??
Re: BB CODE!!
Posted: Mon May 19, 2008 2:33 pm
by Jade
Hey there, you'd have to write a parser. Basically you search the code for specific tags, like and change that to a <b> bold tag... then close that bold tag when you reach a .
Re: BB CODE!!
Posted: Mon May 19, 2008 9:40 pm
by kanchan
Re: BB CODE!!
Posted: Mon May 19, 2008 10:19 pm
by dbemowsk
We'll give you the help you need to solve your problem, but we are not going to code it for you. That is your job. You will just have to learn like we all did.
Re: BB CODE!!
Posted: Mon May 19, 2008 10:33 pm
by s.dot
Search code snippets if you're looking for code. There's a couple in there.
Other than those (and ones you'd find by googling), you'll have to learn yourself.
Re: BB CODE!!
Posted: Tue May 20, 2008 2:00 am
by kanchan
ok here's what i have made by copying from this DevNetwork Forum :
bbcode.html
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>BBCODE</title>
<SCRIPT src="fn.js"
type=text/javascript></SCRIPT>
</head>
<body>
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p> </p>
<SCRIPT type=text/javascript>
// <![CDATA[
var form_name = 'form1';
var text_name = 'message';
// Define the bbCode tags
var bbcode = new Array();
var bbtags = new
Array('<b>','</b>','<i>','</i>','<u>','</u>','<img>','</img>','
<url>','</url>','[flash=]', '[/flash]','<size=>','</size>');
var imageTag = false;
// ]]>
</SCRIPT>
<SCRIPT src="editor.js"
type=text/javascript></SCRIPT>
<form id="form1" name="form1" method="post" action="">
<table width="747" border="0" cellspacing="5"
cellpadding="10">
<tr>
<td width="573"><input class="button2" title="Bold
text: <b]text</b>" style="FONT-WEIGHT: bold; WIDTH: 30px"
accesskey="b" onclick="bbstyle(0)" type="button" value=" B "
name="addbbcode0" />
<input class="button2" title="Italic text:
<i>text</i>" style="WIDTH: 30px; FONT-STYLE: italic"
accesskey="i" onclick="bbstyle(2)" type="button" value=" i "
name="addbbcode2" />
<input class="button2" title="Underline text:
<u>text</u>" style="WIDTH: 30px; TEXT-DECORATION: underline"
accesskey="u" onclick="bbstyle(4)" type="button" value=" u "
name="addbbcode4" />
<input class="button2" title="Insert image:
<img>http://image_url</img>" style="WIDTH: 40px" accesskey="p"
onclick="bbstyle(14)" type="button" value="Img"
name="addbbcode14" />
<input class="button2" title="Insert URL:
<url>http://url</url> or <url=http://url>URL text</url>"
style="WIDTH: 40px; TEXT-DECORATION: underline" accesskey="w"
onclick="bbstyle(16)" type="button" value="URL"
name="addbbcode16" />
<input class="button2" id="bbpalette" title="Font
colour: <color=red>text</color> Tip: you can also use
color=#FF0000" onclick="change_palette();" type="button"
value="Font Color" name="bbpalette" /><br />
<DIV id=colour_palette style="DISPLAY: none">
<DL style="CLEAR: left">
<DT><LABEL>Font Color:</LABEL></DT>
<DD>
<SCRIPT type=text/javascript>
// <![CDATA[
function change_palette()
{
dE('colour_palette');
e =
document.getElementById('colour_palette');
if (e.style.display == 'block')
{
document.getElementById('bbpalette').value = 'Hide Font Color';
}
else
{
document.getElementById('bbpalette').value = 'Font Color';
}
}
colorPalette('h', 15, 10);
// ]]>
</SCRIPT>
</DD>
</DL></DIV>
</td>
</tr>
<tr>
<td><textarea class="inputbox" id="message"
onkeyup="storeCaret(this);" onclick="storeCaret(this);"
tabindex="3" name="message" rows="15" cols="76"
onselect="storeCaret(this);"></textarea></td>
</tr>
</table>
</form> <p> </p></td>
</tr>
</table>
</body>
</html>
fn.js
Code: Select all
/**
* Set display of page element
* s[-1,0,1] = hide,toggle display,show
*/
function dE(n, s)
{
var e = document.getElementById(n);
if (!s)
{
s = (e.style.display == '' || e.style.display == 'block') ? -1 : 1;
}
e.style.display = (s == 1) ? 'block' : 'none';
}
/**
* Alternate display of subPanels
*/
function subPanels(p)
{
var i, e, t;
if (typeof(p) == 'string')
{
show_panel = p;
}
for (i = 0; i < panels.length; i++)
{
e = document.getElementById(panels[i]);
t = document.getElementById(panels[i] + '-tab');
if (e)
{
if (panels[i] == show_panel)
{
e.style.display = 'block';
if (t)
{
t.className = 'activetab';
}
}
else
{
e.style.display = 'none';
if (t)
{
t.className = '';
}
}
}
}
}
editor.js
Code: Select all
// Startup variables
var imageTag = false;
var theSelection = false;
// Check for Browser & Platform for PC & IE specific bits
// More details from:
http://www.mozilla.org/docs/web-develop ... _type.html
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var clientVer = parseInt(navigator.appVersion); // Get browser version
var is_ie = ((clientPC.indexOf('msie') != -1) && (clientPC.indexOf('opera') == -1));
var is_win = ((clientPC.indexOf('win') != -1) || (clientPC.indexOf('16bit') != -1));
var baseHeight;
/**
* Fix a bug involving the TextRange object. From
* http://www.frostjedi.com/terra/scripts/ ... etBug.html
*/
function initInsertions()
{
var doc;
if (document.forms[form_name])
{
doc = document;
}
else
{
doc = opener.document;
}
var textarea = doc.forms[form_name].elements[text_name];
if (is_ie && typeof(baseHeight) != 'number')
{
textarea.focus();
baseHeight = doc.selection.createRange().duplicate().boundingHeight;
if (!document.forms[form_name])
{
document.body.focus();
}
}
}
/**
* bbstyle
*/
function bbstyle(bbnumber)
{
if (bbnumber != -1)
{
bbfontstyle(bbtags[bbnumber], bbtags[bbnumber+1]);
}
else
{
insert_text('[*]');
document.forms[form_name].elements[text_name].focus();
}
}
/**
* Apply bbcodes
*/
function bbfontstyle(bbopen, bbclose)
{
theSelection = false;
var textarea = document.forms[form_name].elements[text_name];
textarea.focus();
if ((clientVer >= 4) && is_ie && is_win)
{
// Get text selection
theSelection = document.selection.createRange().text;
if (theSelection)
{
// Add tags around selection
document.selection.createRange().text = bbopen + theSelection
+ bbclose;
document.forms[form_name].elements[text_name].focus();
theSelection = '';
return;
}
}
else if (document.forms[form_name].elements[text_name].selectionEnd &&
(document.forms[form_name].elements[text_name].selectionEnd -
document.forms[form_name].elements[text_name].selectionStart > 0))
{
mozWrap(document.forms[form_name].elements[text_name], bbopen,
bbclose);
document.forms[form_name].elements[text_name].focus();
theSelection = '';
return;
}
//The new position for the cursor after adding the bbcode
var caret_pos = getCaretPosition(textarea).start;
var new_pos = caret_pos + bbopen.length;
// Open tag
insert_text(bbopen + bbclose);
// Center the cursor when we don't have a selection
// Gecko and proper browsers
if (!isNaN(textarea.selectionStart))
{
textarea.selectionStart = new_pos;
textarea.selectionEnd = new_pos;
}
// IE
else if (document.selection)
{
var range = textarea.createTextRange();
range.move("character", new_pos);
range.select();
storeCaret(textarea);
}
textarea.focus();
return;
}
/**
* Insert text at position
*/
function insert_text(text, spaces, popup)
{
var textarea;
if (!popup)
{
textarea = document.forms[form_name].elements[text_name];
}
else
{
textarea = opener.document.forms[form_name].elements[text_name];
}
if (spaces)
{
text = ' ' + text + ' ';
}
if (!isNaN(textarea.selectionStart))
{
var sel_start = textarea.selectionStart;
var sel_end = textarea.selectionEnd;
mozWrap(textarea, text, '')
textarea.selectionStart = sel_start + text.length;
textarea.selectionEnd = sel_end + text.length;
}
else if (textarea.createTextRange && textarea.caretPos)
{
if (baseHeight != textarea.caretPos.boundingHeight)
{
textarea.focus();
storeCaret(textarea);
}
var caret_pos = textarea.caretPos;
caret_pos.text = caret_pos.text.charAt(caret_pos.text.length - 1) == '
' ? caret_pos.text + text + ' ' : caret_pos.text + text;
}
else
{
textarea.value = textarea.value + text;
}
if (!popup)
{
textarea.focus();
}
}
/**
* From http://www.massless.org/mozedit/
*/
function mozWrap(txtarea, open, close)
{
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
var scrollTop = txtarea.scrollTop;
if (selEnd == 1 || selEnd == 2)
{
selEnd = selLength;
}
var s1 = (txtarea.value).substring(0,selStart);
var s2 = (txtarea.value).substring(selStart, selEnd)
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1 + open + s2 + close + s3;
txtarea.selectionStart = selEnd + open.length + close.length;
txtarea.selectionEnd = txtarea.selectionStart;
txtarea.focus();
txtarea.scrollTop = scrollTop;
return;
}
/**
* Insert at Caret position. Code from
* http://www.faqts.com/knowledge_base/vie ... 52/fid/130
*/
function storeCaret(textEl)
{
if (textEl.createTextRange)
{
textEl.caretPos = document.selection.createRange().duplicate();
}
}
/**
* Color pallette
*/
function colorPalette(dir, width, height)
{
var r = 0, g = 0, b = 0;
var numberList = new Array(6);
var color = '';
numberList[0] = '00';
numberList[1] = '40';
numberList[2] = '80';
numberList[3] = 'BF';
numberList[4] = 'FF';
document.writeln('<table cellspacing="1" cellpadding="0" border="0">');
for (r = 0; r < 5; r++)
{
if (dir == 'h')
{
document.writeln('<tr>');
}
for (g = 0; g < 5; g++)
{
if (dir == 'v')
{
document.writeln('<tr>');
}
for (b = 0; b < 5; b++)
{
color = String(numberList[r]) + String(numberList[g])
+ String(numberList[b]);
document.write('<td bgcolor="#' + color + '"
style="width: ' + width + 'px; height: ' + height + 'px;">');
document.write('<a href="#"
onclick="bbfontstyle(\'<font color=#' + color + '>\', \'</font>\'); return
false;"><img src="images/spacer.gif" width="' + width + '" height="' + height + '"
alt="#' + color + '" title="#' + color + '" /></a>');
document.writeln('</td>');
}
if (dir == 'v')
{
document.writeln('</tr>');
}
}
if (dir == 'h')
{
document.writeln('</tr>');
}
}
document.writeln('</table>');
}
/**
* Caret Position object
*/
function caretPosition()
{
var start = null;
var end = null;
}
/**
* Get the caret position in an textarea
*/
function getCaretPosition(txtarea)
{
var caretPos = new caretPosition();
// simple Gecko/Opera way
if(txtarea.selectionStart || txtarea.selectionStart == 0)
{
caretPos.start = txtarea.selectionStart;
caretPos.end = txtarea.selectionEnd;
}
// dirty and slow IE way
else if(document.selection)
{
// get current selection
var range = document.selection.createRange();
// a new selection of the whole textarea
var range_all = document.body.createTextRange();
range_all.moveToElementText(txtarea);
// calculate selection start point by moving beginning of range_all to
beginning of range
var sel_start;
for (sel_start = 0; range_all.compareEndPoints('StartToStart', range)
< 0; sel_start++)
{
range_all.moveStart('character', 1);
}
txtarea.sel_start = sel_start;
// we ignore the end value for IE, this is already dirty enough and we
don't need it
caretPos.start = txtarea.sel_start;
caretPos.end = txtarea.sel_start;
}
return caretPos;
}
i only put the buttons(like bold, underline,etc) which i need
and what i got error here is
when i click on "IMG" and "URL" button i get this error:
'length' is null or not an object
i dont know how to debug this one, i tried my best but i cant, can you guys please help me out, also can you remove the scripts from the javascript file which i dont need......
THANKS IN ADVANCE....
Re: BB CODE!!
Posted: Tue May 20, 2008 12:04 pm
by kanchan
Re: BB CODE!!
Posted: Tue May 20, 2008 12:13 pm
by John Cartwright
Asking for someone to debug a thousand lines of code is a lot to ask. I would suggest you narrow down the problem area.
Re: BB CODE!!
Posted: Tue May 20, 2008 12:24 pm
by kanchan
oh ok,
just save that javascript code to their respective file names and just run that bbcode.html page and you will see the error... but i dnt know whats wrong in that...
can you please help me out??
waiting for ur response.....
Re: BB CODE!!
Posted: Tue May 20, 2008 4:03 pm
by Jade
How about telling us specifically what error you're getting? Being specific is more helpful then just telling us you get an error. There are thousands and thousands of error codes out there...
Re: BB CODE!!
Posted: Tue May 20, 2008 5:12 pm
by pickle
Basically what we're getting at is: "Do some of the footwork yourself". It's not that we're not willing to help - we are. "Help" being the keyword. Just pasting your code (which by your own admission is mostly just copied & pasted from phpBB), telling us there's an error & asking us to fix it, doesn't seem like you want help so much as a hand out.
Use Firefox & use the Firebug plugin. That will likely tell you which line of which Javascript file the error is happening on. When you find the specific problem, Google it. Once you've done that, understand the problem somewhat & can come back to us describing exactly what your problem is & what you've tried, we'll be more than willing to help. Sounds like a lot of work & it is - but that's what everyone else here is told & expected to do.
Re: BB CODE!!
Posted: Tue May 20, 2008 9:32 pm
by kanchan
i told u already that i m <span style='color:blue' title='I'm naughty, are you naughty?'>smurf</span> new in this area so i dont know what the hell is wrong with this script.....
DAMN!!!
IN the attached file:
BOLD, ITALICS, UNDERLINE and FONT COLOR buttons works nicely but only problem is with the IMG and URL button, when i click on that buttons they got some error :
OBJECT is null or something like that..
CAn you please fix them up??
Re: BB CODE!!
Posted: Tue May 20, 2008 9:37 pm
by kanchan
here are the files i attached... can you please run that HTML file and fix the problem OUT??
PLEASEEEEEEEEEEE!!!!
Re: BB CODE!!
Posted: Wed May 21, 2008 4:49 am
by dbemowsk
Man, for as many people as are telling you I am surprised you can't get the hint, cause we have been pretty plain and straight forward about this. WE ARE NOT HERE TO GIVE YOU HANDOUTS. WE WILL HELP YOU FIGURE IT OUT, BUT WE ARE NOT GOING TO DO ALL THE WORK FOR YOU. LEARN SOMETHING.