[perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git] / sources / plugins / htmlwriter / samples / outputforflash.html

<!DOCTYPE html>\r
<!--\r
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r
For licensing, see LICENSE.md or http://ckeditor.com/license\r
-->\r
<html>\r
<head>\r
	<meta charset="utf-8">\r
	<title>Output for Flash &mdash; CKEditor Sample</title>\r
	<script src="../../../ckeditor.js"></script>\r
	<script src="../../../samples/old/sample.js"></script>\r
	<script src="assets/outputforflash/swfobject.js"></script>\r
	<link href="../../../samples/old/sample.css" rel="stylesheet">\r
	<meta name="ckeditor-sample-required-plugins" content="sourcearea">\r
	<meta name="ckeditor-sample-name" content="Output for Flash">\r
	<meta name="ckeditor-sample-group" content="Advanced Samples">\r
	<meta name="ckeditor-sample-description" content="Configuring CKEditor to produce HTML code that can be used with Adobe Flash.">\r
	<style>\r
\r
		.alert\r
		{\r
			background: #ffa84c;\r
			padding: 10px 15px;\r
			font-weight: bold;\r
			display: block;\r
			margin-bottom: 20px;\r
		}\r
\r
	</style>\r
</head>\r
<body>\r
	<h1 class="samples">\r
		<a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Producing Flash Compliant HTML Output\r
	</h1>\r
	<div class="warning deprecated">\r
		This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.\r
	</div>\r
	<div class="description">\r
		<p>\r
			This sample shows how to configure CKEditor to output\r
			HTML code that can be used with\r
			<a class="samples" href="http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&amp;file=00000922.html">\r
			Adobe Flash</a>.\r
			The code will contain a subset of standard HTML elements like <code>&lt;b&gt;</code>,\r
			<code>&lt;i&gt;</code>, and <code>&lt;p&gt;</code> as well as HTML attributes.\r
		</p>\r
		<p>\r
			To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard\r
			JavaScript call, and define CKEditor features to use HTML elements and attributes.\r
		</p>\r
		<p>\r
			For details on how to create this setup check the source code of this sample page.\r
		</p>\r
	</div>\r
	<p>\r
		To see how it works, create some content in the editing area of CKEditor on the left\r
		and send it to the Flash object on the right side of the page by using the\r
		<strong>Send to Flash</strong> button.\r
	</p>\r
	<table style="width: 100%; border-spacing: 0; border-collapse:collapse;">\r
		<tr>\r
			<td style="width: 100%">\r
				<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;&lt;b&gt;&lt;font size=&quot;18&quot; style=&quot;font-size:18px;&quot;&gt;Flash and HTML&lt;/font&gt;&lt;/b&gt;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;It is possible to have &lt;a href=&quot;http://ckeditor.com&quot;&gt;CKEditor&lt;/a&gt; creating content that will be later loaded inside &lt;b&gt;Flash&lt;/b&gt; objects and animations.&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;Flash has a few limitations when dealing with HTML:&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;ul&gt;&lt;li&gt;It has limited support on tags.&lt;/li&gt;&lt;li&gt;There is no margin between block elements, like paragraphs.&lt;/li&gt;&lt;/ul&gt;</textarea>\r
				<script>\r
\r
					if ( document.location.protocol == 'file:' )\r
						alert( 'Warning: This samples does not work when loaded from local filesystem' +\r
							'due to security restrictions implemented in Flash.' +\r
							'\n\nPlease load the sample from a web server instead.' );\r
