• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!


Editor Events

Page history last edited by peter 14 years, 9 months ago

 There are several internal events sent from the nicEdit core that can be used in plugins and on your own javascript when doing advanced integration of the editor into your web sites.


blur Sent when an editor instance loses focus

Send when an editor gains focus (IE someone clicks inside it)


When the user presses a shortcut key (Such as control-b)

add Fired when a new instance is added
panel Fired when the toolbar is initialized for new instances (This is the preferred event if you want to add a function when NicEdit instances are created)


To attach functions to internal NicEdit events use the addEvent method on the nicInstance object


[some nicedit instance].addEvent([event name], [callback function]);


A common use of events is also to tell when the editor has finished loading


  1. bkLib.onDomLoaded(function(){
  2.   var myEditor = new nicEditor({fullPanel : true }).panelInstance('myArea2');
  3.   myEditor.addEvent('add', function() {
  4.     alert( myEditor.instanceById('myArea2').getContent() );
  5.   });
  6. });


Another example of using events to tell when an editor is blurred

  1. <script>
  2. bkLib.onDomLoaded(function(){
  3.   var myInstance = new nicEditor().panelInstance('myArea2');
  4.   myInstance.addEvent('blur', function() {
  5.     // Your code here that is called whenever the user blurs (stops editing) the nicedit instance
  6.   });
  7. });
  8. </script>


Comments (2)

scottchantry said

at 12:03 pm on Oct 26, 2009

Is there any way to create an onchange event? Right now I'm using onblur but that is too inefficient, every time I click anywhere it calls the event but I only want it if it's changed.

Richard Welsh said

at 6:39 am on Feb 12, 2010

Scott, I had the same problem, wanting to trap changes only and not every blur. In the end I managed it by keeping a background copy of the innerHTML value of the node being edited, and comparing against this in the blur event handler.

You don't have permission to comment on this page.