Problème lors de la création du plugin jQuery avec des zones de texte

Question

J'essaie de modifier ce script qui émule le minibar Word 2007 dans une zone de texte. Je l'ai enveloppé dans un plugin, le problème est qu'il ne fonctionnera pas avec plusieurs textareas.

You can try it out at JSBin
(Il suffit de sélectionner le texte som dans la première zone de texte puis cliquez sur le "b")

quelqu'un peut me aider? Je suis un peu perdu.

Mise à jour

aurait dû mentionner qu'il affiche correctement dans l'aperçu, mais il ajoute doubles balises dans la zone de texte. Et cela ne fonctionne pas dans Firefox ou IE. Pourquoi?

C'est très hackish, alors j'espérais que quelqu'un me montre comment faire les choses correctement.

Il ne fonctionne que dans Chrome à partir de maintenant

Answer 1

D'abord, nous allons aborder la question de la double tags, ils se produisent à cause de ces gestionnaires:

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

Ils être lié à l'intérieur votre boucle .each(), ce qui signifie qu'un gestionnaire est lié pour chaque élément sur lequel vous exécutez votre code, créant n main lers pour le même élément #bold, il suffit de déplacer ces gestionnaires en dehors de votre boucle .each() (et assurez-vous de les .unbind() ou utilisez .live(), au cas où le plugin est exécuté plus d'une fois).

Alors que nous y sommes, nous devrions également déplacer le $(document).mousedown(function() { ... }); de cette boucle, le même problème de ne pas vouloir le lier plusieurs fois. Vos problèmes IE/Firefox sont principalement le résultat de la configuration de l'exemple sur JSBin (jQuery n'étant pas défini en raison de l'inclusion), pas de problèmes de code réels avec le plugin. Cependant, depuis .select() peut être utilisé dans les navigateurs, je pense que vous pouvez éliminer la clause $.browser.msie, au moins dans IE8 ce n'est pas nécessaire, mais assurez-vous de tester les anciennes versions si vous voulez les soutenir. Avec seulement les changements ci-dessus et quelques améliorations de formatage de code (.css() peut prendre un objet par exemple), I've setup your code for testing here.