[perso/Immae/Projets/packagist/connexionswing-ckeditor-component.git] / release / samples / old / htmlwriter / outputhtml.html

<!DOCTYPE html>\r
<!--\r
Copyright (c) 2003-2016, 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>HTML Compliant Output &mdash; CKEditor Sample</title>\r
	<script src="../../../ckeditor.js"></script>\r
	<script src="../../../samples/old/sample.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 HTML">\r
	<meta name="ckeditor-sample-group" content="Advanced Samples">\r
	<meta name="ckeditor-sample-description" content="Configuring CKEditor to produce legacy HTML 4 code.">\r
</head>\r
<body>\r
	<h1 class="samples">\r
		<a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Producing HTML Compliant 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 valid\r
			<a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.\r
			Traditional HTML elements like <code>&lt;b&gt;</code>,\r
			<code>&lt;i&gt;</code>, and <code>&lt;font&gt;</code> are used in place of\r
			<code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, and CSS styles.\r
		</p>\r
		<p>\r
			To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard\r
			JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.\r
		</p>\r
		<p>\r
			A snippet of the configuration code can be seen below; check the source of this page for\r
			full definition:\r
		</p>\r
<pre class="samples">\r
CKEDITOR.replace( '<em>textarea_id</em>', {\r
	coreStyles_bold: { element: 'b' },\r
	coreStyles_italic: { element: 'i' },\r
\r
	fontSize_style: {\r
		element: 'font',\r
		attributes: { 'size': '#(size)' }\r
	}\r
\r
	...\r
});</pre>\r
	</div>\r
	<form action="../../../samples/sample_posteddata.php" method="post">\r
		<p>\r
			<label for="editor1">\r
				Editor 1:\r
			</label>\r
			<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;b&gt;sample text&lt;/b&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>\r
			<script>\r
\r
				CKEDITOR.replace( 'editor1', {\r
					/*\r
					 * Ensure that htmlwriter plugin, which is required for this sample, is loaded.\r
					 */\r
					extraPlugins: 'htmlwriter',\r
\r
					/*\r
					 * Style sheet for the contents\r
					 */\r
					contentsCss: 'body {color:#000; background-color#:FFF;}',\r
\r
					/*\r
					 * Simple HTML5 doctype\r
					 */\r
					docType: '<!DOCTYPE HTML>',\r
\r
					/*\r
					 * Allowed content rules which beside limiting allowed HTML\r
					 * will also take care of transforming styles to attributes\r
					 * (currently only for img - see transformation rules defined below).\r
					 *\r
					 * Read more: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter\r
					 */\r
					allowedContent:\r
						'h1 h2 h3 p pre[align]; ' +\r
						'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +\r
						'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',\r
\r
					/*\r
					 * Core styles.\r
					 */\r
					coreStyles_bold: { element: 'b' },\r
					coreStyles_italic: { element: 'i' },\r
					coreStyles_underline: { element: 'u' },\r
					coreStyles_strike: { element: 'strike' },\r
\r
					/*\r
					 * Font face.\r
					 */\r
\r
					// Define the way font elements will be applied to the document.\r
					// The "font" element will be used.\r
					font_style: {\r
						element: 'font',\r
						attributes: { 'face': '#(family)' }\r
					},\r
\r
					/*\r
					 * Font sizes.\r
					 */\r
					fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',\r
					fontSize_style: {\r
						element: 'font',\r
						attributes: { 'size': '#(size)' }\r
					},\r
\r
					/*\r
					 * Font colors.\r
					 */\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
					/*\r
					 * Styles combo.\r
					 */\r
					stylesSet: [\r
						{ name: 'Computer Code', element: 'code' },\r
						{ name: 'Keyboard Phrase', element: 'kbd' },\r
						{ name: 'Sample Text', element: 'samp' },\r
						{ name: 'Variable', element: 'var' },\r
						{ name: 'Deleted Text', element: 'del' },\r
						{ name: 'Inserted Text', element: 'ins' },\r
						{ name: 'Cited Work', element: 'cite' },\r
						{ name: 'Inline Quotation', element: 'q' }\r
					],\r
\r
					on: {\r
						pluginsLoaded: configureTransformations,\r
						loaded: configureHtmlWriter\r
					}\r
				});\r
