Mercurial > hg > rr-repo
comparison sites/all/libraries/ckeditor/_samples/api_dialog.html @ 0:ff03f76ab3fe
initial version
| author | danieleb <danielebarchiesi@me.com> |
|---|---|
| date | Wed, 21 Aug 2013 18:51:11 +0100 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| -1:000000000000 | 0:ff03f76ab3fe |
|---|---|
| 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-2013, 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 Dialog Windows — 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 class="samples"> | |
| 106 CKEditor Sample — Using CKEditor Dialog API | |
| 107 </h1> | |
| 108 <div class="description"> | |
| 109 <p> | |
| 110 This sample shows how to use the | |
| 111 <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html">CKEditor Dialog API</a> | |
| 112 to customize CKEditor dialog windows without changing the original editor code. | |
| 113 The following customizations are being done in the example below: | |
| 114 </p> | |
| 115 <ol> | |
| 116 <li><strong>Adding dialog window tabs</strong> – "My Tab" in the "Link" dialog window.</li> | |
| 117 <li><strong>Removing a dialog window tab</strong> – "Target" tab from the "Link" dialog window.</li> | |
| 118 <li><strong>Adding dialog window fields</strong> – "My Custom Field" in the "Link" dialog window.</li> | |
| 119 <li><strong>Removing dialog window fields</strong> – "Link Type" and "Browse Server" in the "Link" | |
| 120 dialog window.</li> | |
| 121 <li><strong>Setting default values for dialog window fields</strong> – "URL" field in the | |
| 122 "Link" dialog window. </li> | |
| 123 <li><strong>Creating a custom dialog window</strong> – "My Dialog" dialog window opened with the "My Dialog" toolbar button.</li> | |
| 124 </ol> | |
| 125 <p> | |
| 126 For details on how to create this setup check the source code of this sample page. | |
| 127 </p> | |
| 128 </div> | |
| 129 | |
| 130 | |
| 131 <!-- This <div> holds alert messages to be display in the sample page. --> | |
| 132 <div id="alerts"> | |
| 133 <noscript> | |
| 134 <p> | |
| 135 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript | |
| 136 support, like yours, you should still see the contents (HTML data) and you should | |
| 137 be able to edit it normally, without a rich editor interface. | |
| 138 </p> | |
| 139 </noscript> | |
| 140 </div> | |
| 141 <!-- This <fieldset> holds the HTML that you will usually find in your | |
| 142 pages. --> | |
| 143 <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> | |
| 144 <script type="text/javascript"> | |
| 145 //<![CDATA[ | |
| 146 // Replace the <textarea id="editor1"> with an CKEditor instance. | |
| 147 var editor = CKEDITOR.replace( 'editor1', | |
| 148 { | |
| 149 // Defines a simpler toolbar to be used in this sample. | |
| 150 // Note that we have added out "MyButton" button here. | |
| 151 toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'MyButton' ] ] | |
| 152 }); | |
| 153 | |
| 154 // Listen for the "pluginsLoaded" event, so we are sure that the | |
| 155 // "dialog" plugin has been loaded and we are able to do our | |
| 156 // customizations. | |
| 157 editor.on( 'pluginsLoaded', function( ev ) | |
| 158 { | |
| 159 // If our custom dialog has not been registered, do that now. | |
| 160 if ( !CKEDITOR.dialog.exists( 'myDialog' ) ) | |
| 161 { | |
| 162 // We need to do the following trick to find out the dialog | |
| 163 // definition file URL path. In the real world, you would simply | |
| 164 // point to an absolute path directly, like "/mydir/mydialog.js". | |
| 165 var href = document.location.href.split( '/' ); | |
| 166 href.pop(); | |
| 167 href.push( 'api_dialog', 'my_dialog.js' ); | |
| 168 href = href.join( '/' ); | |
| 169 | |
| 170 // Finally, register the dialog. | |
| 171 CKEDITOR.dialog.add( 'myDialog', href ); | |
| 172 } | |
| 173 | |
| 174 // Register the command used to open the dialog. | |
| 175 editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) ); | |
| 176 | |
| 177 // Add the a custom toolbar buttons, which fires the above | |
| 178 // command.. | |
| 179 editor.ui.addButton( 'MyButton', | |
| 180 { | |
| 181 label : 'My Dialog', | |
| 182 command : 'myDialogCmd' | |
| 183 } ); | |
| 184 }); | |
| 185 //]]> | |
| 186 </script> | |
| 187 <div id="footer"> | |
| 188 <hr /> | |
| 189 <p> | |
| 190 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> | |
| 191 </p> | |
| 192 <p id="copy"> | |
| 193 Copyright © 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico | |
| 194 Knabben. All rights reserved. | |
| 195 </p> | |
| 196 </div> | |
| 197 </body> | |
| 198 </html> |