--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<!--\r
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
+For licensing, see LICENSE.html or http://ckeditor.com/license\r
+-->\r
+<html xmlns="http://www.w3.org/1999/xhtml">\r
+<head>\r
+ <title>Using API to Customize Dialog Windows — CKEditor Sample</title>\r
+ <meta content="text/html; charset=utf-8" http-equiv="content-type" />\r
+ <script type="text/javascript" src="../ckeditor.js"></script>\r
+ <script src="sample.js" type="text/javascript"></script>\r
+ <link href="sample.css" rel="stylesheet" type="text/css" />\r
+ <style id="styles" type="text/css">\r
+\r
+ .cke_button_myDialogCmd .cke_icon\r
+ {\r
+ display: none !important;\r
+ }\r
+\r
+ .cke_button_myDialogCmd .cke_label\r
+ {\r
+ display: inline !important;\r
+ }\r
+\r
+ </style>\r
+ <script type="text/javascript">\r
+ //<![CDATA[\r
+\r
+// When opening a dialog, its "definition" is created for it, for\r
+// each editor instance. The "dialogDefinition" event is then\r
+// fired. We should use this event to make customizations to the\r
+// definition of existing dialogs.\r
+CKEDITOR.on( 'dialogDefinition', function( ev )\r
+ {\r
+ // Take the dialog name and its definition from the event\r
+ // data.\r
+ var dialogName = ev.data.name;\r
+ var dialogDefinition = ev.data.definition;\r
+\r
+ // Check if the definition is from the dialog we're\r
+ // interested on (the "Link" dialog).\r
+ if ( dialogName == 'link' )\r
+ {\r
+ // Get a reference to the "Link Info" tab.\r
+ var infoTab = dialogDefinition.getContents( 'info' );\r
+\r
+ // Add a text field to the "info" tab.\r
+ infoTab.add( {\r
+ type : 'text',\r
+ label : 'My Custom Field',\r
+ id : 'customField',\r
+ 'default' : 'Sample!',\r
+ validate : function()\r
+ {\r
+ if ( /\d/.test( this.getValue() ) )\r
+ return 'My Custom Field must not contain digits';\r
+ }\r
+ });\r
+\r
+ // Remove the "Link Type" combo and the "Browser\r
+ // Server" button from the "info" tab.\r
+ infoTab.remove( 'linkType' );\r
+ infoTab.remove( 'browse' );\r
+\r
+ // Set the default value for the URL field.\r
+ var urlField = infoTab.get( 'url' );\r
+ urlField['default'] = 'www.example.com';\r
+\r
+ // Remove the "Target" tab from the "Link" dialog.\r
+ dialogDefinition.removeContents( 'target' );\r
+\r
+ // Add a new tab to the "Link" dialog.\r
+ dialogDefinition.addContents({\r
+ id : 'customTab',\r
+ label : 'My Tab',\r
+ accessKey : 'M',\r
+ elements : [\r
+ {\r
+ id : 'myField1',\r
+ type : 'text',\r
+ label : 'My Text Field'\r
+ },\r
+ {\r
+ id : 'myField2',\r
+ type : 'text',\r
+ label : 'Another Text Field'\r
+ }\r
+ ]\r
+ });\r
+\r
+ // Rewrite the 'onFocus' handler to always focus 'url' field.\r
+ dialogDefinition.onFocus = function()\r
+ {\r
+ var urlField = this.getContentElement( 'info', 'url' );\r
+ urlField.select();\r
+ };\r
+ }\r
+ });\r
+\r
+ //]]>\r
+ </script>\r
+\r
+</head>\r
+<body>\r
+ <h1 class="samples">\r
+ CKEditor Sample — Using CKEditor Dialog API\r
+ </h1>\r
+ <div class="description">\r
+ <p>\r
+ This sample shows how to use the\r
+ <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html">CKEditor Dialog API</a>\r
+ to customize CKEditor dialog windows without changing the original editor code.\r
+ The following customizations are being done in the example below:\r
+ </p>\r
+ <ol>\r
+ <li><strong>Adding dialog window tabs</strong> – "My Tab" in the "Link" dialog window.</li>\r
+ <li><strong>Removing a dialog window tab</strong> – "Target" tab from the "Link" dialog window.</li>\r
+ <li><strong>Adding dialog window fields</strong> – "My Custom Field" in the "Link" dialog window.</li>\r
+ <li><strong>Removing dialog window fields</strong> – "Link Type" and "Browse Server" in the "Link"\r
+ dialog window.</li>\r
+ <li><strong>Setting default values for dialog window fields</strong> – "URL" field in the\r
+ "Link" dialog window. </li>\r
+ <li><strong>Creating a custom dialog window</strong> – "My Dialog" dialog window opened with the "My Dialog" toolbar button.</li>\r
+ </ol>\r
+ <p>\r
+For details on how to create this setup check the source code of this sample page.\r
+ </p>\r
+ </div>\r
+\r
+\r
+ <!-- This <div> holds alert messages to be display in the sample page. -->\r
+ <div id="alerts">\r
+ <noscript>\r
+ <p>\r
+ <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript\r
+ support, like yours, you should still see the contents (HTML data) and you should\r
+ be able to edit it normally, without a rich editor interface.\r
+ </p>\r
+ </noscript>\r
+ </div>\r
+ <!-- This <fieldset> holds the HTML that you will usually find in your\r
+ pages. -->\r
+ <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
+ <script type="text/javascript">\r
+ //<![CDATA[\r
+ // Replace the <textarea id="editor1"> with an CKEditor instance.\r
+ var editor = CKEDITOR.replace( 'editor1',\r
+ {\r
+ // Defines a simpler toolbar to be used in this sample.\r
+ // Note that we have added out "MyButton" button here.\r
+ toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'MyButton' ] ]\r
+ });\r
+\r
+ // Listen for the "pluginsLoaded" event, so we are sure that the\r
+ // "dialog" plugin has been loaded and we are able to do our\r
+ // customizations.\r
+ editor.on( 'pluginsLoaded', function( ev )\r
+ {\r
+ // If our custom dialog has not been registered, do that now.\r
+ if ( !CKEDITOR.dialog.exists( 'myDialog' ) )\r
+ {\r
+ // We need to do the following trick to find out the dialog\r
+ // definition file URL path. In the real world, you would simply\r
+ // point to an absolute path directly, like "/mydir/mydialog.js".\r
+ var href = document.location.href.split( '/' );\r
+ href.pop();\r
+ href.push( 'api_dialog', 'my_dialog.js' );\r
+ href = href.join( '/' );\r
+\r
+ // Finally, register the dialog.\r
+ CKEDITOR.dialog.add( 'myDialog', href );\r
+ }\r
+\r
+ // Register the command used to open the dialog.\r
+ editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) );\r
+\r
+ // Add the a custom toolbar buttons, which fires the above\r
+ // command..\r
+ editor.ui.addButton( 'MyButton',\r
+ {\r
+ label : 'My Dialog',\r
+ command : 'myDialogCmd'\r
+ } );\r
+ });\r
+ //]]>\r
+ </script>\r
+ <div id="footer">\r
+ <hr />\r
+ <p>\r
+ CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
+ </p>\r
+ <p id="copy">\r
+ Copyright © 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
+ Knabben. All rights reserved.\r
+ </p>\r
+ </div>\r
+</body>\r
+</html>\r
projects / ckeditor.git / blobdiff