将Jquery代码转换为插件

Question

I"m trying to convert a Jquery code to a plugin. I'm having difficulties doing it as it is only working half properly. The code in question makes a textarea get a hover menu which enables the user to append markup tags to the textarea for bold, italics, underline and link. My conversion only makes the hover menu appear, but the actually adding of the markup tags are not working. The code which I'm trying to convert is found here: http://www.jankoatwarpspeed.com/post/2010/05/23/microsoft-office-minibar-jQuery-CSS3.aspx

Here's the whole generic code:

$(document).ready(function() {

            var mouseX = 0;

            var mouseY = 0;



            $("#description").mousemove(function(e) {

                // track mouse position

                mouseX = e.pageX;

                mouseY = e.pageY;

            });



            $("#description").mousedown(function() {

                $("#menu").fadeOut("1000");

            });



            $("#description").select(function() {

                // get the mouse position an show the menu

                $("#menu").css("top", mouseY - 30).css("left", mouseX + 10).fadeIn("1000");

            });



            $("#bold").click(function() {

                wrapText("<b>", "</b>");

                $("#menu").fadeOut("1000");

            });



            $("#italic").click(function() {

                wrapText("<i>", "</i>");

                $("#menu").fadeOut("1000");

            });



            $("#underline").click(function() {

                wrapText("<u>", "</u>");

                $("#menu").fadeOut("1000");

            });



            $("#link").click(function() {

                var url = prompt("Enter URL", "http://");

                if (url != null)

                    wrapText("<a href='" + url + "'>", "</a>");

                $("#menu").fadeOut("1000");

            });



            function wrapText(startText, endText){

                // Get the text before the selection

                var before = $("#description").val().substring(0, $("#description").caret().start);



                // Get the text after the selection

                var after = $("#description").val().substring($("#description").caret().end, $("#description").val().length);



                // merge text before the selection, a selection wrapped with inserted text and a text after the selection

                $("#description").val(before + startText + $("#description").caret().text + endText + after);



                // Update the preview

                $("#preview").html($("#description").val());

            }

        });

Here's where I"ve gotten in the conversion:

//You need an anonymous function to wrap around your function to avoid conflict
(function($){

    //Attach this new method to jQuery
    $.fn.extend({ 

        //This is where you write your plugin's name
        officebar: function() {

            //Iterate over the current set of matched elements
            return this.each(function() {

                 var mouseX = 0;

            var mouseY = 0;



            $(this).mousemove(function(e) {

                // track mouse position

                mouseX = e.pageX;

                mouseY = e.pageY;

            });



            $(this).mousedown(function() {

                $("#menu").fadeOut("1000");

            });



            $(this).select(function() {

                // get the mouse position an show the menu

                $("#menu").css("top", mouseY - 30).css("left", mouseX + 10).fadeIn("1000");

            });



            $("#bold").click(function() {

                wrapText("<b>", "</b>");

                $("#menu").fadeOut("1000");

            });



            $("#italic").click(function() {

                wrapText("<i>", "</i>");

                $("#menu").fadeOut("1000");

            });



            $("#underline").click(function() {

                wrapText("<u>", "</u>");

                $("#menu").fadeOut("1000");

            });



            $("#link").click(function() {

                var url = prompt("Enter URL", "http://");

                if (url != null)

                    wrapText("<a href='" + url + "'>", "</a>");

                $("#menu").fadeOut("1000");

            });



            function wrapText(startText, endText){

                // Get the text before the selection

                var before = $(this).val().substring(0, $(this).caret().start);



                // Get the text after the selection

                var after = $(this).val().substring($(this).caret().end, $(this).val().length);



                // merge text before the selection, a selection wrapped with inserted text and a text after the selection

                $(this).val(before + startText + $(this).caret().text + endText + after);



                // Update the preview

                //$("#preview").html($(this).val());

            }

            });
        }
    });

//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )       
})(jQuery);

The Menu HTML code:

<div id="menu">
    <a href="#" id="bold">b</a>
    <a href="#" id="italic">i</a>
    <a href="#" id="underline">u</a>
    <a href="#" id="link">Link</a>
</div>

The Menu CSS:

#menu {padding:5px; background-color:#f5f5f5;
       background-color:rgba(245, 245, 245, 0.6);
       display:none; position:absolute; top:0px; left:0px; overflow:hidden;
       border:solid 1px #929292; border-radius:3px; -moz-border-radius:3px;
       -webit-border-radius:3px; box-shadow: 5px 5px 5px #888;
       -moz-box-shadow: 1px 1px 3px #555; -webkit-box-shadow: 5px 5px 5px #888;}
#menu:hover {background-color:rgba(245, 245, 245, 1);}

I'm not sure if the function nested inside the plugin code is working properly though. Any idea why?

Answer 1

I think the problem is that inside the "wrapText" function, this won't be what you think it is.

Try adding

var self = this;

outside of the "wrapText" function, and then inside "wrapText" use $(self) instead of $(this) .

When I do that in your jsFiddle, it seems to work. Define "self" inside the ".each()" body.