\r
				/*\r
				 * Add missing content transformations.\r
				 */\r
				function configureTransformations( evt ) {\r
					var editor = evt.editor;\r
\r
					editor.dataProcessor.htmlFilter.addRules( {\r
						attributes: {\r
							style: function( value, element ) {\r
								// Return #RGB for background and border colors\r
								return CKEDITOR.tools.convertRgbToHex( value );\r
							}\r
						}\r
					} );\r
\r
					// Default automatic content transformations do not yet take care of\r
					// align attributes on blocks, so we need to add our own transformation rules.\r
					function alignToAttribute( element ) {\r
						if ( element.styles[ 'text-align' ] ) {\r
							element.attributes.align = element.styles[ 'text-align' ];\r
							delete element.styles[ 'text-align' ];\r
						}\r
					}\r
					editor.filter.addTransformations( [\r
						[ { element: 'p',	right: alignToAttribute } ],\r
						[ { element: 'h1',	right: alignToAttribute } ],\r
						[ { element: 'h2',	right: alignToAttribute } ],\r
						[ { element: 'h3',	right: alignToAttribute } ],\r
						[ { element: 'pre',	right: alignToAttribute } ]\r
					] );\r
				}\r
\r
				/*\r
				 * Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.\r
				 */\r
				function configureHtmlWriter( evt ) {\r
					var editor = evt.editor,\r
						dataProcessor = editor.dataProcessor;\r
\r
					// Out self closing tags the HTML4 way, like <br>.\r
					dataProcessor.writer.selfClosingEnd = '>';\r
\r
					// Make output formatting behave similar to FCKeditor.\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: true,\r
							breakBeforeOpen: true,\r
							breakAfterOpen: false,\r
							breakBeforeClose: !dtd[ e ][ '#' ],\r
							breakAfterClose: true\r
						});\r
					}\r
				}\r
\r
			</script>\r
		</p>\r
		<p>\r
			<input type="submit" value="Submit">\r
		</p>\r
	</form>\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-2016, <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
