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>Sample - CKEditor</title>
\r
9 <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
\r
10 <link href="../sample.css" rel="stylesheet" type="text/css"/>
\r
16 <!-- This <div> holds alert messages to be display in the sample page. -->
\r
20 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
\r
21 support, like yours, you should still see the contents (HTML data) and you should
\r
22 be able to edit it normally, without a rich editor interface.
\r
26 <!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
\r
27 <fieldset title="Output">
\r
28 <legend>Output</legend>
\r
29 <form action="../sample_posteddata.php" method="post">
\r
31 <label>Editor 1:</label><br/>
\r
36 * Adds global event, will hide "Target" tab in Link dialog in all instances.
\r
38 function CKEditorHideLinkTargetTab(&$CKEditor) {
\r
40 $function = 'function (ev) {
\r
41 // Take the dialog name and its definition from the event data
\r
42 var dialogName = ev.data.name;
\r
43 var dialogDefinition = ev.data.definition;
\r
45 // Check if the definition is from the Link dialog.
\r
46 if ( dialogName == "link" )
\r
47 dialogDefinition.removeContents("target")
\r
50 $CKEditor->addGlobalEventHandler('dialogDefinition', $function);
\r
54 * Adds global event, will notify about opened dialog.
\r
56 function CKEditorNotifyAboutOpenedDialog(&$CKEditor) {
\r
57 $function = 'function (evt) {
\r
58 alert("Loading dialog: " + evt.data.name);
\r
61 $CKEditor->addGlobalEventHandler('dialogDefinition', $function);
\r
64 // Include CKEditor class.
\r
65 include("../../ckeditor.php");
\r
67 // Create class instance.
\r
68 $CKEditor = new CKEditor();
\r
70 // Set configuration option for all editors.
\r
71 $CKEditor->config['width'] = 750;
\r
73 // Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
\r
74 // $CKEditor->basePath = '/ckeditor/'
\r
75 // If not set, CKEditor will try to detect the correct path.
\r
76 $CKEditor->basePath = '../../';
\r
78 // The initial value to be displayed in the editor.
\r
79 $initialValue = '<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>';
\r
81 // Event that will be handled only by the first editor.
\r
82 $CKEditor->addEventHandler('instanceReady', 'function (evt) {
\r
83 alert("Loaded editor: " + evt.editor.name);
\r
86 // Create first instance.
\r
87 $CKEditor->editor("editor1", $initialValue);
\r
89 // Clear event handlers, instances that will be created later will not have
\r
90 // the 'instanceReady' listener defined a couple of lines above.
\r
91 $CKEditor->clearEventHandlers();
\r
94 <label>Editor 2:</label><br/>
\r
97 // Configuration that will be used only by the second editor.
\r
98 $config['width'] = '600';
\r
99 $config['toolbar'] = 'Basic';
\r
101 // Add some global event handlers (for all editors).
\r
102 CKEditorHideLinkTargetTab($CKEditor);
\r
103 CKEditorNotifyAboutOpenedDialog($CKEditor);
\r
105 // Event that will be handled only by the second editor.
\r
106 // Instead of calling addEventHandler(), events may be passed as an argument.
\r
107 $events['instanceReady'] = 'function (evt) {
\r
108 alert("Loaded second editor: " + evt.editor.name);
\r
111 // Create second instance.
\r
112 $CKEditor->editor("editor2", $initialValue, $config, $events);
\r
115 <input type="submit" value="Submit"/>
\r
122 CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
\r
125 Copyright © 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
\r
126 Knabben. All rights reserved.
\r