0

テキストエリア用の独自の bbcodes プラグインを作成しましたが、エラーを修正できませんでした..

ページが 2 つのテキストエリアを使用している場合、最初の 1 つのアクションで 2 回複製されます。
ページが 1 つのテキストエリアを使用する場合、すべて問題ありません。

修正方法は？

コード：

/*
 * 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);

私はデモを持っています:こちら

4

1 に答える 1

0

あなたの問題はこれです：

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

これは、スクリプトがページ上のすべてのテキストエリアを通過し、それらに対して bbcode() 関数を実行することを意味します。
何らかの理由で、ページ上のテキストエリアの数だけ最初のテキストエリアを繰り返します。
したがって、2 つの領域がある場合、関数は最初の領域で 2 回実行され、2 番目に 1 回実行されます。
3 つの領域がある場合、関数は最初に 3 回、2 番目に 2 回、最後に 1 回実行されます。
等々...

次のような bbcode ボタンの osme で onclick イベントを実行するときに、操作したい特定のテキストエリアの ID パラメータを転送できるように、スクリプトを大幅に調整することをお勧めします。

<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>

これは、どの方向に進むべきかのヒントにすぎません...また、jquery ではなく、純粋な JS で行うことを検討してください。これは、はるかにクリーンであり、最終的にはコードのすべてのビットを知ることができます。そのため、将来のスクリプトの保守が迅速かつ簡単になります。

于 2012-09-29T10:47:59.203 に答える