Ticket #9482: divareaTest.html

File divareaTest.html, 5.3 KB (added by Jakub Ś, 8 years ago)
Line 
1<!DOCTYPE html>
2
3<!--
4
5Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
6
7For licensing, see LICENSE.html or http://ckeditor.com/license
8
9-->
10
11<html>
12
13<head>
14
15        <title>Replace Textarea with a "DIV-based" editor &mdash; CKEditor Sample</title>
16
17        <meta charset="utf-8">
18
19        <script src="../ckeditor.js"></script>
20
21        <link href="sample.css" rel="stylesheet">
22
23</head>
24
25<body>
26
27        <h1 class="samples">
28
29                <a href="index.html">CKEditor Samples</a> &raquo; Replace Textarea with a "DIV-based" editor
30
31        </h1>
32
33        <form action="sample_posteddata.php" method="post">
34
35                <div class="description">
36
37                        <p>
38
39                                This editor is using a <code>&lt;div&gt;</code> element-based editing area, provided by the <strong>Divarea</strong> plugin.
40
41                        </p>
42
43<pre class="samples">
44
45CKEDITOR.replace( '<em>textarea_id</em>', {
46
47        extraPlugins: 'divarea'
48
49});</pre>
50
51                </div>
52
53                <table>
54
55                        <tr>
56
57                                <td>
58
59                <textarea cols="80" id="editor1" name="editor1" rows="10">
60
61                        &lt;h1&gt;
62
63                                &lt;img alt="" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" style="margin-left: 10px; margin-right: 10px; float: left; width: 120px; height: 168px;" /&gt;Little Red Riding Hood&lt;/h1&gt;
64
65                        &lt;p&gt;
66
67                                &quot;&lt;b&gt;Little Red Riding Hood&lt;/b&gt;&quot; is a famous &lt;a href="http://en.wikipedia.org/wiki/Fairy_tale" title="Fairy tale"&gt;fairy tale&lt;/a&gt; about a young girl&#39;s encounter with a wolf. The story has been changed considerably in its history and subject to numerous modern adaptations and readings.&lt;/p&gt;
68
69                        &lt;table align="right" cellpadding="1" cellspacing="1" style="width: 200px;"&gt;
70
71                                &lt;caption&gt;
72
73                                        &lt;strong&gt;International Names&lt;/strong&gt;&lt;/caption&gt;
74
75                                &lt;tbody&gt;
76
77                                        &lt;tr&gt;
78
79                                                &lt;td&gt;
80
81                                                        Chinese&lt;/td&gt;
82
83                                                &lt;td&gt;
84
85                                                        &lt;i&gt;小紅帽&lt;/i&gt;&lt;/td&gt;
86
87                                        &lt;/tr&gt;
88
89                                        &lt;tr&gt;
90
91                                                &lt;td&gt;
92
93                                                        Italian&lt;/td&gt;
94
95                                                &lt;td&gt;
96
97                                                        &lt;i&gt;Cappuccetto Rosso&lt;/i&gt;&lt;/td&gt;
98
99                                        &lt;/tr&gt;
100
101                                        &lt;tr&gt;
102
103                                                &lt;td&gt;
104
105                                                        Spanish&lt;/td&gt;
106
107                                                &lt;td&gt;
108
109                                                        &lt;i&gt;Caperucita Roja&lt;/i&gt;&lt;/td&gt;
110
111                                        &lt;/tr&gt;
112
113                                &lt;/tbody&gt;
114
115                        &lt;/table&gt;
116
117                        &lt;p&gt;
118
119                                The version most widely known today is based on the &lt;a href="http://en.wikipedia.org/wiki/Brothers_Grimm" title="Brothers Grimm"&gt;Brothers Grimm&lt;/a&gt; variant. It is about a girl called Little Red Riding Hood, after the red &lt;a href="http://en.wikipedia.org/wiki/Hood_%28headgear%29" title="Hood (headgear)"&gt;hooded&lt;/a&gt; &lt;a href="http://en.wikipedia.org/wiki/Cape" title="Cape"&gt;cape&lt;/a&gt; or &lt;a href="http://en.wikipedia.org/wiki/Cloak" title="Cloak"&gt;cloak&lt;/a&gt; she wears. The girl walks through the woods to deliver food to her sick grandmother.&lt;/p&gt;
120
121                        &lt;p&gt;
122
123                                A wolf wants to eat the girl but is afraid to do so in public. He approaches the girl, and she na&iuml;vely tells him where she is going. He suggests the girl pick some flowers, which she does. In the meantime, he goes to the grandmother&#39;s house and gains entry by pretending to be the girl. He swallows the grandmother whole, and waits for the girl, disguised as the grandmother.&lt;/p&gt;
124
125                        &lt;p&gt;
126
127                                When the girl arrives, she notices he looks very strange to be her grandma. In most retellings, this eventually culminates with Little Red Riding Hood saying, &quot;My, what big teeth you have!&quot;&lt;br /&gt;
128
129                                To which the wolf replies, &quot;The better to eat you with,&quot; and swallows her whole, too.&lt;/p&gt;
130
131                        &lt;p&gt;
132
133                                A &lt;a href="http://en.wikipedia.org/wiki/Hunter" title="Hunter"&gt;hunter&lt;/a&gt;, however, comes to the rescue and cuts the wolf open. Little Red Riding Hood and her grandmother emerge unharmed. They fill the wolf&#39;s body with heavy stones, which drown him when he falls into a well. Other versions of the story have had the grandmother shut in the closet instead of eaten, and some have Little Red Riding Hood saved by the hunter as the wolf advances on her rather than after she is eaten.&lt;/p&gt;
134
135                        &lt;p&gt;
136
137                                The tale makes the clearest contrast between the safe world of the village and the dangers of the &lt;a href="http://en.wikipedia.org/wiki/Enchanted_forest" title="Enchanted forest"&gt;forest&lt;/a&gt;, conventional antitheses that are essentially medieval, though no written versions are as old as that.&lt;/p&gt;
138
139                </textarea>
140
141                                </td>
142
143                        </tr>
144
145                </table>
146
147
148
149                <script>
150
151
152
153                        // This call can be placed at any point after the
154
155                        // <textarea>, or inside a <head><script> in a
156
157                        // window.onload event handler.
158
159
160
161                        // Replace the <textarea id="editor"> with an CKEditor
162
163                        // instance, using default configurations.
164
165                        CKEDITOR.replace( 'editor1', {
166
167                                extraPlugins: 'divarea'
168
169                        });
170
171
172
173                </script>
174
175                <p>
176
177                        <input type="submit" value="Submit">
178
179                </p>
180
181        </form>
182
183        <div id="footer">
184
185                <hr>
186
187                <p>
188
189                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
190
191                </p>
192
193                <p id="copy">
194
195                        Copyright &copy; 2003-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
196
197                        Knabben. All rights reserved.
198
199                </p>
200
201        </div>
202
203</body>
204
205</html>
206
© 2003 – 2020 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy