Javascript 是否可以修改Rangyinputs jQuery插件，使其变得更加动态？

我想在我的网站上使用4个不同的文本区域。我已经将jQuery代码（在插件演示中放在html文件中）移到了一个.js文件中，并将其包含在head标记中。我希望所有4个textareas都能够动态使用它，因为我需要所有textareas的不同id:s（而不是硬编码到插件中的id=“ta”）。我还希望能够将replaceSelectedText（）和surroundSelectedText（）中的文本动态传递到函数中，而不是像现在这样硬编码

简而言之，我想要这样的东西（伪代码）：

• $（文档）.ready（函数**（）**将变为：
• $（文档）.ready**（函数（$TextareaName，$Text，$Before，$After）**

• $ta.replaceSelectedText（“[Text]”）将变为：
• $TextareaName.replaceSelectedText（$Text）
• $ta.surroundSelectedText（“[之前]”、“[之后]”）将变为：
• $TexareaName.surroundSelectedText（$Before，$After）

• 输入type=“button”name=“replaceSelectedTextAndCollapse”变为：
• input type=“button”onClick=“replaceSelectedTextAndCollapse（$Textarea，$Text”
• 输入type=“button”name=“surroundSelectedText”变为：
• 输入type=“button”onClick=“surroundSelectedText（$Textarea，$Before，$After）”

因为我甚至不知道从哪里开始（我的主要兴趣是php，而不是javascript或jQuery），我很谦虚地转向这个很棒的社区！如果我的伪代码更像php而不是jQuery，我很抱歉，但我希望你明白我的意思，并且能够为我指明正确的方向。干杯

head（.php文件）

jQuery（.js文件）

$（文档）.ready（函数（）{
var$ta=$（“#ta”）；
变量$startIndex=$（“#startIndex”），$endIndex=$（“#endIndex”）；
函数reportSelection（）{
var sel=$ta.getSelection（）；
$startIndex.text（选择开始）；
$endIndex.text（sel.end）；
}
$（文档）。打开（“selectionchange”，报告选择）；
$ta.on（“按键输入鼠标点击文本输入”，报告选择）；
$ta.focus（）；
reportSelection（）；
$（“输入”）.mousedown（函数（e）{
e、 预防默认值（）；
开关（此.name）{
案例“replaceSelectedTextAndCollapse”：
$ta.replaceSelectedText（“[Text]”，即“collapseToEnd”）；
打破
案例“replaceSelectedTextAndSelect”：
$ta.replaceSelectedText（“[Text]”，即“select”）；
打破
案例“删除文本”：
$ta.deleteText（+$（'ta#u start'）.val（），++$（'ta#u end'）.val（））；
打破
案例“deleteSelectedText”：
$ta.deleteSelectedText（）；
打破
案例“extractSelectedText”：
警报（$ta.extractedselectedtext（））；
打破
案例“surroundSelectedText”：
$ta.surroundSelectedText（“[之前]”、“[之后]”）；
打破
案例“collapseToStart”：
$ta.collapseSelection（真）；
打破
案例“collapseToEnd”：
$ta.collapseSelection（假）；
打破
“选举”一案：
$ta.setSelection（+$（'ta#u start'）.val（），++$（'ta#u end'）.val（））；
打破
}
$ta.focus（）；
//对于IE，它总是将焦点转移到按钮上
setTimeout（函数（）{
$ta.focus（）；
}, 0);
});
});

按钮和文本区（.php文件）

从中选择/删除文本到
选择：至
一些测试文本

好的，有几件事（希望）能引导你前进

首先，关于

$（document）.ready（）

。这是一个监视页面加载过程的jQuery函数。一旦安全加载初始文档，它将执行作为参数提供的函数。由于jQuery调用了您提供的函数，因此无法向其传递参数

因此，您希望这样做：

$（文档）.ready（函数（$TextareaName，$Text，$Before，$After）.

这是不可能的

相反，您需要创建一个对象来包装rangyInputs命令。实现这一点的方法比我将要展示的有所改进，但我想介绍一种最直接的方法，使其尽可能简单

在您的

ready

功能中，我们需要执行以下操作：