\r
					var editor = CKEDITOR.replace( 'editor1', {\r
						/*\r
						 * Ensure that htmlwriter plugin, which is required for this sample, is loaded.\r
						 */\r
						extraPlugins: 'htmlwriter',\r
\r
						height: 290,\r
						width: '100%',\r
						toolbar: [\r
							[ 'Source', '-', 'Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink' ],\r
							[ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],\r
							'/',\r
							[ 'Font', 'FontSize' ],\r
							[ 'TextColor', '-', 'About' ]\r
						],\r
\r
						/*\r
						 * Style sheet for the contents\r
						 */\r
						contentsCss: 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',\r
\r
						/*\r
						 * Quirks doctype\r
						 */\r
						docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',\r
\r
						/*\r
						 * Core styles.\r
						 */\r
						coreStyles_bold: { element: 'b' },\r
						coreStyles_italic: { element: 'i' },\r
						coreStyles_underline: { element: 'u' },\r
\r
						/*\r
						 * Font face.\r
						 */\r
\r
						// Define the way font elements will be applied to the document. The "font"\r
						// element will be used.\r
						font_style: {\r
							element: 'font',\r
							attributes: { 'face': '#(family)' }\r
						},\r
\r
						/*\r
						 * Font sizes.\r
						 */\r
\r
						// The CSS part of the font sizes isn't used by Flash, it is there to get the\r
						// font rendered correctly in CKEditor.\r
						fontSize_sizes: '8px/8;9px/9;10px/10;11px/11;12px/12;14px/14;16px/16;18px/18;20px/20;22px/22;24px/24;26px/26;28px/28;36px/36;48px/48;72px/72',\r
						fontSize_style: {\r
							element: 'font',\r
							attributes: { 'size': '#(size)' },\r
							styles: { 'font-size': '#(size)px' }\r
						} ,\r
\r
						/*\r
						 * Font colors.\r
						 */\r
						colorButton_enableMore: true,\r
\r
						colorButton_foreStyle: {\r
							element: 'font',\r
							attributes: { 'color': '#(color)' }\r
						},\r
\r
						colorButton_backStyle: {\r
							element: 'font',\r
							styles: { 'background-color': '#(color)' }\r
						},\r
\r
						on: { 'instanceReady': configureFlashOutput }\r
					});\r
\r
					/*\r
					 * Adjust the behavior of the dataProcessor to match the\r
					 * requirements of Flash\r
					 */\r
					function configureFlashOutput( ev ) {\r
						var editor = ev.editor,\r
							dataProcessor = editor.dataProcessor,\r
							htmlFilter = dataProcessor && dataProcessor.htmlFilter;\r
\r
						// Out self closing tags the HTML4 way, like <br>.\r
						dataProcessor.writer.selfClosingEnd = '>';\r
\r
						// Make output formatting match Flash expectations\r
						var dtd = CKEDITOR.dtd;\r
						for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {\r
							dataProcessor.writer.setRules( e, {\r
								indent: false,\r
								breakBeforeOpen: false,\r
								breakAfterOpen: false,\r
								breakBeforeClose: false,\r
								breakAfterClose: false\r
							});\r
						}\r
						dataProcessor.writer.setRules( 'br', {\r
							indent: false,\r
							breakBeforeOpen: false,\r
							breakAfterOpen: false,\r
							breakBeforeClose: false,\r
							breakAfterClose: false\r
						});\r
\r
						// Output properties as attributes, not styles.\r
						htmlFilter.addRules( {\r
							elements: {\r
								$: function( element ) {\r
									var style, match, width, height, align;\r
\r
									// Output dimensions of images as width and height\r
									if ( element.name == 'img' ) {\r
										style = element.attributes.style;\r
\r
										if ( style ) {\r
											// Get the width from the style.\r
											match = ( /(?:^|\s)width\s*:\s*(\d+)px/i ).exec( style );\r
											width = match && match[1];\r
\r
											// Get the height from the style.\r
											match = ( /(?:^|\s)height\s*:\s*(\d+)px/i ).exec( style );\r
											height = match && match[1];\r
\r
											if ( width ) {\r
												element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );\r
												element.attributes.width = width;\r
											}\r
\r
											if ( height ) {\r
												element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );\r
												element.attributes.height = height;\r
											}\r
										}\r
									}\r
\r
									// Output alignment of paragraphs using align\r
									if ( element.name == 'p' ) {\r
										style = element.attributes.style;\r
\r
										if ( style ) {\r
											// Get the align from the style.\r
											match = ( /(?:^|\s)text-align\s*:\s*(\w*);?/i ).exec( style );\r
											align = match && match[1];\r
\r
											if ( align ) {\r
												element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );\r
												element.attributes.align = align;\r
											}\r
										}\r
									}\r
\r
									if ( element.attributes.style === '' )\r
										delete element.attributes.style;\r
\r
									return element;\r
								}\r
							}\r
						});\r
					}\r
