Demo 2 : NicEdit Configuration

NicEdit is highly configurable by passing the configuration when you create the NicEditor. Pass your configuration when you call:

new NicEditor({CONFIG HERE})

Add .panelInstance('ID TO TEXTAREA HERE') to add the editor to the textarea.

See the examples below:

Default (No Config Specified)

new nicEditor().panelInstance('area1');

All Available Buttons {fullPanel : true}

new nicEditor({fullPanel : true}).panelInstance('area2');

Change Path to Icon File {iconsPath : 'path/to/nicEditorIcons.gif'}

new nicEditor({iconsPath : 'nicEditorIcons.gif'}).panelInstance('area3');

Customize the Panel Buttons/Select List

{buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript']}

Set a maximum expansion size (maxHeight)

{maxHeight : 100}

Source Code

  1. <div id="sample">
  2.   <script type="text/javascript" src="//js.nicedit.com/nicEdit-latest.js"></script> 
  3.   <script type="text/javascript">
  4.  
  5.   bkLib.onDomLoaded(function() {
  6.         new nicEditor().panelInstance('area1');
  7.         new nicEditor({fullPanel : true}).panelInstance('area2');
  8.         new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');
  9.         new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance('area4');
  10.         new nicEditor({maxHeight : 100}).panelInstance('area5');
  11.   });
  12.   </script>
  13.   <h4>
  14.     Default (No Config Specified)
  15.   </h4>
  16.   <p>
  17.     new nicEditor().panelInstance('area1');
  18.   </p>
  19.   <textarea cols="50" id="area1"></textarea>
  20.   <h4>
  21.     All Available Buttons {fullPanel : true}
  22.   </h4>
  23.   <p>
  24.     new nicEditor({fullPanel : true}).panelInstance('area2');
  25.   </p>
  26.   <textarea cols="60" id="area2">Some Initial Content was in this textarea</textarea>
  27.   <h4>
  28.     Change Path to Icon File {iconsPath : 'path/to/nicEditorIcons.gif'}
  29.   </h4>
  30.   <p>
  31.     new nicEditor({iconsPath : 'nicEditorIcons.gif'}).panelInstance('area3');
  32.   </p>
  33.   <textarea cols="50" id="area3"></textarea>
  34.   <h4>
  35.     Customize the Panel Buttons/Select List
  36.   </h4>
  37.   <p>
  38.     {buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript']}
  39.   </p>
  40.   <textarea cols="50" id="area4">HTML content default in textarea</textarea>
  41.   <h4>
  42.     Set a maximum expansion size (maxHeight)
  43.   </h4>
  44.   <p>
  45.     {maxHeight : 100}
  46.   </p>
  47.   <textarea style="height: 100px;" cols="50" id="area5">HTML content default in textarea</textarea>
  48. </div>