BBC Text Editor With Javascript

[AdRock]

This is probably one for Rakuli as he has seen the JavaScript file in question.

I have a BBcode editor but there is no error trapping when checking if the form textarea is empty.

If I try and click one of the buttons for bold, italic etc without entering aything on the form I get the Error on Page in the bottom left corner and it points to line 29 with the message

"window.document.editform.content.value is null or not an object"

Here is the function which causes the error

Code: Select all

 
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+"++;");
    }
}

[Rakuli]

Hi Adrock,

I have seen it before but I also believe the code is fairly messy. I would like to have a shot at re-writing it to be better if you wanted.

If you prefer to run with what you have:

Do you want the user to be alerted of the error or just die gracefully? If you wanted to just suppress it you can change the onerror handler.

window.onerror = function () { return true; };


If you wanna give me a shot at it:

PM to file to me and I'll post the finished code here.

Cheers,

[Rakuli]

Okay, here is the finished javascript code... It is commented in reasonable detail....

Note that this can be used for any forum, just a matter of changing the id's that are being referenced in the code... Nothing in the form has to be changed (except adding id's where not already there)...

HTML: Select all

<script type="text/javascript">
//Javasript BBC text editor designed by Rakuli - www.openthource.com (You can get rid of this if you want ;)

// Javascript can have abstraction too, so let's abstract just about EVERYTHING


// Let's define the class In this one I have hard-coded a lot of things which kinda sux but we'll live 
// it still makes thing easier to change later on...
// The code here will be longer than your current code but nothing will be embedded in your html

function createTextEditor(txtName) 
// this takes the name of the textarea which needs to also be the name of the variable (just for ease of user and self referencing)
// We will create the variable later using var myTextEditor = new createTextEditor('myTextEditor');
{
	this.id			= txtName; // Name our object
	this.textarea	= document.getElementById(txtName); // Store a reference to textarea
	
	this.textarea.onselect = function () {this.storeCursor(this)};
	this.textarea.onchange = function () {this.storeCursor(this)};
	this.textarea.onkeyup  = function () {this.storeCursor(this)};
	this.textarea.onclick  = function () {this.storeCursor(this)};
	this.textarea.storeCursor = function () {
												// Make it easier to track the cursor in IE
											if (typeof(this.createTextRange) != "undefined")
												this.cursorPos = document.selection.createRange().duplicate();
											};
									
	
	// Okay, now we'll create an object for each of the formatting options you want
	// Same as the main, pass the ID of the 
	// To ease everything we'll give each child a parent propery
	
	this.boldText 	= new createSimpleText('boldText', 'Bold', 'b', this); 									
	this.italicText	= new createSimpleText('italicText', 'Italicise', 'i', this);								
	this.underLine 	= new createSimpleText('underLine', 'Underline', 'u', this);								
	this.mail		= new createSimpleText('mail', 'Email', 'mail', this);										
	this.quote		= new createSimpleText('quote', 'Quote', 'quote', this, '[quote=AuthorName]Text[/quote]');	
	this.url		= new createSimpleText('url', 'URL', 'url', this, '[url=URL]Link Name[/url]');
	this.fontColor  = new createSelectBoxText('fontColor', 'Font Color', 'color', this, '[color=colorName]Text[/color]');
	this.fontSize	= new createSelectBoxText('fontSize', 'Font Size', 'size', this, '[size=fontSize]Text[/size]');
	
	//the ID of the help box
	this.helpBox 	= document.getElementById('helpBox');
	
	this.showHelp	= function (helpTxt)
						{
							this.helpBox.innerHTML = helpTxt;
						};
	
	this.updateText = function (tagOpen, tagClose)
						{							
							// See if we have a selection and whether to replace or add or just slot in
							// IE makes this easy because we used the onselect function earlier
							if (typeof(this.textarea.cursorPos) != "undefined" && this.textarea.createTextRange)
							{
								var cursorPos = this.textarea.cursorPos, stored_length = cursorPos.text.length;
						
								cursorPos.text = cursorPos.text.charAt(cursorPos.text.length - 1) == ' ' ? tagOpen + cursorPos.text + tagClose + ' ' : tagOpen + cursorPos.text + tagClose;
						
								// If we are just inserting the tag where the cursor is sitting then we will place the cursor
								// between the tags (nifty ;) )
								if (stored_length == 0)
								{
									cursorPos.moveStart("character", -tagClose.length);
									cursorPos.moveEnd("character", -tagClose.length);
									cursorPos.select();
								}
								else
									this.textarea.focus(cursorPos);
							}
							
							// A little bit messier with REAL browsers ... 
							else if (typeof(this.textarea.selectionStart) != "undefined")
							{
								// store the text before the selection
								var strt = this.textarea.value.substr(0, this.textarea.selectionStart);
								// the actual selected text
								var selection = this.textarea.value.substr(this.textarea.selectionStart, this.textarea.selectionEnd - this.textarea.selectionStart);
								// store the text after the selection
								var fin = this.textarea.value.substr(this.textarea.selectionEnd);
								// put the cursor at the endo of the selection
								var cursorPos = this.textarea.selectionStart;
								var scrollPos = this.textarea.scrollTop; // make sure the cursor isn't invisible when we place it in
						
								this.textarea.value = strt + tagOpen + selection + tagClose + fin; // Write the tags
						
								if (this.textarea.setSelectionRange)
								{
									if (selection.length == 0)
									// put the cursor in the middle again if nothing is selected
										this.textarea.setSelectionRange(cursorPos + tagOpen.length, cursorPos + tagOpen.length);
									else
									// else place the cursor after the tag
										this.textarea.setSelectionRange(cursorPos, cursorPos + tagOpen.length + selection.length + tagClose.length);
									this.textarea.focus();
								}
								
								// scroll the required position
								this.textarea.scrollTop = scrollPos;
							}
							
							
							// Dunno what happened here, something went wrong so just plug it at the end...
							else
							{
								this.textarea.value += tagOpen + tagClose;
								this.textarea.focus(this.textarea.value.length - 1);
							}
						}
		
	this.insertSingleTag = function (tag) // This will insert a sinlge tag (like smilies or a <br /> or something)
									{
										
										// Pretty much same as above, but just one tag going in (this will overwrite selected text -- like pasting sometthing would)
										// Thankfully IE makes this easier too
										if (typeof(this.textarea.cursorPos) != "undefined" && this.textarea.createTextRange)
										{
											var cursorPos = this.textarea.cursorPos;
									
											cursorPos.text = cursorPos.text.charAt(cursorPos.text.length - 1) == ' ' ? tag + ' ' : tag;
											cursorPos.select();
										}
										// But messiness comes with real browsers
										else if (typeof(this.textarea.selectionStart) != "undefined")
										{
											var strt = this.textarea.value.substr(0, this.textarea.selectionStart);
											var fin = this.textarea.value.substr(this.textarea.selectionEnd);
											var scrollPos = this.textarea.scrollTop;
									
											this.textarea.value = strt + tag + fin
									
											if (this.textarea.setSelectionRange)
											{
												this.textarea.focus();
												this.textarea.setSelectionRange(strt.length + tag.length, strt.length + tag.length);
											}
											this.textarea.scrollTop = scrollPos;
										}
										// Just put it on the end.
										else
										{
											this.textarea.value += tag;
											this.textarea.focus(this.textarea.value.length - 1);
										}
									}
}

