How to make Nicedit only affect one textarea on a page as oposed to every textarea on the page

Question

I've been trying to use nicedit (http://nicedit.com/) on a form for my website (which I am using to submit short stories). The form includes several textareas (). One of them is for the content of the short story, which i want to use nicedit on. The other text area is for tags, which i do not want to use nicedit on. However, nicedit gets applied to both.

This is the javascript code i am using to call up the nicedit code

<script type="text/javascript" src="core/rte.js"></script> <script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>

I checked in the nicEdit.js and the allTextAreas() corresponds to this:

allTextAreas : function(nicOptions) {
var textareas = document.getElementsByTagName("textarea");
for(var i=0;i<textareas.length;i++) {
nicEditors.editors.push(new nicEditor(nicOptions).panelInstance(textareas[i]));
}
return nicEditors.editors;
},

I also investigated on the ingetnet and could find no answer as to how to make only one text area be affected by the nicedit code. Can anyone help?

Answer 1

From looking at the code you posted, this should work:

<script type="text/javascript" src="core/rte.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() {
    nicEditors.editors.push(
        new nicEditor().panelInstance(
            document.getElementById('myNicEditor')
        )
    );
});
//]]>
</script>

Just give your textarea whichever id you use:

<textarea id="myNicEditor"></textarea>

Answer 2

For anyone who's looking to do this with multiple textarea's by class name I'm using Nathan Wall's example with a few changes:

<script type="text/javascript">
  //<![CDATA[
  bkLib.onDomLoaded(function() {
    elementArray = document.getElementsByClassName("nice-edit");
    for (var i = 0; i < elementArray.length; ++i) {
      nicEditors.editors.push(
        new nicEditor().panelInstance(
          elementArray[i]
        )
      );
    }
  });
  //]]>
</script>

Use as many text areas as you'd like with the class name nice-edit:

<textarea class="nice-edit"></textarea>

In Rails I use CoffeeScript and this is my modified code:

$ ->
  #<![CDATA[
  elementArray = document.getElementsByClassName("nice-edit")
  i = 0
  while i < elementArray.length
    nicEditors.editors.push new nicEditor(fullPanel: true).panelInstance(elementArray[i])
    ++i
  #]]>

You'll notice I completely removed the bkLib.onDomLoaded line and just called the equivelant of document function do $ ->. The reason is bkLib.onDomLoaded fails to load initially because of turbolinks. It only works with a refresh. Thus why I've removed it.

Answer 3

I made it for all textareas by tagname using the original function as start point

<script type="text/javascript">

bkLib.onDomLoaded(function () {

    var textareas = document.getElementsByTagName("textarea");

    for(var i=0;i<textareas.length;i++)
     {
        var myNicEditor = new nicEditor();
        myNicEditor.panelInstance(textareas[i]);

     }
});