Javascript BBcode editor

AdRock · September 3, 2007

I have a javscript BBcode text editor and everything works fine except and i can't get the font and color tags to wrap around the text properly.

Currently, if i highlight the text and click ont the font size button or try and change the font color, the BB tags appear after the text.

I did get it working sort of but when I clicked those buttons the rest of the form was wiped out and the other time it would do what I wanted but it copied the text and then applied the tags.

Basically, I just want to be able to increase the font-size or change color of the text.

The text editor form

<html><head>
<title>Editor</title>
<script src="editor.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" />


</head><body>
<form action="bbcode2.php" method="post" name="editform" onsubmit="return checkForm(this)">
<table id="editform">
<tr>
        <td colspan="2" id="header">Post a new message</td>
</tr>

<tr id="subject">
        <td>Subject:</td>
        <td><input type="text" name="subject" size="50" class="form_elements_text"/></td>
</tr>
<tr>
        <td rowspan="2" id="smilies">Smilies
                <a href="javascript:smilie('')">
                        <img src="smile.gif" alt="smile" title="smile" /></a>
                <a href="javascript:smilie('')">
                        <img src="biggrin.gif" alt="big grin" title="big grin"/></a>
                <a href="javascript:smilie('')">
                        <img src="razz.gif" alt="razz" title="razz" /></a></td>
        <td>
                <input type="button" class="button" value="bold" name="bold" onclick="javascript:tag('b', '[b]', 'bold*', '[/b]', 'bold', 'bold');" onMouseOver="helpline('bold')" />
                <input type="button" class="button" value="italic" name="italic" onclick="javascript:tag('i', '[i]', 'italic*', '[/i]', 'italic', 'italic');" onMouseOver="helpline('italic')" />
                <input type="button" class="button" value="underline" name="underline" onclick="javascript:tag('u', '[u]', 'underline*', '[/u]', 'underline', 'underline');" onMouseOver="helpline('underline')" />
                <input type="button" class="button" value="quote" name="quote" onclick="javascript:tag('q', '[quote]', 'quote*', '[/quote]', 'quote', 'quote');" onMouseOver="helpline('quote')" />
                <input type="button" class="button" value="mail" name="mail" onclick="javascript:tag('mail', '[mail]', 'mail*', '[/mail]', 'mail', 'mail');" onMouseOver="helpline('mail')" />
                <input type="button" class="button" value="url" name="url" onclick="javascript:tag('url', '[url]', 'url*', '[/url]', 'url', 'url');" onMouseOver="helpline('url')" />
                <input type="button" class="button" value="img" name="img" onclick="javascript:tag('img', '[img=', 'img*', ']', 'img', 'img');" onMouseOver="helpline('img')" />
                <br />
                Font size: <select name="fontsize" onChange="font('[size=' + this.form.fontsize.options[this.form.fontsize.selectedIndex].value + ']', '[/size]'); this.selectedIndex=2;" onMouseOver="helpline('fontsize')" class="form_elements_dropdown">

                                <option value="50%" >Tiny</option>
                                <option value="75%" >Small</option>
                                <option value="100%" selected >Normal</option>
                                <option value="150%" >Large</option>
                                <option  value="200%" >Huge</option>
                        </select>


                Font color: <select name="fontcolor" onChange="font('[color=' + this.form.fontcolor.options[this.form.fontcolor.selectedIndex].value + ']', '[/color]'); this.selectedIndex=0;" onMouseOver="helpline('fontcolor')" class="form_elements_dropdown"  >
                                <option value="black" style="color:black">Black</option>
                                <option value="silver" style="color:silver">Silver</option>
                                <option value="gray" style="color:gray">Gray</option>
                                <option value="maroon" style="color:maroon">Maroon</option>
                                <option value="red" style="color:red">Red</option>                                                                                <option value="purple" style="color:purple">Purple</option>
                                <option value="fuchsia" style="color:fuchsia">Fuchsia</option>
                                <option value="navy" style="color:navy">Navy</option>
                                <option value="blue" style="color:blue">Blue</option>
                                <option value="aqua" style="color:aqua">Aqua</option>
                                <option value="teal" style="color:teal">Teal</option>
                                <option value="lime" style="color:lime">Lime</option>
                                <option value="green" style="color:green">Green</option>
                                <option value="olive" style="color:olive">Olive</option>
                                <option value="yellow" style="color:yellow">Yellow</option>
                                <option value="white" style="color:white">White</option>                                                </select>

                                <br />

                <input type="text" name="helpbox" size="75" class="helpbox" readonly="readonly"/>
                </td>
