Ticket #9324: inlinebycode.html

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