Context Navigation

Back to Ticket #9684

Ticket #9684: inlineall2.html

File inlineall2.html, 10.0 KB (added by Jakub Ś, 12 years ago)

Line
1	<!DOCTYPE html>
2	<!--
3	Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
4	For licensing, see LICENSE.html or http://ckeditor.com/license
5	-->
6	<html>
7	<head>
8	<title>Massive inline editing — CKEditor Sample</title>
9	<meta charset="utf-8">
10	<script src="../ckeditor.js"></script>
11	<script>
12
13	// This code is generally not necessary, but it is here to demonstrate
14	// how to customize specific editor instances on the fly. This fits well
15	// this demo because we have editable elements (like headers) that
16	// require less features.
17
18	// The "instanceCreated" event is fired for every editor instance created.
19	CKEDITOR.on( 'instanceCreated', function( event ) {
20	var editor = event.editor,
21	element = editor.element;
22
23	// Customize editors for headers and tag list.
24	// These editors don't need features like smileys, templates, iframes etc.
25	if ( element.is( 'h1', 'h2', 'h3' ) \|\| element.getAttribute( 'id' ) == 'taglist' ) {
26	// Customize the editor configurations on "configLoaded" event,
27	// which is fired after the configuration file loading and
28	// execution. This makes it possible to change the
29	// configurations before the editor initialization takes place.
30	editor.on( 'configLoaded', function() {
31
32	// Remove unnecessary plugins to make the editor simpler.
33	editor.config.removePlugins = 'colorbutton,find,flash,font,' +
34	'forms,iframe,image,newpage,removeformat,' +
35	'smiley,specialchar,stylescombo,templates';
36
37	// Rearrange the layout of the toolbar.
38	editor.config.toolbarGroups = [
39	{ name: 'editing', groups: [ 'basicstyles', 'links' ] },
40	{ name: 'undo' },
41	{ name: 'clipboard', groups: [ 'selection', 'clipboard' ] },
42	{ name: 'about' }
43	];
44	});
45	}
46	});
47
48	CKEDITOR.on( 'instanceReady', function( event ) {
49	console.log(CKEDITOR.instances);
50	setTimeout(function(){if(CKEDITOR.instances.editor1)CKEDITOR.instances.editor1.destroy();} ,5000);
51	});
52
53	</script>
54	<link href="sample.css" rel="stylesheet">
55	<style>
56
57	/* The following styles are just to make the page look nice. */
58
59	/* Workaround to show Arial Black in Firefox. */
60	@font-face
61	{
62	font-family: 'arial-black';
63	src: local('Arial Black');
64	}
65
66	*[contenteditable="true"]
67	{
68	padding: 10px;
69	}
70
71	#container
72	{
73	width: 960px;
74	margin: 30px auto 0;
75	}
76
77	#header
78	{
79	overflow: hidden;
80	padding: 0 0 30px;
81	border-bottom: 5px solid #05B2D2;
82	position: relative;
83	}
84
85	#headerLeft,
86	#headerRight
87	{
88	width: 49%;
89	overflow: hidden;
90	}
91
92	#headerLeft
93	{
94	float: left;
95	padding: 10px 1px 1px;
96	}
97
98	#headerLeft h2,
99	#headerLeft h3
100	{
101	text-align: right;
102	margin: 0;
103	overflow: hidden;
104	font-weight: normal;
105	}
106
107	#headerLeft h2
108	{
109	font-family: "Arial Black",arial-black;
110	font-size: 4.6em;
111	line-height: 1.1em;
112	text-transform: uppercase;
113	}
114
115	#headerLeft h3
116	{
117	font-size: 2.3em;
118	line-height: 1.1em;
119	margin: .2em 0 0;
120	color: #666;
121	}
122
123	#headerRight
124	{
125	float: right;
126	padding: 1px;
127	}
128
129	#headerRight p
130	{
131	line-height: 1.8em;
132	text-align: justify;
133	margin: 0;
134	}
135
136	#headerRight p + p
137	{
138	margin-top: 20px;
139	}
140
141	#headerRight > div
142	{
143	padding: 20px;
144	margin: 0 0 0 30px;
145	font-size: 1.4em;
146	color: #666;
147	}
148
149	#columns
150	{
151	color: #333;
152	overflow: hidden;
153	padding: 20px 0;
154	}
155
156	#columns > div
157	{
158	float: left;
159	width: 33.3%;
160	}
161
162	#columns #column1 > div
163	{
164	margin-left: 1px;
165	}
166
167	#columns #column3 > div
168	{
169	margin-right: 1px;
170	}
171
172	#columns > div > div
173	{
174	margin: 0px 10px;
175	padding: 10px 20px;
176	}
177
178	#columns blockquote
179	{
180	margin-left: 15px;
181	}
182
183	#tagLine
184	{
185	border-top: 5px solid #05B2D2;
186	padding-top: 20px;
187	}
188
189	#taglist {
190	display: inline-block;
191	margin-left: 20px;
192	font-weight: bold;
193	margin: 0 0 0 20px;
194	}
195
196	</style>
197	</head>
198	<body>
199	<div>
200	<h1 class="samples"><a href="index.html">CKEditor Samples</a> » Massive inline editing</h1>
201	<div class="description">
202	<p>This sample page demonstrates the inline editing feature - CKEditor instances will be created automatically from page elements with <strong>contentEditable</strong> attribute set to value <strong>true</strong>:</p>
203	<pre class="samples"><div <strong>contenteditable="true</strong>" > ... </div></pre>
204	<p>Click inside of any element below to start editing.</p>
205	</div>
206	</div>
207	<div id="container">
208	<div id="header">
209	<div id="headerLeft">
210	<h2 id="sampleTitle" contenteditable="true">
211	CKEditor<br> Goes Inline!
212	</h2>
213	<h3 contenteditable="true">
214	Lorem ipsum dolor sit amet dolor duis blandit vestibulum faucibus a, tortor.
215	</h3>
216	</div>
217	<div id="headerRight">
218	<div contenteditable="true">
219	<p>
220	Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
221	</p>
222	<p>
223	Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac.
224	</p>
225	</div>
226	</div>
227	</div>
228	<div id="columns">
229	<div id="column1">
230	<div contenteditable="true">
231	<h3>
232	Fusce vitae porttitor
233	</h3>
234	<p>
235	<strong>
236	Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.
237	</strong>
238	</p>
239	<p>
240	Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum <a href="http://ckeditor.com/">nisl nulla sem in</a> metus. Maecenas wisi. Donec nec erat volutpat.
241	</p>
242	<blockquote>
243	<p>
244	Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium.
245	Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum
246	</p>
247	</blockquote>
248	<blockquote>
249	<p>
250	Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu.
251	</p>
252	</blockquote>
253	<p>Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.</p>
254	<p><strike>Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.</strike></p>
255	</div>
256	</div>
257	<div id="column2">
258	<div contenteditable="true">
259	<h3>
260	Integer condimentum sit amet
261	</h3>
262	<p>
263	<strong>Aenean nonummy a, mattis varius. Cras aliquet.</strong>
264	Praesent <a href="http://ckeditor.com/">magna non mattis ac, rhoncus nunc</a>, rhoncus eget, cursus pulvinar mollis.</p>
265	<p>Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.</p>
266	<p>Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.</p>
267	</div>
268	<div contenteditable="true">
269	<h3>
270	Praesent wisi accumsan sit amet nibh
271	</h3>
272	<p>Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.</p>
273	<p style="margin-left: 40px; ">Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce <a href="http://ckeditor.com/">gravida, erat vitae augue</a>. Fusce urna fringilla gravida.</p>
274	<p>In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.</p>
275	</div>
276	</div>
277	<div id="column3">
278	<div contenteditable="true">
279	<p>
280	<img src="assets/inlineall/logo.png" alt="CKEditor logo" style="float:left">
281	</p>
282	<p>Quisque justo neque, mattis sed, fermentum ultrices <strong>posuere cubilia Curae</strong>, Vestibulum elit metus, quis placerat ut, lectus. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi.</p>
283	<h3>
284	Nullam laoreet vel consectetuer tellus suscipit
285	</h3>
286	<ul>
287	<li>Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.</li>
288	<li>Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi.</li>
289	<li>Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</li>
290	</ul>
291	<p>Quisque justo neque, mattis sed, <a href="http://ckeditor.com/">fermentum ultrices posuere cubilia</a> Curae, Vestibulum elit metus, quis placerat ut, lectus.</p>
292	<p>Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis.</p>
293	<p>Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi. Sed in nonummy faucibus turpis. Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</p>
294	</div>
295	</div>
296	</div>
297	<div id="tagLine">
298	Tags of this article:
299	<p id="taglist" contenteditable="true">
300	inline, editing, floating, CKEditor
301	</p>
302	</div>
303	</div>
304	<div id="footer">
305	<hr>
306	<p>
307	CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">
308	http://ckeditor.com</a>
309	</p>
310	<p id="copy">
311	Copyright © 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a>
312	- Frederico Knabben. All rights reserved.
313	</p>
314	</div>
315	</body>
316	</html>

Download in other formats:

Original Format