\r
					function sendToFlash() {\r
						var html = CKEDITOR.instances.editor1.getData() ;\r
\r
						// Quick fix for link color.\r
						html = html.replace( /<a /g, '<font color="#0000FF"><u><a ' )\r
						html = html.replace( /<\/a>/g, '</a></u></font>' )\r
\r
						var flash = document.getElementById( 'ckFlashContainer' ) ;\r
						flash.setData( html ) ;\r
					}\r
\r
					CKEDITOR.domReady( function() {\r
						if ( !swfobject.hasFlashPlayerVersion( '8' ) ) {\r
							CKEDITOR.dom.element.createFromHtml( '<span class="alert">' +\r
									'At least Adobe Flash Player 8 is required to run this sample. ' +\r
									'You can download it from <a href="http://get.adobe.com/flashplayer">Adobe\'s website</a>.' +\r
								'</span>' ).insertBefore( editor.element );\r
						}\r
\r
						swfobject.embedSWF(\r
							'assets/outputforflash/outputforflash.swf',\r
							'ckFlashContainer',\r
							'550',\r
							'400',\r
							'8',\r
							{ wmode: 'transparent' }\r
						);\r
					});\r
\r
				</script>\r
				<p>\r
					<input type="button" value="Send to Flash" onclick="sendToFlash();">\r
				</p>\r
			</td>\r
			<td style="vertical-align: top; padding-left: 20px">\r
				<div id="ckFlashContainer"></div>\r
			</td>\r
		</tr>\r
	</table>\r
	<div id="footer">\r
		<hr>\r
		<p>\r
			CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
		</p>\r
		<p id="copy">\r
			Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
			Knabben. All rights reserved.\r
		</p>\r
	</div>\r
</body>\r
</html>\r
Commit	Line	Data
3332bebe IB	1	<!DOCTYPE html>\r
3332bebe IB	2	<!--\r
317f8f8f	3	Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r
3332bebe IB	4	For licensing, see LICENSE.md or http://ckeditor.com/license\r
	5	-->\r
	6	<html>\r
	7	<head>\r
	8	<meta charset="utf-8">\r
	9	<title>Output for Flash — CKEditor Sample</title>\r
	10	<script src="../../../ckeditor.js"></script>\r
	11	<script src="../../../samples/old/sample.js"></script>\r
	12	<script src="assets/outputforflash/swfobject.js"></script>\r
	13	<link href="../../../samples/old/sample.css" rel="stylesheet">\r
	14	<meta name="ckeditor-sample-required-plugins" content="sourcearea">\r
	15	<meta name="ckeditor-sample-name" content="Output for Flash">\r
	16	<meta name="ckeditor-sample-group" content="Advanced Samples">\r
	17	<meta name="ckeditor-sample-description" content="Configuring CKEditor to produce HTML code that can be used with Adobe Flash.">\r
	18	<style>\r
	19	\r
	20	.alert\r
	21	{\r
	22	background: #ffa84c;\r
	23	padding: 10px 15px;\r
	24	font-weight: bold;\r
	25	display: block;\r
	26	margin-bottom: 20px;\r
	27	}\r
	28	\r
	29	</style>\r
	30	</head>\r
	31	<body>\r
	32	<h1 class="samples">\r
	33	<a href="../../../samples/old/index.html">CKEditor Samples</a> » Producing Flash Compliant HTML Output\r
	34	</h1>\r
	35	<div class="warning deprecated">\r
	36	This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.\r
	37	</div>\r
	38	<div class="description">\r
	39	<p>\r
	40	This sample shows how to configure CKEditor to output\r
	41	HTML code that can be used with\r
	42	<a class="samples" href="http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000922.html">\r
	43	Adobe Flash</a>.\r
	44	The code will contain a subset of standard HTML elements like <code><b></code>,\r
	45	<code><i></code>, and <code><p></code> as well as HTML attributes.\r
	46	</p>\r
	47	<p>\r
	48	To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard\r
	49	JavaScript call, and define CKEditor features to use HTML elements and attributes.\r
	50	</p>\r
	51	<p>\r
	52	For details on how to create this setup check the source code of this sample page.\r
	53	</p>\r
	54	</div>\r
	55	<p>\r
	56	To see how it works, create some content in the editing area of CKEditor on the left\r
	57	and send it to the Flash object on the right side of the page by using the\r
	58	<strong>Send to Flash</strong> button.\r
	59	</p>\r
	60	<table style="width: 100%; border-spacing: 0; border-collapse:collapse;">\r
	61	<tr>\r
	62	<td style="width: 100%">\r
	63	<textarea cols="80" id="editor1" name="editor1" rows="10"><p><b><font size="18" style="font-size:18px;">Flash and HTML</font></b></p><p>&nbsp;</p><p>It is possible to have <a href="http://ckeditor.com">CKEditor</a> creating content that will be later loaded inside <b>Flash</b> objects and animations.</p><p>&nbsp;</p><p>Flash has a few limitations when dealing with HTML:</p><p>&nbsp;</p><ul><li>It has limited support on tags.</li><li>There is no margin between block elements, like paragraphs.</li></ul></textarea>\r
	64	<script>\r
	65	\r
	66	if ( document.location.protocol == 'file:' )\r
	67	alert( 'Warning: This samples does not work when loaded from local filesystem' +\r
68	'due to security restrictions implemented in Flash.' +\r
69	'\n\nPlease load the sample from a web server instead.' );\r
70	\r
71	var editor = CKEDITOR.replace( 'editor1', {\r
72	/*\r
73	* Ensure that htmlwriter plugin, which is required for this sample, is loaded.\r
74	*/\r
75	extraPlugins: 'htmlwriter',\r
76	\r
77	height: 290,\r
78	width: '100%',\r
79	toolbar: [\r
80	[ 'Source', '-', 'Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink' ],\r
81	[ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],\r
82	'/',\r
83	[ 'Font', 'FontSize' ],\r
84	[ 'TextColor', '-', 'About' ]\r
85	],\r
86	\r
87	/*\r
88	* Style sheet for the contents\r
89	*/\r
90	contentsCss: 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',\r
91	\r
92	/*\r
93	* Quirks doctype\r
94	*/\r
95	docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',\r
96	\r
97	/*\r
98	* Core styles.\r
99	*/\r
100	coreStyles_bold: { element: 'b' },\r
101	coreStyles_italic: { element: 'i' },\r
102	coreStyles_underline: { element: 'u' },\r
103	\r
104	/*\r
105	* Font face.\r
106	*/\r
107	\r
108	// Define the way font elements will be applied to the document. The "font"\r
109	// element will be used.\r
110	font_style: {\r
111	element: 'font',\r
112	attributes: { 'face': '#(family)' }\r
113	},\r
114	\r
115	/*\r
116	* Font sizes.\r
117	*/\r
118	\r
119	// The CSS part of the font sizes isn't used by Flash, it is there to get the\r
120	// font rendered correctly in CKEditor.\r
121	fontSize_sizes: '8px/8;9px/9;10px/10;11px/11;12px/12;14px/14;16px/16;18px/18;20px/20;22px/22;24px/24;26px/26;28px/28;36px/36;48px/48;72px/72',\r
122	fontSize_style: {\r
123	element: 'font',\r
124	attributes: { 'size': '#(size)' },\r
125	styles: { 'font-size': '#(size)px' }\r
126	} ,\r
127	\r
128	/*\r
129	* Font colors.\r
130	*/\r
131	colorButton_enableMore: true,\r
132	\r
133	colorButton_foreStyle: {\r
134	element: 'font',\r
135	attributes: { 'color': '#(color)' }\r
136	},\r
137	\r
138	colorButton_backStyle: {\r
139	element: 'font',\r
140	styles: { 'background-color': '#(color)' }\r
141	},\r
142	\r
143	on: { 'instanceReady': configureFlashOutput }\r
144	});\r
145	\r
146	/*\r
147	* Adjust the behavior of the dataProcessor to match the\r
148	* requirements of Flash\r
149	*/\r
150	function configureFlashOutput( ev ) {\r
151	var editor = ev.editor,\r
152	dataProcessor = editor.dataProcessor,\r
153	htmlFilter = dataProcessor && dataProcessor.htmlFilter;\r
154	\r
155	// Out self closing tags the HTML4 way, like <br>.\r
156	dataProcessor.writer.selfClosingEnd = '>';\r
157	\r
158	// Make output formatting match Flash expectations\r
159	var dtd = CKEDITOR.dtd;\r
160	for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {\r
161	dataProcessor.writer.setRules( e, {\r
162	indent: false,\r
163	breakBeforeOpen: false,\r
164	breakAfterOpen: false,\r
165	breakBeforeClose: false,\r
166	breakAfterClose: false\r
167	});\r
168	}\r
169	dataProcessor.writer.setRules( 'br', {\r
170	indent: false,\r
171	breakBeforeOpen: false,\r
172	breakAfterOpen: false,\r
173	breakBeforeClose: false,\r
174	breakAfterClose: false\r
175	});\r
176	\r
177	// Output properties as attributes, not styles.\r
178	htmlFilter.addRules( {\r
179	elements: {\r
180	$: function( element ) {\r
181	var style, match, width, height, align;\r
182	\r
183	// Output dimensions of images as width and height\r
184	if ( element.name == 'img' ) {\r
185	style = element.attributes.style;\r
186	\r
187	if ( style ) {\r
188	// Get the width from the style.\r
189	match = ( /(?:^\|\s)width\s:\s(\d+)px/i ).exec( style );\r
190	width = match && match[1];\r
191	\r
192	// Get the height from the style.\r
193	match = ( /(?:^\|\s)height\s:\s(\d+)px/i ).exec( style );\r
194	height = match && match[1];\r
195	\r
196	if ( width ) {\r
197	element.attributes.style = element.attributes.style.replace( /(?:^\|\s)width\s:\s(\d+)px;?/i , '' );\r
198	element.attributes.width = width;\r
199	}\r
200	\r
201	if ( height ) {\r
202	element.attributes.style = element.attributes.style.replace( /(?:^\|\s)height\s:\s(\d+)px;?/i , '' );\r
203	element.attributes.height = height;\r
204	}\r
205	}\r
206	}\r
207	\r
208	// Output alignment of paragraphs using align\r
209	if ( element.name == 'p' ) {\r
210	style = element.attributes.style;\r
211	\r
212	if ( style ) {\r
213	// Get the align from the style.\r
214	match = ( /(?:^\|\s)text-align\s:\s(\w*);?/i ).exec( style );\r
215	align = match && match[1];\r
216	\r
217	if ( align ) {\r
218	element.attributes.style = element.attributes.style.replace( /(?:^\|\s)text-align\s:\s(\w*);?/i , '' );\r
219	element.attributes.align = align;\r
220	}\r
221	}\r
222	}\r
223	\r
224	if ( element.attributes.style === '' )\r
225	delete element.attributes.style;\r
226	\r
227	return element;\r
228	}\r
229	}\r
230	});\r
231	}\r
232	\r
233	function sendToFlash() {\r
234	var html = CKEDITOR.instances.editor1.getData() ;\r
235	\r
236	// Quick fix for link color.\r
237	html = html.replace( /<a /g, '<font color="#0000FF"><u><a ' )\r
238	html = html.replace( /<\/a>/g, '</a></u></font>' )\r
239	\r
240	var flash = document.getElementById( 'ckFlashContainer' ) ;\r
241	flash.setData( html ) ;\r
242	}\r
243	\r
244	CKEDITOR.domReady( function() {\r
245	if ( !swfobject.hasFlashPlayerVersion( '8' ) ) {\r
246	CKEDITOR.dom.element.createFromHtml( '<span class="alert">' +\r
247	'At least Adobe Flash Player 8 is required to run this sample. ' +\r
248	'You can download it from <a href="http://get.adobe.com/flashplayer">Adobe\'s website</a>.' +\r
249	'</span>' ).insertBefore( editor.element );\r
250	}\r
251	\r
252	swfobject.embedSWF(\r
253	'assets/outputforflash/outputforflash.swf',\r
254	'ckFlashContainer',\r
255	'550',\r
256	'400',\r
257	'8',\r
258	{ wmode: 'transparent' }\r
259	);\r
260	});\r
261	\r
262	</script>\r
263	<p>\r
264	<input type="button" value="Send to Flash" onclick="sendToFlash();">\r
265	</p>\r
266	</td>\r
267	<td style="vertical-align: top; padding-left: 20px">\r
268	<div id="ckFlashContainer"></div>\r
269	</td>\r
270	</tr>\r
271	</table>\r
272	<div id="footer">\r
273	<hr>\r
274	<p>\r
275	CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
276	</p>\r
277	<p id="copy">\r
317f8f8f	278	Copyright © 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
3332bebe IB	279	Knabben. All rights reserved.\r
	280	</p>\r
	281	</div>\r
	282	</body>\r
	283	</html>\r