BB CODE!!

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
kanchan
Forum Commoner
Posts: 80
Joined: Tue Nov 30, 2004 12:03 pm

BB CODE!!

Post 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??
User avatar
Jade
Forum Regular
Posts: 908
Joined: Sun Dec 29, 2002 5:40 pm
Location: VA

Re: BB CODE!!

Post 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 .
kanchan
Forum Commoner
Posts: 80
Joined: Tue Nov 30, 2004 12:03 pm

Re: BB CODE!!

Post by kanchan »

:roll: :roll: :roll:

CAn i have the code please? As i am not so expert in PHP. help me out :( :( :(
dbemowsk
Forum Commoner
Posts: 82
Joined: Wed May 14, 2008 10:30 pm

Re: BB CODE!!

Post 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.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: BB CODE!!

Post 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.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
kanchan
Forum Commoner
Posts: 80
Joined: Tue Nov 30, 2004 12:03 pm

Re: BB CODE!!

Post 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>&nbsp;</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>&nbsp;</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....
kanchan
Forum Commoner
Posts: 80
Joined: Tue Nov 30, 2004 12:03 pm

Re: BB CODE!!

Post by kanchan »

Isnt there any body to help me out with these errors?? :( :( :(
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: BB CODE!!

Post 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.
kanchan
Forum Commoner
Posts: 80
Joined: Tue Nov 30, 2004 12:03 pm

Re: BB CODE!!

Post 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.....
User avatar
Jade
Forum Regular
Posts: 908
Joined: Sun Dec 29, 2002 5:40 pm
Location: VA

Re: BB CODE!!

Post 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...
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: BB CODE!!

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
kanchan
Forum Commoner
Posts: 80
Joined: Tue Nov 30, 2004 12:03 pm

Re: BB CODE!!

Post by kanchan »

:( :( :(

:cry: :cry: :cry:

i told u already that i m <span style='color:blue' title='I&#39;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??
Last edited by kanchan on Tue May 20, 2008 9:50 pm, edited 1 time in total.
kanchan
Forum Commoner
Posts: 80
Joined: Tue Nov 30, 2004 12:03 pm

Re: BB CODE!!

Post by kanchan »

here are the files i attached... can you please run that HTML file and fix the problem OUT??
PLEASEEEEEEEEEEE!!!!
Attachments
bb.zip
(4.38 KiB) Downloaded 8 times
dbemowsk
Forum Commoner
Posts: 82
Joined: Wed May 14, 2008 10:30 pm

Re: BB CODE!!

Post 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.
Post Reply