--- /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-2009, 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>Sample - CKEditor</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 id="headscript" 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
+ });\r
+\r
+ //]]>\r
+ </script>\r
+</head>\r
+<body>\r
+ <h1>\r
+ CKEditor Sample\r
+ </h1>\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
+ <p>\r
+ This sample shows how to use the dialog API to customize dialogs whithout changing\r
+ the original editor code. The following customizations are being done::</p>\r
+ <ol>\r
+ <li><strong>Add dialog pages</strong> ("My Tab" in the Link dialog).</li>\r
+ <li><strong>Remove a dialog tab</strong> ("Target" tab from the Link dialog).</li>\r
+ <li><strong>Add dialog fields</strong> ("My Custom Field" into the Link dialog).</li>\r
+ <li><strong>Remove dialog fields</strong> ("Link Type" and "Browser Server" the Link dialog).</li>\r
+ <li><strong>Set default values for dialog fields</strong> (for the "URL" field in the\r
+ Link dialog). </li>\r
+ <li><strong>Create a custom dialog</strong> ("My Dialog" button).</li>\r
+ </ol>\r
+ <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
+ <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 Internet - <a href="http://ckeditor.com/" shape="rect">http://ckeditor.com</a>\r
+ </p>\r
+ <p id="copy">\r
+ Copyright © 2003-2009, <a href="http://cksource.com/" shape="rect">CKSource</a> - Frederico Knabben. All rights reserved.\r
+ </p>\r
+ </div>\r
+</body>\r
+</html>\r
Got questions, comments, patches, etc.? Contact Jason Woofenden