Context Navigation

Back to Ticket #9324

Ticket #9324: inlinebycode.html

File inlinebycode.html, 5.9 KB (added by Jakub Ś, 11 years ago)

Line
1	<!DOCTYPE html>
2	<!--
3	Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
4	For licensing, see LICENSE.html or http://ckeditor.com/license
5	-->
6	<html>
7	<head>
8	<title>Inline Editing by Code — 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> » 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.
34	CKEDITOR.disableAutoInline = true;
35
36	var 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><div></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	"<b>Little Red Riding Hood</b>" is a famous <a href="http://en.wikipedia.org/wiki/Fairy_tale"
51	title="Fairy tale">fairy tale</a> about a young girl'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ï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'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, "My,
102	what big teeth you have!"<br>
103	To which the wolf replies, "The better to eat you with," 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'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 © 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>

Download in other formats:

Original Format