BBcode text editor

AdRock · #1 (**permalink**) Sep 2nd, 2007, 13:56

I have a form which uses Bbcode where I can use Bold, Italic, Underline etc but what I don't have and what is needed is an email link.

How do I add an email link to the form and to the JS file?

Also I have noticed that when I highlight the text and try and change the color or the font size, the opening and closing tags are at the end of the text.

If you look here you will see what I mean!!

Here is the form

Code: Select all

 
<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(':D')">
                        <img src="biggrin.gif" alt="big grin" title="big grin"/></a>
                <a href="javascript:smilie(':p')">
                        <img src="razz.gif" alt="razz" title="razz" /></a></td>
        <td>
                <input type="button" class="button" value="bold" name="bold" onclick="javascript:tag('b', '', 'bold*', '', 'bold', 'bold');" onMouseOver="helpline('bold')" />
                <input type="button" class="button" value="italic" name="italic" onclick="javascript:tag('i', '', 'italic*', '', 'italic', 'italic');" onMouseOver="helpline('italic')" />
                <input type="button" class="button" value="underline" name="underline" onclick="javascript:tag('u', '', 'underline*', '', 'underline', 'underline');" onMouseOver="helpline('underline')" />
                <input type="button" class="button" value="quote" name="quote" onclick="javascript:tag('q', '
	Quote:
	
	
		
			
				', 'quote*', '
			
		
	
	
', 'quote', 'quote');" onMouseOver="helpline('quote')" />
                <input type="button" class="button" value="code" name="code" onclick="javascript:tag('c', 'Code: Select all
', 'code*', '', 'code', 'code');" onMouseOver="helpline('code')" />
                <input type="button" class="button" value="url" name="url" onclick="javascript:tag('url', '', 'url*', '', 'url', 'url');" onMouseOver="helpline('url')" />
                <input type="button" class="button" value="img" name="img" onclick="javascript:tag('img', '[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>

and here is the JS file

Code: Select all

 
//Variables for controlling opening and closing tags (function tag)
var b = 2;
var i = 2;
var u = 2;
var q = 2;
var c = 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: text";
italic_help = "Italic text: text";
underline_help = "Underline text: text";
quote_help = "Quote text: 
	Quote:
	
	
		
			
				text
			
		
	
	
 or 
	Quote:
	
	
		
			
				
					Originally Posted by name
					
				
				text
			
		
	
	
";
code_help = "Code display: Code: Select all
code";
img_help = "Insert image: ";
url_help = "Insert URL: http://url or URL text";
fontcolor_help = "Font color: text  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;
                                }
                        }
        }
}

AdRock · #2 (**permalink**) Sep 2nd, 2007, 20:57

I have worked out how to add an email link which was pretty easy.

I am now stuck on changing of the font size and color.

I changed a bit of code which sorts the problem out but when i type a few lines and try to change the color or size of the text it wipes the form clean

I did change the function from this

Code: Select all

//Function for adding font color and size tags

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

to this

Code: Select all

//Function for adding font color and size tags

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

but it screws up the text.....any ideas how I can get this to work?

Rakuli · #3 (**permalink**) Sep 3rd, 2007, 16:44

Having a quick look through (although some of it is screwy due to mis-interpreted BBC tags in your post) I think you should be able to add an email button by simply adding this to the form :

<input type="button" class="button" value="Email" name="email" onclick="javascript:tag('eml', '', 'Email', '', 'Email', 'email');" onMouseOver="helpline('Email')" />

then add :

var eml = 2;

just below :

var img = 2;

in the javascript file.

Although there does appear to be a few superfluous options in the tag() function.

Cheers,

AdRock · #4 (**permalink**) Sep 3rd, 2007, 18:53

Thanks Rakuli

any idea of how i can get rid of this

Quote:

some random text[ color=purple ][ /color ]

to this

Quote:

[ color=purple ]some random text[ /color ]

and the same with the font tags

Rakuli · #5 (**permalink**) Sep 3rd, 2007, 19:11

Code: Select all

 
//Function for adding font color and size tags
 
function font(bbopen, bbclose) {
     var box = document.getElementById('editform');
 
 var postText = box.value; 
 
box.value = postText + bbopen +  bbclose;
        box.focus();
        return;
}

That should work I think.

AdRock · #6 (**permalink**) Sep 3rd, 2007, 21:56

That didn't work

Rakuli · #7 (**permalink**) Sep 3rd, 2007, 22:07

Do you have a page I could look at? It would be good to see all of the code.

AdRock · #8 (**permalink**) Sep 3rd, 2007, 23:23

Yeah.......have a look here

http://www.jackgodfrey.org.uk/adam/bbcode/

I made this change and it sort of worked but it highlights absolutely everything.

Code: Select all

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

It's ok on it's own but if you have several lines it doesn't work

Rakuli · #9 (**permalink**) Sep 3rd, 2007, 23:49

Okay sorry, I think I know what you mean now.

This worked on my computer when I tested.

Code: Select all

function font(bbopen, bbclose) {
    var post = document.editform.post;
 
 var selectedText = document.selection.createRange().text;
 
 if (selectedText)
  document.selection.createRange().text = bbopen + selectedText + bbclose;
 
 else 
     post.value =  post.value + bbopen + bbclose;
    post.focus();
    return;
}

That should add the tags to any selected text -- if nothing is selected it will append to the end of current text -- it won't encompass everything as it does now.

Hope this helps

AdRock · #10 (**permalink**) Sep 4th, 2007, 09:12

Thanks again Rakuli

You have come to the resuce again.

It all works exactly how it should. Many thanks again

Rakuli · #11 (**permalink**) Sep 4th, 2007, 09:39

Glad I could help.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
linux text editor substitute for Crimson	highrik	Scripts and Online Services	2	May 17th, 2008 10:35
Forum text editor issue with IE.Fine in FF.	alicanteman	Web Page Design	0	Mar 2nd, 2008 21:38
Rich Text Editor	Monie	Webforumz Cafe	6	Nov 15th, 2007 01:24
[SOLVED] Text Editor	Monie	PHP Forum	15	Oct 19th, 2007 02:14
BBC Text Editor With Javascript	AdRock	JavaScript Forum	2	Oct 17th, 2007 15:10

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
BBcode text editor