PDA

View Full Version : JavaScript BBcode text editor



AdRock
09-03-2007, 10:43 AM
I found a Javascript BBcode text editor here (http://www.iceteks.com/articles.php/javascript/1) and I have it all working correctly apart from that it doesn't apply the tags correctly to font size and color changes.


//Function for adding font color and size tags

function font(bbopen, bbclose) {
var post = document.editform.post;
post.value += bbopen + bbclose;
post.focus();
return;
}
It does say there that it doesn't do it but it should be possible to get it working

This function is even simpler. The opening tag and closing tag are both supplied as variables to the function and all that happens is they are both tacked onto the end of the users post. In some bbcode editors (certainly phpBB and probably others) highlighting text and then using this function will wrap the highlighted text in the appropriate bbcode tags. This editor doesn't have this functionality. If this is something you feel your users will need it should be possible to reconstruct this functionality by looking at the source html for an editor that allows this.

Anyway, here is the complete JS file

//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: text";
italic_help = "Italic text: text";
underline_help = "Underline text: text";
quote_help = "Quote text:
text or
text";
email_help = "Insert email: email";
img_help = "Insert image: http://image_url";
url_help = "Insert URL: http://url or URL text (http://url)";
fontcolor_help = "Font color: text Tip: you can also use color=#FF0000";
fontsize_help = "Font size: small text";

//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
10-06-2007, 09:54 PM
All working!!!!