$(document).ready(function() {
    // additional parameters are passed to the functions as needed
    function RangyInputsWrapper(elTA) {
        var elTextArea = elTA;
        this.surroundSelectedText = function(textBefore, textAfter) {
            elTextArea.surroundSelectedText(textBefore, textAfter);
        };
        this.replaceSelectedTextAndCollapse = function(text) {
            elTextArea.replaceSelectedTextAndCollapse(text);
        };
        // additional functions to wrap the RangyInputs calls as needed
    }
    var myWrapper = new RangyInputsWrapper($("#test"));
    $("#replaceSelectedTextAndCollapse").click(function() {
        myWrapper.replaceSelectedTextAndCollapse("Substitute Text");
    });
    $("#surroundSelectedText").click(function() {
        myWrapper.surroundSelectedText("BEFORE", "AFTER");
    });
});

我们在这里所做的是创建一个对象

myWrapper

，它可以记住您试图操作的文本区域。如果您在一个页面上有多个文本区域，您可以创建多个对象-只需创建一个

myWrapper2

（或您想调用的任何对象，以及

新的RangyInputsWrapper（$（“#xyz”））

引用id为

xyz的相应文本区域

现在，
myWrapper
变量可以访问由
RangyInputsWrapper
定义的函数，因此您可以使用适当的点击处理程序连接按钮。我已经硬连接了使用的文本，建议您在看到预期的替换发生之前保持这种方式。之后，您可以您需要在单击处理程序中执行一些jQuery工作，以获取您感兴趣的文本

上面的代码假定页面上有以下HTML：

<textarea id="test" title="Test Area">A bunch of text here to experiment with.</textarea>
<input type="button" id="replaceSelectedTextAndCollapse" />
<input type="button" id="surroundSelectedText" />

这里有一堆文本可供实验。

我希望这有助于你进入下一个阶段。我怀疑你的学习曲线会很陡峭，但要想做你想做的事，你需要真正深入到这一步来
<input type="button" class="unselectable" unselectable="on" name="replaceSelectedTextAndCollapse" value="paste test text">
<input type="button" class="unselectable" unselectable="on" name="replaceSelectedTextAndSelect" value="paste test text and select">
<input type="button" class="unselectable" unselectable="on" name="deleteText" value="delete text">
<input type="button" class="unselectable" unselectable="on" name="deleteSelectedText" value="delete selected text">
<input type="button" class="unselectable" unselectable="on" name="extractSelectedText" value="extract selected text">
<input type="button" class="unselectable" unselectable="on" name="surroundSelectedText" value="surround selected text">
<input type="button" class="unselectable" unselectable="on" name="collapseToStart" value="collapse to start">
<input type="button" class="unselectable" unselectable="on" name="collapseToEnd" value="collapse to end">

Select/delete text from <input type="text" id="ta_start" size="3" value="5"> to
<input type="text" id="ta_end" size="3" value="7">
<input type="button" class="unselectable" unselectable="on" name="setSelection" value="set selection">

Selection: <b id="startIndex"></b> to <b id="endIndex"></b>
<textarea rows="15" cols="80" id="ta">Some test text</textarea>

$(document).ready(function() {
    // additional parameters are passed to the functions as needed
    function RangyInputsWrapper(elTA) {
        var elTextArea = elTA;
        this.surroundSelectedText = function(textBefore, textAfter) {
            elTextArea.surroundSelectedText(textBefore, textAfter);
        };
        this.replaceSelectedTextAndCollapse = function(text) {
            elTextArea.replaceSelectedTextAndCollapse(text);
        };
        // additional functions to wrap the RangyInputs calls as needed
    }
    var myWrapper = new RangyInputsWrapper($("#test"));
    $("#replaceSelectedTextAndCollapse").click(function() {
        myWrapper.replaceSelectedTextAndCollapse("Substitute Text");
    });
    $("#surroundSelectedText").click(function() {
        myWrapper.surroundSelectedText("BEFORE", "AFTER");
    });
});

<textarea id="test" title="Test Area">A bunch of text here to experiment with.</textarea>
<input type="button" id="replaceSelectedTextAndCollapse" />
<input type="button" id="surroundSelectedText" />