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