0

刚刚为 textarea 制作了我自己的 bbcodes 插件，但我无法纠正错误..

如果页面使用 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() 函数。
由于某种原因，它在第一个 textarea 中的迭代次数与页面上的 textarea 一样多。
因此，如果您有 2 个区域，函数将在第一个区域执行 2 次，然后在第二个区域执行 1 次。
如果你有 3 个区域，函数将在第一次执行 3 次，在第二次执行 2 次，在最后一次执行 1 次。
等等...

我建议大量调整您的脚本，以便您可以转发特定文本区域的 ID 参数，当您在 bbcode 按钮的 osme 上执行 onclick 事件时，您希望操作该参数，例如：

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