4691d0e7ec0fda711370a411a80f97af1c35f7b9.svn-base
4.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shared Toolbars — CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
<style id="styles" type="text/css">
#editorsForm
{
height: 400px;
overflow: auto;
border: solid 1px #555;
margin: 10px 0;
padding: 0 10px;
}
</style>
</head>
<body>
<h1 class="samples">
CKEditor Sample — Shared Toolbars
</h1>
<div class="description">
<p>
This sample shows how to configure multiple CKEditor instances to share some parts of the interface.
You can choose to share the toolbar (<code>topSpace</code>), the elements path
(<code>bottomSpace</code>), or both.
</p>
<p>
CKEditor instances with shared spaces can be inserted with a JavaScript call using the following code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>sharedSpaces :
{
top : 'topSpace',
bottom : 'bottomSpace'
}</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code><textarea></code> element to be replaced with CKEditor.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<div id="topSpace">
</div>
<form action="sample_posteddata.php" id="editorsForm" method="post">
<p>
<label for="editor1">
Editor 1 (uses the shared toolbar and elements path):</label>
<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>
</p>
<p>
<label for="editor2">
Editor 2 (uses the shared toolbar and elements path):</label>
<textarea cols="80" id="editor2" name="editor2" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
</p>
<p>
<label for="editor3">
Editor 3 (uses the shared toolbar only):</label>
<textarea cols="80" id="editor3" name="editor3" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
</p>
<p>
<label for="editor4">
Editor 4 (no shared spaces):</label>
<textarea cols="80" id="editor4" name="editor4" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="bottomSpace">
</div>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright © 2003-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
<script type="text/javascript">
//<![CDATA[
// Create all editor instances at the end of the page, so we are sure
// that the "bottomSpace" div is available in the DOM (IE issue).
CKEDITOR.replace( 'editor1',
{
sharedSpaces :
{
top : 'topSpace',
bottom : 'bottomSpace'
},
// Removes the maximize plugin as it's not usable
// in a shared toolbar.
// Removes the resizer as it's not usable in a
// shared elements path.
removePlugins : 'maximize,resize'
} );
CKEDITOR.replace( 'editor2',
{
sharedSpaces :
{
top : 'topSpace',
bottom : 'bottomSpace'
},
// Removes the maximize plugin as it's not usable
// in a shared toolbar.
// Removes the resizer as it's not usable in a
// shared elements path.
removePlugins : 'maximize,resize'
} );
CKEDITOR.replace( 'editor3',
{
sharedSpaces :
{
top : 'topSpace'
},
// Removes the maximize plugin as it's not usable
// in a shared toolbar.
removePlugins : 'maximize'
} );
CKEDITOR.replace( 'editor4' );
//]]>
</script>
</body>
</html>