Demo 3 : Add/Remove NicEditors

The demo below shows toggling the display of NicEditors on both textarea and div elements. NicEdit instances can be added and removed at any time

Div Example

This is some TEST CONTENT
In a DIV Tag
Click the Buttons to activate


Textarea Example


Source Code

  1. <div id="sample">
  2.   <h4>
  3.     Div Example
  4.   </h4>
  5.   <div id="myArea1" style="width: 300px; height: 100px; border: 1px solid #000;">
  6.     This is some TEST CONTENT<br>
  7.     In a DIV Tag<br>
  8.     Click the Buttons to activate
  9.   </div><button onclick="toggleArea1();">Toggle DIV Editor</button><br>
  10.   <br>
  11.   <h4>
  12.     Textarea Example
  13.   </h4>
  14.   <div>
  15.     <textarea style="width: 300px; height: 100px;" id="myArea2"></textarea><br>
  16.     <button onclick="addArea2();">Add Editor to TEXTAREA</button> <button onclick="removeArea2();">Remove Editor from TEXTAREA</button>
  17.   </div>
  18.   <div style="clear: both;"></div>
  19.   <script type="text/javascript" src="//js.nicedit.com/nicEdit-latest.js"></script> 
  21.  
  22.   var area1, area2;
  23.  
  24.   function toggleArea1() {
  25.         if(!area1) {
  26.                 area1 = new nicEditor({fullPanel : true}).panelInstance('myArea1',{hasPanel : true});
  27.         } else {
  28.                 area1.removeInstance('myArea1');
  29.                 area1 = null;
  30.         }
  31.   }
  32.  
  33.   function addArea2() {
  34.         area2 = new nicEditor({fullPanel : true}).panelInstance('myArea2');
  35.   }
  36.   function removeArea2() {
  37.         area2.removeInstance('myArea2');
  38.   }
  39.  
  40.   bkLib.onDomLoaded(function() { toggleArea1(); });
  41.   </script>
  42. </div>