7adcb81e IB	1	<!DOCTYPE html>\r
7adcb81e IB	2	<!--\r
3b35bd27	3	Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r
7adcb81e 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>HTML Compliant Output — CKEditor Sample</title>\r
	10	<script src="../../../ckeditor.js"></script>\r
	11	<script src="../../../samples/old/sample.js"></script>\r
	12	<link href="../../../samples/old/sample.css" rel="stylesheet">\r
	13	<meta name="ckeditor-sample-required-plugins" content="sourcearea">\r
	14	<meta name="ckeditor-sample-name" content="Output HTML">\r
	15	<meta name="ckeditor-sample-group" content="Advanced Samples">\r
	16	<meta name="ckeditor-sample-description" content="Configuring CKEditor to produce legacy HTML 4 code.">\r
	17	</head>\r
	18	<body>\r
	19	<h1 class="samples">\r
	20	<a href="../../../samples/old/index.html">CKEditor Samples</a> » Producing HTML Compliant Output\r
	21	</h1>\r
	22	<div class="warning deprecated">\r
	23	This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.\r
	24	</div>\r
	25	<div class="description">\r
	26	<p>\r
	27	This sample shows how to configure CKEditor to output valid\r
	28	<a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.\r
	29	Traditional HTML elements like <code><b></code>,\r
	30	<code><i></code>, and <code><font></code> are used in place of\r
	31	<code><strong></code>, <code><em></code>, and CSS styles.\r
	32	</p>\r
	33	<p>\r
	34	To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard\r
	35	JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.\r
	36	</p>\r
	37	<p>\r
	38	A snippet of the configuration code can be seen below; check the source of this page for\r
	39	full definition:\r
	40	</p>\r
	41	<pre class="samples">\r
	42	CKEDITOR.replace( '<em>textarea_id</em>', {\r
	43	coreStyles_bold: { element: 'b' },\r
	44	coreStyles_italic: { element: 'i' },\r
	45	\r
	46	fontSize_style: {\r
	47	element: 'font',\r
	48	attributes: { 'size': '#(size)' }\r
	49	}\r
	50	\r
	51	...\r
	52	});</pre>\r
	53	</div>\r
	54	<form action="../../../samples/sample_posteddata.php" method="post">\r
	55	<p>\r
	56	<label for="editor1">\r
	57	Editor 1:\r
	58	</label>\r
	59	<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <b>sample text</b>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>\r
	60	<script>\r
	61	\r
	62	CKEDITOR.replace( 'editor1', {\r
	63	/*\r
	64	* Ensure that htmlwriter plugin, which is required for this sample, is loaded.\r
	65	*/\r
	66	extraPlugins: 'htmlwriter',\r
	67	\r
68	/*\r
69	* Style sheet for the contents\r
70	*/\r
71	contentsCss: 'body {color:#000; background-color#:FFF;}',\r
72	\r
73	/*\r
74	* Simple HTML5 doctype\r
75	*/\r
76	docType: '<!DOCTYPE HTML>',\r
77	\r
78	/*\r
79	* Allowed content rules which beside limiting allowed HTML\r
80	* will also take care of transforming styles to attributes\r
81	* (currently only for img - see transformation rules defined below).\r
82	*\r
83	* Read more: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter\r
84	*/\r
85	allowedContent:\r
86	'h1 h2 h3 p pre[align]; ' +\r
87	'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +\r
88	'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',\r
89	\r
90	/*\r
91	* Core styles.\r
92	*/\r
93	coreStyles_bold: { element: 'b' },\r
94	coreStyles_italic: { element: 'i' },\r
95	coreStyles_underline: { element: 'u' },\r
96	coreStyles_strike: { element: 'strike' },\r
97	\r
98	/*\r
99	* Font face.\r
100	*/\r
101	\r
102	// Define the way font elements will be applied to the document.\r
103	// The "font" element will be used.\r
104	font_style: {\r
105	element: 'font',\r
106	attributes: { 'face': '#(family)' }\r
107	},\r
108	\r
109	/*\r
110	* Font sizes.\r
111	*/\r
112	fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',\r
113	fontSize_style: {\r
114	element: 'font',\r
115	attributes: { 'size': '#(size)' }\r
116	},\r
117	\r
118	/*\r
119	* Font colors.\r
120	*/\r
121	\r
122	colorButton_foreStyle: {\r
123	element: 'font',\r
124	attributes: { 'color': '#(color)' }\r
125	},\r
126	\r
127	colorButton_backStyle: {\r
128	element: 'font',\r
129	styles: { 'background-color': '#(color)' }\r
130	},\r
131	\r
132	/*\r
133	* Styles combo.\r
134	*/\r
135	stylesSet: [\r
136	{ name: 'Computer Code', element: 'code' },\r
137	{ name: 'Keyboard Phrase', element: 'kbd' },\r
138	{ name: 'Sample Text', element: 'samp' },\r
139	{ name: 'Variable', element: 'var' },\r
140	{ name: 'Deleted Text', element: 'del' },\r
141	{ name: 'Inserted Text', element: 'ins' },\r
142	{ name: 'Cited Work', element: 'cite' },\r
143	{ name: 'Inline Quotation', element: 'q' }\r
144	],\r
145	\r
146	on: {\r
147	pluginsLoaded: configureTransformations,\r
148	loaded: configureHtmlWriter\r
149	}\r
150	});\r
151	\r
152	/*\r
153	* Add missing content transformations.\r
154	*/\r
155	function configureTransformations( evt ) {\r
156	var editor = evt.editor;\r
157	\r
158	editor.dataProcessor.htmlFilter.addRules( {\r
159	attributes: {\r
160	style: function( value, element ) {\r
161	// Return #RGB for background and border colors\r
162	return CKEDITOR.tools.convertRgbToHex( value );\r
163	}\r
164	}\r
165	} );\r
166	\r
167	// Default automatic content transformations do not yet take care of\r
168	// align attributes on blocks, so we need to add our own transformation rules.\r
169	function alignToAttribute( element ) {\r
170	if ( element.styles[ 'text-align' ] ) {\r
171	element.attributes.align = element.styles[ 'text-align' ];\r
172	delete element.styles[ 'text-align' ];\r
173	}\r
174	}\r
175	editor.filter.addTransformations( [\r
176	[ { element: 'p', right: alignToAttribute } ],\r
177	[ { element: 'h1', right: alignToAttribute } ],\r
178	[ { element: 'h2', right: alignToAttribute } ],\r
179	[ { element: 'h3', right: alignToAttribute } ],\r
180	[ { element: 'pre', right: alignToAttribute } ]\r
181	] );\r
182	}\r
183	\r
184	/*\r
185	* Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.\r
186	*/\r
187	function configureHtmlWriter( evt ) {\r
188	var editor = evt.editor,\r
189	dataProcessor = editor.dataProcessor;\r
190	\r
191	// Out self closing tags the HTML4 way, like <br>.\r
192	dataProcessor.writer.selfClosingEnd = '>';\r
193	\r
194	// Make output formatting behave similar to FCKeditor.\r
195	var dtd = CKEDITOR.dtd;\r
196	for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {\r
197	dataProcessor.writer.setRules( e, {\r
198	indent: true,\r
199	breakBeforeOpen: true,\r
200	breakAfterOpen: false,\r
201	breakBeforeClose: !dtd[ e ][ '#' ],\r
202	breakAfterClose: true\r
203	});\r
204	}\r
205	}\r
206	\r
207	</script>\r
208	</p>\r
209	<p>\r
210	<input type="submit" value="Submit">\r
211	</p>\r
212	</form>\r
213	<div id="footer">\r
214	<hr>\r
215	<p>\r
216	CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
217	</p>\r
218	<p id="copy">\r
3b35bd27	219	Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
7adcb81e IB	220	Knabben. All rights reserved.\r
	221	</p>\r
	222	</div>\r
	223	</body>\r
	224	</html>\r