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
101 <!-- This <div> holds alert messages to be display in the sample page. -->
\r
105 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
\r
106 support, like yours, you should still see the contents (HTML data) and you should
\r
107 be able to edit it normally, without a rich editor interface.
\r
111 <!-- This <fieldset> holds the HTML that you will usually find in your
\r
114 This sample shows how to use the dialog API to customize dialogs whithout changing
\r
115 the original editor code. The following customizations are being done::</p>
\r
117 <li><strong>Add dialog pages</strong> ("My Tab" in the Link dialog).</li>
\r
118 <li><strong>Remove a dialog tab</strong> ("Target" tab from the Link dialog).</li>
\r
119 <li><strong>Add dialog fields</strong> ("My Custom Field" into the Link dialog).</li>
\r
120 <li><strong>Remove dialog fields</strong> ("Link Type" and "Browser Server" the Link
\r
122 <li><strong>Set default values for dialog fields</strong> (for the "URL" field in the
\r
123 Link dialog). </li>
\r
124 <li><strong>Create a custom dialog</strong> ("My Dialog" button).</li>
\r
126 <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
127 <script type="text/javascript">
\r
129 // Replace the <textarea id="editor1"> with an CKEditor instance.
\r
130 var editor = CKEDITOR.replace( 'editor1',
\r
132 // Defines a simpler toolbar to be used in this sample.
\r
133 // Note that we have added out "MyButton" button here.
\r
134 toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'MyButton' ] ]
\r
137 // Listen for the "pluginsLoaded" event, so we are sure that the
\r
138 // "dialog" plugin has been loaded and we are able to do our
\r
140 editor.on( 'pluginsLoaded', function( ev )
\r
142 // If our custom dialog has not been registered, do that now.
\r
143 if ( !CKEDITOR.dialog.exists( 'myDialog' ) )
\r
145 // We need to do the following trick to find out the dialog
\r
146 // definition file URL path. In the real world, you would simply
\r
147 // point to an absolute path directly, like "/mydir/mydialog.js".
\r
148 var href = document.location.href.split( '/' );
\r
150 href.push( 'api_dialog', 'my_dialog.js' );
\r
151 href = href.join( '/' );
\r
153 // Finally, register the dialog.
\r
154 CKEDITOR.dialog.add( 'myDialog', href );
\r
157 // Register the command used to open the dialog.
\r
158 editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) );
\r
160 // Add the a custom toolbar buttons, which fires the above
\r
162 editor.ui.addButton( 'MyButton',
\r
164 label : 'My Dialog',
\r
165 command : 'myDialogCmd'
\r
173 CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
\r
176 Copyright © 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
\r
177 Knabben. All rights reserved.
\r