_samples/php/events.php

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