Problem creating jQuery plugin with textareas

Question

I'm trying to modify this script that emulates the Word 2007 minibar in a textarea. I have wrapped it in a plugin, the problem is that it will not work with multiple textareas.

You can try it out at JSBin
(Just select som text in the first textarea and then click on the "b")

Can someone help me? I'm kinda lost.

Update

Should have mentioned that it shows up correctly in the preview, but it adds double tags in the textarea. And it doesn't work in Firefox or IE. Why?

It is very hackish, so I was hoping for someone do show me how to do it right.

It only works in Chrome as of now

Answer 1

First we'll address the double tags issue, they happen because of these handlers:

$("#bold").click(function() { ... });
$("#italic").click(function() { ... });
$("#underline").click(function() { ... });
$("#link").click(function() { ... });

They're being bound inside your .each() loop, meaning a handler is being bound for each element you're running your code on, creating n handlers for the same #bold element, just move these handlers outside your .each() loop (and be sure to .unbind() them or use .live(), in case the plugin is run more than once as well).

While we're at it, we should move the $(document).mousedown(function() { ... }); out of that loop as well, same issue of not wanting to bind it multiple times.

Your IE/Firefox problems are mostly the result of how the example is setup on JSBin (jQuery not being defined because of the includes), not actual code issues with the plugin. However since .select() can be used across browsers I think you can eliminate the $.browser.msie clause, at least in IE8 it's not needed, but be sure to test older versions if you want to support them.

With only the changes above and some code formatting improvements (.css() can take an object for example), I've setup your code for testing here.