0

皆さん、こんにちは。私は BB コード パーサーを作成していますが、JavaScript の前で立ち往生しています。テキストフィールドの選択に注意するためにjQueryとキャレットライブラリを使用しています。誰かがテキストを選択すると、書式設定オプションを含む div が表示されます。

2 つの問題があります。
問題 1.複数のテキストフィールドでこれを機能させるにはどうすればよいですか? 現在、テキストフィールドが入力されるまで正しく検出されるため、空白を描画しています

$("#BBtoolBox a").mousedown(function() { }

ループ。入力すると、私の目にはランダムなパターンでフィールドが次々とリストされ始めます。

!!! 主な問題 2.これが問題 1の主な理由でもあると思います。書式設定オプションを押すと、最初のアクションでは機能しますが、その後のアクションでは機能しません。変数parsedを複製し続けます。（1つのフィールドだけを保持すると、2番目のフィールドには印刷されません）

問題 3コードに特に醜いところがある場合は、自分自身を改善する方法を教えてください。

私が得ることができるすべての助けに感謝します。前もって感謝します

$(document).ready(function() {
    BBCP();
});

function BBCP(el) {
    if(!el) { el = "textarea"; }
    // Stores the cursor position of selection start

    $(el).mousedown(function(e) {
    coordX = e.pageX;
    coordY = e.pageY;

    // Event of selection finish by using keyboard
    }).keyup(function() {
        BBtoolBox(this, coordX, coordY);

    // Event of selection finish by using mouse
    }).mouseup(function() {
        BBtoolBox(this, coordX, coordY);

    // Event of field unfocus
    }).blur(function() {
        $("#BBtoolBox").hide();

    });

}

function BBtoolBox(el, coordX, coordY) {
    // Variable containing the selected text by Caret
    selection = $(el).caret().text;
    // Ignore the request if no text is selected
    if(selection.length == 0) {
        $("#BBtoolBox").hide();
        return;
    }
    // Print the toolbox
    if(!document.getElementById("BBtoolBox")) {
        $(el).before("<div id=\"BBtoolBox\" style=\"left: "+ ( coordX + 5 ) +"px; top: "+ ( coordY - 30 ) +"px;\"></div>");
        // List of actions
        $("#BBtoolBox").append("<a href=\"#\" onclick=\"return false\"><img src=\"./icons/text_bold.png\" alt=\"B\" title=\"Bold\" /></a>");
        $("#BBtoolBox").append("<a href=\"#\" onclick=\"return false\"><img src=\"./icons/text_italic.png\" alt=\"I\" title=\"Italic\" /></a>");

    } else {
        $("#BBtoolBox").css({'left': (coordX + 3) +'px', 'top': (coordY - 30) +'px'}).show();
    }

    // Parse the text according to the action requsted
    $("#BBtoolBox a").mousedown(function() {
        switch($(this).children(":first").attr("alt"))
        {
            case "B": // bold
                parsed = "[b]"+ selection +"[/b]";
                break;
            case "I": // italic
                parsed = "[i]"+ selection +"[/i]";
                break;
        }

        // Changes the field value by replacing the selection with the variable parsed
        $(el).val($(el).caret().replace(parsed));
        $("#BBtoolBox").hide();
        return false;
    });
}
4

1 に答える 1

0

この行:$("#BBtoolBox a").mousedown(function()関数をリンクに添付します。ただし、この行は複数回実行され、実行されるたびにリンクに別の機能が追加され、テキストが重複したままになります。

最適な解決策は、たとえばプラグインを使用することです (最初に見つけたもの): http://urlvars.com/code/example/19/using-jquery-bbcode-editor (デモ)

于 2010-04-19T05:27:15.110 に答える