1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
\r
3 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
\r
4 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
6 <html xmlns="http://www.w3.org/1999/xhtml">
\r
8 <title>Using API to customize dialogs - CKEditor Sample</title>
\r
9 <meta content="text/html; charset=utf-8" http-equiv="content-type" />
\r
10 <script type="text/javascript" src="../ckeditor.js"></script>
\r
11 <script src="sample.js" type="text/javascript"></script>
\r
12 <link href="sample.css" rel="stylesheet" type="text/css" />
\r
13 <style id="styles" type="text/css">
\r
15 .cke_button_myDialogCmd .cke_icon
\r
17 display: none !important;
\r
20 .cke_button_myDialogCmd .cke_label
\r
22 display: inline !important;
\r
26 <script type="text/javascript">
\r
29 // When opening a dialog, its "definition" is created for it, for
\r
30 // each editor instance. The "dialogDefinition" event is then
\r
31 // fired. We should use this event to make customizations to the
\r
32 // definition of existing dialogs.
\r
33 CKEDITOR.on( 'dialogDefinition', function( ev )
\r
35 // Take the dialog name and its definition from the event
\r
37 var dialogName = ev.data.name;
\r
38 var dialogDefinition = ev.data.definition;
\r
40 // Check if the definition is from the dialog we're
\r
41 // interested on (the "Link" dialog).
\r
42 if ( dialogName == 'link' )
\r
44 // Get a reference to the "Link Info" tab.
\r
45 var infoTab = dialogDefinition.getContents( 'info' );
\r
47 // Add a text field to the "info" tab.
\r
50 label : 'My Custom Field',
\r
52 'default' : 'Sample!',
\r
53 validate : function()
\r
55 if ( /\d/.test( this.getValue() ) )
\r
56 return 'My Custom Field must not contain digits';
\r
60 // Remove the "Link Type" combo and the "Browser
\r
61 // Server" button from the "info" tab.
\r
62 infoTab.remove( 'linkType' );
\r
63 infoTab.remove( 'browse' );
\r
65 // Set the default value for the URL field.
\r
66 var urlField = infoTab.get( 'url' );
\r
67 urlField['default'] = 'www.example.com';
\r
69 // Remove the "Target" tab from the "Link" dialog.
\r
70 dialogDefinition.removeContents( 'target' );
\r
72 // Add a new tab to the "Link" dialog.
\r
73 dialogDefinition.addContents({
\r
81 label : 'My Text Field'
\r
86 label : 'Another Text Field'
\r
91 // Rewrite the 'onFocus' handler to always focus 'url' field.
\r
92 dialogDefinition.onFocus = function()
\r
94 var urlField = this.getContentElement( 'info', 'url' );
\r
108 <!-- This <div> holds alert messages to be display in the sample page. -->
\r
112 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
\r
113 support, like yours, you should still see the contents (HTML data) and you should
\r
114 be able to edit it normally, without a rich editor interface.
\r
118 <!-- This <fieldset> holds the HTML that you will usually find in your
\r
121 This sample shows how to use the dialog API to customize dialogs whithout changing
\r
122 the original editor code. The following customizations are being done::</p>
\r
124 <li><strong>Add dialog pages</strong> ("My Tab" in the Link dialog).</li>
\r
125 <li><strong>Remove a dialog tab</strong> ("Target" tab from the Link dialog).</li>
\r
126 <li><strong>Add dialog fields</strong> ("My Custom Field" into the Link dialog).</li>
\r
127 <li><strong>Remove dialog fields</strong> ("Link Type" and "Browser Server" the Link
\r
129 <li><strong>Set default values for dialog fields</strong> (for the "URL" field in the
\r
130 Link dialog). </li>
\r
131 <li><strong>Create a custom dialog</strong> ("My Dialog" button).</li>
\r
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>
\r
134 <script type="text/javascript">
\r
136 // Replace the <textarea id="editor1"> with an CKEditor instance.
\r
137 var editor = CKEDITOR.replace( 'editor1',
\r
139 // Defines a simpler toolbar to be used in this sample.
\r
140 // Note that we have added out "MyButton" button here.
\r
141 toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'MyButton' ] ]
\r
144 // Listen for the "pluginsLoaded" event, so we are sure that the
\r
145 // "dialog" plugin has been loaded and we are able to do our
\r
147 editor.on( 'pluginsLoaded', function( ev )
\r
149 // If our custom dialog has not been registered, do that now.
\r
150 if ( !CKEDITOR.dialog.exists( 'myDialog' ) )
\r
152 // We need to do the following trick to find out the dialog
\r
153 // definition file URL path. In the real world, you would simply
\r
154 // point to an absolute path directly, like "/mydir/mydialog.js".
\r
155 var href = document.location.href.split( '/' );
\r
157 href.push( 'api_dialog', 'my_dialog.js' );
\r
158 href = href.join( '/' );
\r
160 // Finally, register the dialog.
\r
161 CKEDITOR.dialog.add( 'myDialog', href );
\r
164 // Register the command used to open the dialog.
\r
165 editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) );
\r
167 // Add the a custom toolbar buttons, which fires the above
\r
169 editor.ui.addButton( 'MyButton',
\r
171 label : 'My Dialog',
\r
172 command : 'myDialogCmd'
\r
180 CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
\r
183 Copyright © 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
\r
184 Knabben. All rights reserved.
\r