</tr>
<tr>
                <td>
                Post:<br />
                <textarea rows="10" cols="50" name="post" class="form_elements_text"></textarea>
                </td>
</tr>
<tr>

                <td colspan="2" id="post">
                <input type="submit" name="Post" value="Post" class="button" />
                <input type="submit" name="preview" value="Preview" class="button"/>
                <input type="reset" value="Start over" class="button" onclick="javascript:confirm_reset();"/>
                </td>
</tr>
</table>
</form>


</body></html>

The JavaScript

//Variables for controlling opening and closing tags (function tag)

var b = 2;
var i = 2;
var u = 2;
var q = 2;
var mail = 2;
var url = 2;
var img = 2;

//Function for creating non-font tags

function tag(v, tagadd, newbut, tagclose, oldbut, name)
{


var r = document.selection.createRange().text;

rr = tagadd + r + tagclose;

if(r)
{
document.selection.createRange().text = rr;
}
else
{
if (eval(v)%2 == 0)
{
eval("window.document.editform."+name+".value = newbut;");
var content = window.document.editform.content.value;
window.document.editform.content.value =  content + tagadd;
window.document.editform.content.focus();
}
else
{
eval("window.document.editform."+name+".value = oldbut;");
var content = window.document.editform.content.value;
window.document.editform.content.value = content + tagclose;
window.document.editform.content.focus();
}

eval(v+"++;");
}
}


//Function for adding font color and size tags

function font(bbopen, bbclose) {
        var post = document.editform.post;
        post.value += bbopen + bbclose;
        post.focus();
        return;
}
//Function for adding smilies

function smilie (smilie) {
        var post = document.editform.post;
        post.value += smilie;
        post.focus();
        return;
}
//Helpbox messages
bold_help = "Bold text: [b]text[/b]";
italic_help = "Italic text: [i]text[/i]";
underline_help = "Underline text: [u]text[/u]";
quote_help = "Quote text: [quote]text[/quote] or [quote=name]text[/quote]";
email_help = "Insert email: [mail]email[/mail]";
img_help = "Insert image: [img=http://image_url]";
url_help = "Insert URL: [url]http://url[/url] or [url=http://url]URL text[/url]";
fontcolor_help = "Font color: [color=red]text[/color]  Tip: you can also use color=#FF0000";
fontsize_help = "Font size: [size=50%]small text[/size]";

//Function for displaying help information

// Shows the help messages in the helpline window
function helpline(help) {
        var helpbox = document.editform.helpbox;
        helpbox.value = eval(help + "_help");
}
//Function to confirm reset

function confirm_reset () {
        if(confirm("If you continue you will loose everything you have entered so far. \n \n" +
                "Click OK to proceed and start again.  \n \n Alternatively click cancel to continue " +
                "working on your post.")) {
                        return true;
                                }
                else {
                        return false;
                                }
}
//Check the form submission for errors

function checkForm() {
        var subject = document.editform.subject;
        var post = document.editform.post;

        //Check to make sure post lengths are sensible

        if (subject.value.length < 2 && post.value.length < 2) {
                alert("This is a short post!" + " \n \n " +
                                "We require that each post (and subject) \n" +
                                "be at least 2 characters long. \n \n" +
                                "Go back and try again.");
                return false;
        }
        else { if (subject.value.length < 2) {
                        alert("We require that the subject  \n" +
                                "be at least 2 characters long. \n \n" +
                                "Go back and try again.");
                                return false;
                                }
                        else { if (post.value.length < 2) {
                        alert("We require that each post  \n" +
                                "be at least 2 characters long. \n \n" +
                                "Go back and try again.");
                                return false;
                                }
                                else {
                                        return true;
                                }
                        }
        }
}

Sign In

Javascript BBcode editor

Recommended Posts

AdRock

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information