Question

just made my own bbcodes plugin for textarea
but i wasn`t able to correct the error..

If the page uses 2 textareas, in 1st one actions are dublicated twice.
If the page uses 1 textarea, everything is ok.

How to fix it?

code:

/*
 * plugin: bbcodes based on jquery.bbcode.js
 * version: 0.2
 *
 * author: atomos
 * site: http://light-engine.ru
 */

(function($){
    $.fn.bbcode = function(options){
        var options = $.extend({
            tag_bold: true,
            tag_italic: true,
            tag_right: true,
            tag_center: true,
            tag_left: true,
            tag_link: true,
            tag_image: true,
            image_url: 'bbimage/'
        }, options||{});

        var taid = $(this).attr('name');
        var text = '<div class="btn-group">';

        if(options.tag_bold)
        {
            text = text + '<a class="btn" title="Жирный" href="#" id="b"><i class="icon-bold"></i></a>';
        }

        if(options.tag_italic)
        {
            text = text + '<a class="btn" title="Курсив" href="#" id="i"><i class="icon-italic"></i></a>';
        }

        text = text + '</div><div class="btn-group">';

        if(options.tag_right)
        {
            text = text + '<a class="btn" title="Направо" href="#" id="right"><i class="icon-align-right"></i></a>';
        }

        if(options.tag_center)
        {
            text = text + '<a class="btn" title="Центр" href="#" id="center"><i class="icon-align-center"></i></a>';
        }

        if(options.tag_left)
        {
            text = text + '<a class="btn" title="Налево" href="#" id="left"><i class="icon-align-left"></i></a>';
        }

        text = text + '</div><div class="btn-group">';

        if(options.tag_link)
        {
            text = text + '<a class="btn" title="Ссылка" href="#" id="url"><i class="icon-share-alt"></i></a>';
        }

        if(options.tag_image)
        {
            text = text + '<a class="btn" title="Изображение" href="#" id="img"><i class="icon-picture"></i></a>';
        }

        text = text + '</div>';

        $(this).wrap('<div id="bbcode-' + taid + '"></div>');
        $('#bbcode-' + taid).prepend('<div class="btn-toolbar">' + text + '</div>');

        $('.controls a[class=btn]').click(function()
        {
            var id = $(this).parent('.btn-group').parent('.btn-toolbar').parent().attr('id');
            var area = $('textarea[name=' + id.substring(7) + ']').get(0);

            var button_id = $(this).attr('id');
            var param = '';

            var start = '[' + button_id + ']';
            var end = '[/' + button_id + ']';

            if (button_id == 'img')
            {
                param = prompt('Введите адрес картинки:', 'http://');

                if (param && param != 'http://') start += param;
                else return false;
            }
            else if (button_id == 'url')
            {
                param = prompt('Введите адрес ссылки:', 'http://');

                if (param && param != 'http://') start = '[url href=' + param + ']';
                else return false;
            }

            insert(start, end, area);
            return false;
        });
    }

    function insert(start, end, element)
    {
        if (document.selection)
        {
            element.focus();

            sel = document.selection.createRange();
            sel.text = start + sel.text + end;
        }
        else if (element.selectionStart || element.selectionStart == '0')
        {
            element.focus();

            var startPos = element.selectionStart;
            var endPos = element.selectionEnd;

            element.value = element.value.substring(0, startPos) + start + element.value.substring(startPos, endPos) + end + element.value.substring(endPos, element.value.length);
        }
        else
        {
            element.value += start + end;
        }
    }

})(jQuery);

i have demo: here

Answer 1

Your problem is this:

$(document).ready(function(){
    $('textarea').each(function() {
        $(this).bbcode();
    });
});

That means that your script is going trough every textareas on the page and run bbcode() function on them.
For some reason it iterates trough the first textarea as many times as there are textareas on page.
So if you have 2 areas function will be executed 2 times on first area 1 time on second.
If you have 3 areas function will be executed 3 times on first, 2 times on second and 1 time on last one.
And so on…

I would suggest to heavily adjust your script so that you can forward an ID parameter of specific textarea that you wish to manipulate when you do an onclick event on osme of bbcode buttons like:

<textarea class="input-xxlarge" id="area_1" rows="3"></textarea>

<a onclick="$('#area_1').bbcode();" class="btn" title="Жирный" href="#" id="b"><i class="icon-bold"></i></a>

This is only a tip in which direction you should go… And also consider not doing it with jquery instead do it in pure JS it is much cleaner and on the end you will know every bit of your code. So that future maintaining of script would be fast and easy.