Demo 5 : Editor Styles

NicEdit instances and the panel can be styled using CSS classes to fit the look and feel of your site.

This is text above the Panel
This is text below the Panel

Selected Style Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor, faucibus ac, iaculis non, cursus et, dui. Donec non urna. Aliquam volutpat ornare augue. Phasellus egestas, nisl fermentum porttitor rutrum, magna metus rutrum risus, id fringilla magna mi nec lorem. Etiam eget metus sed justo ultricies rhoncus. Praesent rhoncus arcu non dolor. Proin eu eros. Curabitur vehicula. Nulla vehicula lectus eget eros. Nulla vel nulla at dui dictum mollis. Etiam purus felis, pretium vel, eleifend id, consectetuer nec, purus. Vivamus pretium orci ac sapien. Etiam at tortor. Nunc tincidunt mi sed sapien. Etiam lacus pede, fermentum eu, blandit ac, congue eget, metus. Quisque sed sem. Mauris at sapien. Ut luctus.

Source Code

  1.  
  2. <style type="text/css">
  3. #myInstance1 {
  4.         border: 2px dashed #0000ff;
  5. }
  6. .nicEdit-selected {
  7.         border: 2px solid #0000ff !important;
  8. }
  9.  
  10. .nicEdit-panel {
  11.         background-color: #fff !important;
  12. }
  13.  
  14. .nicEdit-button {
  15.         background-color: #fff !important;
  16. }
  17. </style><div id="sample">
  18.   <script type="text/javascript" src="//js.nicedit.com/nicEdit-latest.js"></script> 
  19.   <script type="text/javascript">
  20.  
  21.      bkLib.onDomLoaded(function() {
  22.           var myNicEditor = new nicEditor();
  23.           myNicEditor.setPanel('myNicPanel');
  24.           myNicEditor.addInstance('myInstance1');
  25.      });
  26.   </script> This is text above the Panel
  27.   <div id="myNicPanel" style="width: 350px;"></div>This is text below the Panel<br>
  28.   <br>
  29.   <h4>
  30.     Selected Style Example
  31.   </h4>
  32.   <div id="myInstance1" style="font-size: 16px; background-color: #ccc; padding: 3px; width: 400px;">
  33.     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor, faucibus ac, iaculis non, cursus et, dui. Donec non urna. Aliquam volutpat ornare augue. Phasellus egestas, nisl
  34.     fermentum porttitor rutrum, magna metus rutrum risus, id fringilla magna mi nec lorem. Etiam eget metus sed justo ultricies rhoncus. Praesent rhoncus arcu non dolor. Proin eu eros. Curabitur
  35.     vehicula. Nulla vehicula lectus eget eros. Nulla vel nulla at dui dictum mollis. Etiam purus felis, pretium vel, eleifend id, consectetuer nec, purus. Vivamus pretium orci ac sapien. Etiam at
  36.     tortor. Nunc tincidunt mi sed sapien. Etiam lacus pede, fermentum eu, blandit ac, congue eget, metus. Quisque sed sem. Mauris at sapien. Ut luctus.
  37.   </div>
  38. </div>