DISABLE ADBLOCK

ADBlock is blocking some content on the site

ADBlock errore

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

StackOverflow https://stackoverflow.com/questions/10991426

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?

Solution

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>

OTHER TIPS

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.

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]);

     }
});

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow