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