events.php 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!--
  3. Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
  4. For licensing, see LICENSE.html or http://ckeditor.com/license
  5. -->
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head>
  8. <title>Adding Event Handlers &mdash; CKEditor Sample</title>
  9. <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
  10. <link href="../sample.css" rel="stylesheet" type="text/css"/>
  11. </head>
  12. <body>
  13. <h1 class="samples">
  14. CKEditor Sample &mdash; Adding Event Handlers
  15. </h1>
  16. <div class="description">
  17. <p>
  18. This sample shows how to add event handlers to CKEditor with PHP.
  19. </p>
  20. <p>
  21. A snippet of the configuration code can be seen below; check the source code of this page for
  22. the full definition:
  23. </p>
  24. <pre class="samples">&lt;?php
  25. // Include the CKEditor class.
  26. include("ckeditor/ckeditor.php");
  27. // Create a class instance.
  28. $CKEditor = new CKEditor();
  29. // Path to the CKEditor directory.
  30. $CKEditor->basePath = '/ckeditor/';
  31. // The initial value to be displayed in the editor.
  32. $initialValue = 'This is some sample text.';
  33. // Add event handler, <em>instanceReady</em> is fired when editor is loaded.
  34. $CKEditor-><strong>addEventHandler</strong>('instanceReady', 'function (evt) {
  35. alert("Loaded editor: " + evt.editor.name);
  36. }');
  37. // Create an editor instance.
  38. $CKEditor->editor("editor1", $initialValue);
  39. </pre>
  40. </div>
  41. <!-- This <div> holds alert messages to be display in the sample page. -->
  42. <div id="alerts">
  43. <noscript>
  44. <p>
  45. <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
  46. support, like yours, you should still see the contents (HTML data) and you should
  47. be able to edit it normally, without a rich editor interface.
  48. </p>
  49. </noscript>
  50. </div>
  51. <form action="../sample_posteddata.php" method="post">
  52. <label>Editor 1:</label>
  53. <?php
  54. /**
  55. * Adds a global event, will hide the "Target" tab in the "Link" dialog window in all instances.
  56. */
  57. function CKEditorHideLinkTargetTab(&$CKEditor) {
  58. $function = 'function (ev) {
  59. // Take the dialog window name and its definition from the event data.
  60. var dialogName = ev.data.name;
  61. var dialogDefinition = ev.data.definition;
  62. // Check if the definition comes from the "Link" dialog window.
  63. if ( dialogName == "link" )
  64. dialogDefinition.removeContents("target")
  65. }';
  66. $CKEditor->addGlobalEventHandler('dialogDefinition', $function);
  67. }
  68. /**
  69. * Adds a global event, will notify about an open dialog window.
  70. */
  71. function CKEditorNotifyAboutOpenedDialog(&$CKEditor) {
  72. $function = 'function (evt) {
  73. alert("Loading a dialog window: " + evt.data.name);
  74. }';
  75. $CKEditor->addGlobalEventHandler('dialogDefinition', $function);
  76. }
  77. // Include the CKEditor class.
  78. include("../../ckeditor.php");
  79. // Create a class instance.
  80. $CKEditor = new CKEditor();
  81. // Set a configuration option for all editors.
  82. $CKEditor->config['width'] = 750;
  83. // Path to the CKEditor directory, ideally use an absolute path instead of a relative dir.
  84. // $CKEditor->basePath = '/ckeditor/'
  85. // If not set, CKEditor will try to detect the correct path.
  86. $CKEditor->basePath = '../../';
  87. // The initial value to be displayed in the editor.
  88. $initialValue = '<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>';
  89. // Event that will be handled only by the first editor.
  90. $CKEditor->addEventHandler('instanceReady', 'function (evt) {
  91. alert("Loaded editor: " + evt.editor.name);
  92. }');
  93. // Create the first instance.
  94. $CKEditor->editor("editor1", $initialValue);
  95. // Clear event handlers. Instances that will be created later will not have
  96. // the 'instanceReady' listener defined a couple of lines above.
  97. $CKEditor->clearEventHandlers();
  98. ?>
  99. <br />
  100. <label>Editor 2:</label>
  101. <?php
  102. // Configuration that will only be used by the second editor.
  103. $config['width'] = '600';
  104. $config['toolbar'] = 'Basic';
  105. // Add some global event handlers (for all editors).
  106. CKEditorHideLinkTargetTab($CKEditor);
  107. CKEditorNotifyAboutOpenedDialog($CKEditor);
  108. // Event that will only be handled by the second editor.
  109. // Instead of calling addEventHandler(), events may be passed as an argument.
  110. $events['instanceReady'] = 'function (evt) {
  111. alert("Loaded second editor: " + evt.editor.name);
  112. }';
  113. // Create the second instance.
  114. $CKEditor->editor("editor2", $initialValue, $config, $events);
  115. ?>
  116. <p>
  117. <input type="submit" value="Submit"/>
  118. </p>
  119. </form>
  120. <div id="footer">
  121. <hr />
  122. <p>
  123. CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
  124. </p>
  125. <p id="copy">
  126. Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
  127. Knabben. All rights reserved.
  128. </p>
  129. </div>
  130. </body>
  131. </html>