Greetings everyone,
I'm making a BB Code Parser but I'm stuck on the JavaScript front. I'm using jQuery and the caret library for noting selections in a text field. When someone selects a piece of text a div with
formatting options will appear.
I have two issues.
Issue 1. How can I make this work for multiple textfields? I'm drawing a blank as it currently will detect the textfield correctly until it enters the
$("#BBtoolBox a").mousedown(function() { }
loop. After entering it will start listing one field after another in a random pattern in my eyes.
!!! MAIN Issue 2. I'm guessing this is the main reason for issue 1 as well. When I press a
formatting option it will work on the first action but not the ones afterwards. It keeps duplicating the variable parsed. (if I only keep to one field it will never print in the second)
Issue 3 If you find anything especially ugly in the code, please tell me how to improve myself.
I appriciate all help I can get. Thanks in advance
$(document).ready(function() {
BBCP();
});
function BBCP(el) {
if(!el) { el = "textarea"; }
// Stores the cursor position of selection start
$(el).mousedown(function(e) {
coordX = e.pageX;
coordY = e.pageY;
// Event of selection finish by using keyboard
}).keyup(function() {
BBtoolBox(this, coordX, coordY);
// Event of selection finish by using mouse
}).mouseup(function() {
BBtoolBox(this, coordX, coordY);
// Event of field unfocus
}).blur(function() {
$("#BBtoolBox").hide();
});
}
function BBtoolBox(el, coordX, coordY) {
// Variable containing the selected text by Caret
selection = $(el).caret().text;
// Ignore the request if no text is selected
if(selection.length == 0) {
$("#BBtoolBox").hide();
return;
}
// Print the toolbox
if(!document.getElementById("BBtoolBox")) {
$(el).before("<div id=\"BBtoolBox\" style=\"left: "+ ( coordX + 5 ) +"px; top: "+ ( coordY - 30 ) +"px;\"></div>");
// List of actions
$("#BBtoolBox").append("<a href=\"#\" onclick=\"return false\"><img src=\"./icons/text_bold.png\" alt=\"B\" title=\"Bold\" /></a>");
$("#BBtoolBox").append("<a href=\"#\" onclick=\"return false\"><img src=\"./icons/text_italic.png\" alt=\"I\" title=\"Italic\" /></a>");
} else {
$("#BBtoolBox").css({'left': (coordX + 3) +'px', 'top': (coordY - 30) +'px'}).show();
}
// Parse the text according to the action requsted
$("#BBtoolBox a").mousedown(function() {
switch($(this).children(":first").attr("alt"))
{
case "B": // bold
parsed = "[b]"+ selection +"[/b]";
break;
case "I": // italic
parsed = "[i]"+ selection +"[/i]";
break;
}
// Changes the field value by replacing the selection with the variable parsed
$(el).val($(el).caret().replace(parsed));
$("#BBtoolBox").hide();
return false;
});
}
