Проблема создания плагина jQuery с textareas

Question

Я пытаюсь изменить этот скрипт , который эмулирует мини-бар Word 2007 в текстовой области.Я завернул его в плагин, проблема в том, что он не будет работать с несколькими текстовыми областями.

Вы можете попробовать его на JSBin (Просто выделите текст в первом текстовом поле, а затем нажмите «b»)

Кто-нибудь может мне помочь?Я немного потерян.

Обновление

Должен был упомянуть, что он правильно отображается в предварительном просмотре, но он добавляет двойные теги в текстовой области.И это не работает в Firefox или IE.Почему?

Это очень хакерски, поэтому я надеялся, что кто-нибудь покажет мне, как это сделать правильно.

На данный момент работает только в Chrome

Answer 1

Сначала мы обратимся к проблеме двойных тегов, они возникают из-за следующих обработчиков:

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

Они связаны внутри вашего .each() цикла, что означает, что для каждого элемента, на котором вы запускаете код, привязывается обработчик, создавая обработчики n для тот же элемент #bold, просто переместите эти обработчики за пределы цикла .each() (и обязательно .unbind() их или используйте .live(), в случае, если плагин запускается более одного раза).

Пока мы это делаем, мы должны вывести $(document).mousedown(function() { ... }); из этого цикла, то же самое, если не хотеть связывать его несколько раз.

Ваши проблемы с IE / Firefox в основном являются результатом того, как пример настроен на JSBin (jQuery не определен из-за включений), а не фактическими проблемами кода с плагином. Однако, поскольку .select() можно использовать в разных браузерах, я думаю, что вы можете исключить предложение $.browser.msie, по крайней мере, в IE8 оно не требуется, но обязательно протестируйте старые версии, если вы хотите их поддерживать.

С учетом только указанных выше изменений и некоторых улучшений форматирования кода (.css() может взять объект, например), Я настроил ваш код для тестирования здесь .