install.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>OnChange event plugin</title>
  7. <link href="styles.css" rel="stylesheet" type="text/css">
  8. </head>
  9. <body>
  10. <h1>On Change event Plugin for CKEditor</h1>
  11. <h2>Introduction</h2>
  12. <p>This is a plugin that tries to fire a 'change' event whenever the content of a <a href="http://www.ckeditor.com">CKEditor</a> instance is changed.</p>
  13. <h3 id="contact">Author:</h3>
  14. <p><a href="mailto:amla70@gmail.com">Alfonso Mart&iacute;nez de Lizarrondo</a></p>
  15. <h3>Sponsored by:</h3>
  16. <p>Falcana</p>
  17. <h3>Version history: </h3>
  18. <ol>
  19. <li>1.0: 21-January-2011. First version.</li>
  20. <li>1.1: 3-September-2011. Fixed issues with the UndoManager events. Detect changes in Source mode.</li>
  21. <li>1.2: 18-September-2011. Avoid too many events in CKEditor 3.6.2. Filter keyboard to skip control and movement keys.</li>
  22. <li>1.3: 22-December-2011 Avoid firing the event after the editor has been destroyed.</li>
  23. <li>1.4: 7-September-2012 Don't fire events if the editor is readonly, thanks to Ulrich Gabor. Included code to use Mutation Observers.</li>
  24. <li>1.5: 20-October-2012 Detect Cut and Paste for IE in source mode thanks to Jacki.</li>
  25. <li>1.6: 18-November-2012 Detect multibyte characters thanks to Wouter.</li>
  26. <li>1.7: 6-December-2012 Compatibility with Source mode in CKEditor 4.</li>
  27. <li>1.8: 8-June-2013 Use setInterval fix by Roman Minkin.</li>
  28. </ol>
  29. <h2>Installation</h2>
  30. <h3>1. Copying the files</h3>
  31. <p>Extract the contents of the zip in you plugins directory, so it ends up like
  32. this<br>
  33. <!--<img src="installation.png" alt="Screenshot of installation" width="311" height="346" longdesc="#install">-->
  34. </p>
  35. <pre id="--install">
  36. ckeditor\
  37. ...
  38. images\
  39. lang\
  40. plugins\
  41. ...
  42. onchange\
  43. plugin.js
  44. docs\
  45. install.html
  46. ...
  47. skins\
  48. themes\
  49. </pre>
  50. <h3>2. Adding it to CKEditor</h3>
  51. <p>Now add the plugin in your <em>config.js</em> or custom js configuration
  52. file:
  53. <code>config.extraPlugins='onchange'; </code>
  54. </p>
  55. <h3>3. Configuration</h3>
  56. <p>You can limit the minimum time between changes to avoid getting too many events fired:
  57. <code>config.minimumChangeMilliseconds = 100; // 100 milliseconds (default value)
  58. </code>.</p>
  59. <h3>4. Use it</h3>
  60. <p>Write your listener for the new 'change' event and perform whatever action you need there.
  61. <code>editor.on( 'change', function(e) { console.log(e) });
  62. </code>.</p>
  63. <!--
  64. <h2>Final notes</h2>
  65. -->
  66. <h2>Disclaimers</h2>
  67. <p>CKEditor is &copy; CKSource.com</p>
  68. </body>
  69. </html>