bbEditor

$(document).ready(function(){
    var textarea = $(".bbEditor");
    var selected = false;

    var bButton = {title: "Bold", iconNum: 0, action: function(){insertTags("b");}};
    var urlButton = {title: "Insert hyperlink", iconNum: 1, action: function(){showUrlDialog();}};

    function addToolbar(textarea, featureList){
        $(textarea).before(createButton(bButton));
        $(textarea).before(createButton(urlButton));
    }

    function createButton(buttonData){
        return $("<button/>", {
            title: buttonData.title,
            type: "button"
        }).click(buttonData.action);
    }

    function showUrlDialog(){
        if (selected){
            var selection = textarea.selection("get");
        } else {
            var selection = "";
        }

        var dialog = $("<div/>", {
            "class": "dialog",
            html: '<form><label for="dialog_url_link">URL</label><input id="dialog_url_link" type="text" value="" /><br /><label for="dialog_url_text">Text</label><input id="dialog_url_text" type="text" value="' + selection + '" /></form>'
        });

        dialog.dialog({
            modal: true,
            title: "Insert hyperlink",
            buttons: {
                "Insert": function(){
                    var urlText = $("#dialog_url_text").val();
                    var urlLink = $("#dialog_url_link").val();

                    if (urlText.length){
                        insertTagsWithParams("url", [urlLink], urlText);
                    }
                    else{
                        insertTags("url", urlLink);
                    }

                    $(this).dialog("close");
                },
                "Cancel": function(){
                    $(this).dialog("close");
                }
            }
        });
    }

    function insertTags(tag, text){
        var openTag = "[" + tag + "]";
        var closeTag = "[/" + tag + "]";

        _insertTag(openTag, closeTag, text);
    }

    function insertTagsWithParams(tag, params, text)
    {
        var joined = params.join(";");

        var openTag = "[" + tag + "=" + joined + "]";
        var closeTag = "[/" + tag + "]";

        _insertTag(openTag, closeTag, text);
    }

    function _insertTag(openTag, closeTag, text)
    {
        if (text === undefined){
            text = "";
        }

        if (selected)
        {
            var textToInsert = openTag + textarea.selection("get") + closeTag;

            textarea.selection("replace", {
                text: textToInsert,
                caret: "end"
            });

            var caretPosition =  textarea.selection("getPos");
            var caretTargetPosition = caretPosition.end - closeTag.length;
        }
        else
        {
            textarea.selection("insert", {
                text: openTag + text + closeTag,
                mode: "after",
                caret: "end"
            });

            var caretPosition = textarea.selection("getPos");
            var caretTargetPosition = caretPosition.start + openTag.length;
        }

        textarea.selection("setPos", {
            start: caretTargetPosition,
            end: caretTargetPosition
        });

        selected = false;
    }

    textarea.select(function(){
        selected = true;
    });

    addToolbar(textarea, []);
});