| [ Index ] |
PHP Cross Reference of Drupal 6 (gatewave) |
[Summary view] [Print] [Text view]
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-2010, 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>Using API to customize dialogs - CKEditor Sample</title> 9 <meta content="text/html; charset=utf-8" http-equiv="content-type" /> 10 <script type="text/javascript" src="../ckeditor.js"></script> 11 <script src="sample.js" type="text/javascript"></script> 12 <link href="sample.css" rel="stylesheet" type="text/css" /> 13 <style id="styles" type="text/css"> 14 15 .cke_button_myDialogCmd .cke_icon 16 { 17 display: none !important; 18 } 19 20 .cke_button_myDialogCmd .cke_label 21 { 22 display: inline !important; 23 } 24 25 </style> 26 <script type="text/javascript"> 27 //<![CDATA[ 28 29 // When opening a dialog, its "definition" is created for it, for 30 // each editor instance. The "dialogDefinition" event is then 31 // fired. We should use this event to make customizations to the 32 // definition of existing dialogs. 33 CKEDITOR.on( 'dialogDefinition', function( ev ) 34 { 35 // Take the dialog name and its definition from the event 36 // data. 37 var dialogName = ev.data.name; 38 var dialogDefinition = ev.data.definition; 39 40 // Check if the definition is from the dialog we're 41 // interested on (the "Link" dialog). 42 if ( dialogName == 'link' ) 43 { 44 // Get a reference to the "Link Info" tab. 45 var infoTab = dialogDefinition.getContents( 'info' ); 46 47 // Add a text field to the "info" tab. 48 infoTab.add( { 49 type : 'text', 50 label : 'My Custom Field', 51 id : 'customField', 52 'default' : 'Sample!', 53 validate : function() 54 { 55 if ( /\d/.test( this.getValue() ) ) 56 return 'My Custom Field must not contain digits'; 57 } 58 }); 59 60 // Remove the "Link Type" combo and the "Browser 61 // Server" button from the "info" tab. 62 infoTab.remove( 'linkType' ); 63 infoTab.remove( 'browse' ); 64 65 // Set the default value for the URL field. 66 var urlField = infoTab.get( 'url' ); 67 urlField['default'] = 'www.example.com'; 68 69 // Remove the "Target" tab from the "Link" dialog. 70 dialogDefinition.removeContents( 'target' ); 71 72 // Add a new tab to the "Link" dialog. 73 dialogDefinition.addContents({ 74 id : 'customTab', 75 label : 'My Tab', 76 accessKey : 'M', 77 elements : [ 78 { 79 id : 'myField1', 80 type : 'text', 81 label : 'My Text Field' 82 }, 83 { 84 id : 'myField2', 85 type : 'text', 86 label : 'Another Text Field' 87 } 88 ] 89 }); 90 91 // Rewrite the 'onFocus' handler to always focus 'url' field. 92 dialogDefinition.onFocus = function() 93 { 94 var urlField = this.getContentElement( 'info', 'url' ); 95 urlField.select(); 96 }; 97 } 98 }); 99 100 //]]> 101 </script> 102 103 </head> 104 <body> 105 <h1> 106 CKEditor Sample 107 </h1> 108 <!-- This <div> holds alert messages to be display in the sample page. --> 109 <div id="alerts"> 110 <noscript> 111 <p> 112 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript 113 support, like yours, you should still see the contents (HTML data) and you should 114 be able to edit it normally, without a rich editor interface. 115 </p> 116 </noscript> 117 </div> 118 <!-- This <fieldset> holds the HTML that you will usually find in your 119 pages. --> 120 <p> 121 This sample shows how to use the dialog API to customize dialogs whithout changing 122 the original editor code. The following customizations are being done::</p> 123 <ol> 124 <li><strong>Add dialog pages</strong> ("My Tab" in the Link dialog).</li> 125 <li><strong>Remove a dialog tab</strong> ("Target" tab from the Link dialog).</li> 126 <li><strong>Add dialog fields</strong> ("My Custom Field" into the Link dialog).</li> 127 <li><strong>Remove dialog fields</strong> ("Link Type" and "Browser Server" the Link 128 dialog).</li> 129 <li><strong>Set default values for dialog fields</strong> (for the "URL" field in the 130 Link dialog). </li> 131 <li><strong>Create a custom dialog</strong> ("My Dialog" button).</li> 132 </ol> 133 <textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea> 134 <script type="text/javascript"> 135 //<![CDATA[ 136 // Replace the <textarea id="editor1"> with an CKEditor instance. 137 var editor = CKEDITOR.replace( 'editor1', 138 { 139 // Defines a simpler toolbar to be used in this sample. 140 // Note that we have added out "MyButton" button here. 141 toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'MyButton' ] ] 142 }); 143 144 // Listen for the "pluginsLoaded" event, so we are sure that the 145 // "dialog" plugin has been loaded and we are able to do our 146 // customizations. 147 editor.on( 'pluginsLoaded', function( ev ) 148 { 149 // If our custom dialog has not been registered, do that now. 150 if ( !CKEDITOR.dialog.exists( 'myDialog' ) ) 151 { 152 // We need to do the following trick to find out the dialog 153 // definition file URL path. In the real world, you would simply 154 // point to an absolute path directly, like "/mydir/mydialog.js". 155 var href = document.location.href.split( '/' ); 156 href.pop(); 157 href.push( 'api_dialog', 'my_dialog.js' ); 158 href = href.join( '/' ); 159 160 // Finally, register the dialog. 161 CKEDITOR.dialog.add( 'myDialog', href ); 162 } 163 164 // Register the command used to open the dialog. 165 editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) ); 166 167 // Add the a custom toolbar buttons, which fires the above 168 // command.. 169 editor.ui.addButton( 'MyButton', 170 { 171 label : 'My Dialog', 172 command : 'myDialogCmd' 173 } ); 174 }); 175 //]]> 176 </script> 177 <div id="footer"> 178 <hr /> 179 <p> 180 CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a> 181 </p> 182 <p id="copy"> 183 Copyright © 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico 184 Knabben. All rights reserved. 185 </p> 186 </div> 187 </body> 188 </html>
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Thu Mar 24 11:18:33 2011 | Cross-referenced by PHPXref 0.7 |