title: Is it possible to mod the Rangyinputs jQuery plugin to become more dynamic?
body: <p>I want to use <a href="https://github.com/timdown/rangyinputs" rel="nofollow noreferrer">Rangyinputs jQuery plugin</a> in 4 different textareas on my site. I have moved the jQuery code (that, in the plugin demo, is placed in the html file) to a .js file instead and included it in the head-tag. I want all 4 textareas to be able to use it dynamically because I need to have <strong>different id:s of all the textareas</strong> (not id="ta", which is hardcoded into the plugin). I would also prefer if I could pass the text in replaceSelectedText() and surroundSelectedText() dynamically into the functions instead of being hardcoded as it is now.</p>
  
  <p>In short I want something like this (pseudo-code):</p>
  
  <ul>
  <li>$(document).ready(function**()** <em>to become</em>:</li>
  <li>$(document).ready**(function($TextareaName, $Text, $Before, $After)**</li>
  </ul>
  
  <p>...</p>
  
  <ul>
  <li>$ta.replaceSelectedText("[Text]") <em>to become</em>:</li>
  <li>$TextareaName.replaceSelectedText($Text)</li>
  <li>$ta.surroundSelectedText("[Before]", "[After]") <em>to become</em>:</li>
  <li>$TexareaName.surroundSelectedText($Before, $After)</li>
  </ul>
  
  <p>...</p>
  
  <ul>
  <li>input type="button" name="replaceSelectedTextAndCollapse" <em>to become</em>:</li>
  <li>input type="button" onClick="replaceSelectedTextAndCollapse($Textarea,$Text"</li>
  <li>input type="button" name="surroundSelectedText" <em>to become</em>:</li>
  <li>input type="button" onClick="surroundSelectedText($Textarea,$Before,$After)"</li>
  </ul>
  
  <p>Since I don't even know where to start (my main interest is php, not javascript or jQuery) I'm humbly turning to this awesome community! Sorry if my pseudo-code is more php-like than jQuery-like but I hope you get what I'm after and are able to point me in the right direction. Cheers!</p>
  
  <p><strong>head (.php file)</strong></p>
  
  <pre><code>&lt;!-- the plugin file --&gt;
  &lt;script type="text/javascript" src="../rangyinputs-jquery-src.js"&gt;&lt;/script&gt;
  &lt;!-- jQuery moved from the html-file (in the demo) to it's own file --&gt;
  &lt;script type="text/javascript" src="../rangyinputs.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>jQuery (.js file)</strong></p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
          var $ta = $("#ta");
          var $startIndex = $("#startIndex"), $endIndex = $("#endIndex");
  
          function reportSelection() {
              var sel = $ta.getSelection();
              $startIndex.text(sel.start);
              $endIndex.text(sel.end);
          }
  
          $(document).on("selectionchange", reportSelection);
          $ta.on("keyup input mouseup textInput", reportSelection);
  
          $ta.focus();
  
          reportSelection();
  
          $("input").mousedown(function(e) {
              e.preventDefault();
  
              switch (this.name) {
                  case "replaceSelectedTextAndCollapse":
                      $ta.replaceSelectedText("[Text]", "collapseToEnd");
                      break;
                  case "replaceSelectedTextAndSelect":
                      $ta.replaceSelectedText("[Text]", "select");
                      break;
                  case "deleteText":
                      $ta.deleteText( +$('#ta_start').val(), +$('#ta_end').val() );
                      break;
                  case "deleteSelectedText":
                      $ta.deleteSelectedText();
                      break;
                  case "extractSelectedText":
                      alert($ta.extractSelectedText());
                      break;
                  case "surroundSelectedText":
                      $ta.surroundSelectedText("[Before]", "[After]");
                      break;
                  case "collapseToStart":
                      $ta.collapseSelection(true);
                      break;
                  case "collapseToEnd":
                      $ta.collapseSelection(false);
                      break;
                  case "setSelection":
                      $ta.setSelection( +$('#ta_start').val(), +$('#ta_end').val() );
                      break;
              }
              $ta.focus();
  
              // For IE, which always shifts the focus onto the button
              window.setTimeout(function() {
                  $ta.focus();
              }, 0);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>buttons &amp; textarea (.php file)</strong></p>
  
  <pre><code>&lt;input type="button" class="unselectable" unselectable="on" name="replaceSelectedTextAndCollapse" value="paste test text"&gt;
  &lt;input type="button" class="unselectable" unselectable="on" name="replaceSelectedTextAndSelect" value="paste test text and select"&gt;
  &lt;input type="button" class="unselectable" unselectable="on" name="deleteText" value="delete text"&gt;
  &lt;input type="button" class="unselectable" unselectable="on" name="deleteSelectedText" value="delete selected text"&gt;
  &lt;input type="button" class="unselectable" unselectable="on" name="extractSelectedText" value="extract selected text"&gt;
  &lt;input type="button" class="unselectable" unselectable="on" name="surroundSelectedText" value="surround selected text"&gt;
  &lt;input type="button" class="unselectable" unselectable="on" name="collapseToStart" value="collapse to start"&gt;
  &lt;input type="button" class="unselectable" unselectable="on" name="collapseToEnd" value="collapse to end"&gt;
  
  Select/delete text from &lt;input type="text" id="ta_start" size="3" value="5"&gt; to
  &lt;input type="text" id="ta_end" size="3" value="7"&gt;
  &lt;input type="button" class="unselectable" unselectable="on" name="setSelection" value="set selection"&gt;
  
  Selection: &lt;b id="startIndex"&gt;&lt;/b&gt; to &lt;b id="endIndex"&gt;&lt;/b&gt;
  &lt;textarea rows="15" cols="80" id="ta"&gt;Some test text&lt;/textarea&gt;
  </code></pre>