// Basically pass the id of the input, the name of the style, the opening tag, the closing tag, the parent and optionally an additional bit of text
// Use this function for creating simple things like [u][/u] [quote][/quote] where nothing needs to be dynamically added to the BBC tags..
function createSimpleText(inpName, txtName, tag, theParent, addHelpTxt)
{
	this.inpName			= document.getElementById(inpName); // store an object reference
	this.inpName._parent 	= theParent;
	
	this.inpName.tagOpen	= '[' + tag + ']'; // wrap up the tag in the square brackets
	this.inpName.tagClose	= '[/' + tag + ']';
	
	this.inpName.helpString = '<strong>' + txtName + ' Text : </strong> ' + this.inpName.tagOpen + ' text ' + this.inpName.tagClose + (addHelpTxt ? ' or ' + addHelpTxt : '');
	
	this.inpName.onmouseover 	= function () { this._parent.showHelp(this.helpString); };
	this.inpName.onmouseout  	= function () { this._parent.showHelp('');};
	
	this.inpName.onclick		= function () { this._parent.updateText(this.tagOpen, this.tagClose);};
}


function createSelectBoxText (inpName, txtName, tag, theParent, addHelpTxt)
{
	this.inpName			= document.getElementById(inpName); // store an object reference
	this.inpName._parent 	= theParent;
	
	
	this.inpName.tagOpen	= '[' + tag + '='; // add the parameter from the value of the selectBox
	this.inpName.tagClose	= '[/' + tag + ']';
	
	this.inpName.helpString = '<strong>' + txtName + ': </strong> ' + addHelpTxt;
	
	this.inpName.onmouseover 	= function () { this._parent.showHelp(this.helpString); };
	this.inpName.onmouseout  	= function () { this._parent.showHelp('');};
	
	this.inpName.onchange		= function () { this._parent.updateText(this.tagOpen + this.options[this.selectedIndex].value + ']', this.tagClose);};
}

</script>

Hope you and all users find this helpful....