WebSVN - Integrator Subversion - Blame - Rev 1 - /DOCUMENTOS E ANALISE/telas/assets/global/plugins/ckeditor/samples/xhtmlstyle.html

Rev	Author	Line No.	Line
1	espaco	1	<!DOCTYPE html>
		2	<!--
		3	Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
		4	For licensing, see LICENSE.md or http://ckeditor.com/license
		5	-->
		6	<html>
		7	<head>
		8	<meta charset="utf-8">
		9	<title>XHTML Compliant Output — CKEditor Sample</title>
		10	<meta name="ckeditor-sample-required-plugins" content="sourcearea">
		11	<script src="../ckeditor.js"></script>
		12	<script src="../samples/sample.js"></script>
		13	<link href="sample.css" rel="stylesheet">
		14	</head>
		15	<body>
		16	<h1 class="samples">
		17	<a href="index.html">CKEditor Samples</a> » Producing XHTML Compliant Output
		18	</h1>
		19	<div class="description">
		20	<p>
		21	This sample shows how to configure CKEditor to output valid
		22	<a class="samples" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> code.
		23	Deprecated elements (<code><font></code>, <code><u></code>) or attributes
		24	(<code>size</code>, <code>face</code>) will be replaced with XHTML compliant code.
		25	</p>
		26	<p>
		27	To add a CKEditor instance outputting valid XHTML code, load the editor using a standard
		28	JavaScript call and define CKEditor features to use the XHTML compliant elements and styles.
		29	</p>
		30	<p>
		31	A snippet of the configuration code can be seen below; check the source of this page for
		32	full definition:
		33	</p>
		34	<pre class="samples">
		35	CKEDITOR.replace( '<em>textarea_id</em>', {
		36	contentsCss: 'assets/outputxhtml.css',
		37
		38	coreStyles_bold: {
		39	element: 'span',
		40	attributes: { 'class': 'Bold' }
		41	},
		42	coreStyles_italic: {
		43	element: 'span',
		44	attributes: { 'class': 'Italic' }
		45	},
		46
		47	...
		48	});</pre>
		49	</div>
		50	<form action="sample_posteddata.php" method="post">
		51	<p>
		52	<label for="editor1">
		53	Editor 1:
		54	</label>
		55	<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <span class="Bold">sample text</span>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
		56	<script>
		57
		58	CKEDITOR.replace( 'editor1', {
		59	/*
		60	* Style sheet for the contents
		61	*/
		62	contentsCss: 'assets/outputxhtml/outputxhtml.css',
		63
		64	/*
		65	* Special allowed content rules for spans used by
		66	* font face, size, and color buttons.
		67	*
		68	* Note: all rules have been written separately so
		69	* it was possible to specify required classes.
		70	*/
		71	extraAllowedContent: 'span(!FontColor1);span(!FontColor2);span(!FontColor3);' +
		72	'span(!FontColor1BG);span(!FontColor2BG);span(!FontColor3BG);' +
		73	'span(!FontComic);span(!FontCourier);span(!FontTimes);' +
		74	'span(!FontSmaller);span(!FontLarger);span(!FontSmall);span(!FontBig);span(!FontDouble)',
		75
		76	/*
		77	* Core styles.
		78	*/
		79	coreStyles_bold: {
		80	element: 'span',
		81	attributes: { 'class': 'Bold' }
		82	},
		83	coreStyles_italic: {
		84	element: 'span',
		85	attributes: { 'class': 'Italic' }
		86	},
		87	coreStyles_underline: {
		88	element: 'span',
		89	attributes: { 'class': 'Underline' }
		90	},
		91	coreStyles_strike: {
		92	element: 'span',
		93	attributes: { 'class': 'StrikeThrough' },
		94	overrides: 'strike'
		95	},
		96	coreStyles_subscript: {
		97	element: 'span',
		98	attributes: { 'class': 'Subscript' },
		99	overrides: 'sub'
		100	},
		101	coreStyles_superscript: {
		102	element: 'span',
		103	attributes: { 'class': 'Superscript' },
		104	overrides: 'sup'
		105	},
		106
		107	/*
		108	* Font face.
		109	*/
		110
		111	// List of fonts available in the toolbar combo. Each font definition is
		112	// separated by a semi-colon (;). We are using class names here, so each font
		113	// is defined by {Combo Label}/{Class Name}.
		114	font_names: 'Comic Sans MS/FontComic;Courier New/FontCourier;Times New Roman/FontTimes',
		115
		116	// Define the way font elements will be applied to the document. The "span"
		117	// element will be used. When a font is selected, the font name defined in the
		118	// above list is passed to this definition with the name "Font", being it
		119	// injected in the "class" attribute.
		120	// We must also instruct the editor to replace span elements that are used to
		121	// set the font (Overrides).
		122	font_style: {
		123	element: 'span',
		124	attributes: { 'class': '#(family)' },
		125	overrides: [
		126	{
		127	element: 'span',
		128	attributes: {
		129	'class': /^Font(?:Comic\|Courier\|Times)$/
		130	}
		131	}
		132	]
		133	},
		134
		135	/*
		136	* Font sizes.
		137	*/
		138	fontSize_sizes: 'Smaller/FontSmaller;Larger/FontLarger;8pt/FontSmall;14pt/FontBig;Double Size/FontDouble',
		139	fontSize_style: {
		140	element: 'span',
		141	attributes: { 'class': '#(size)' },
		142	overrides: [
		143	{
		144	element: 'span',
		145	attributes: {
		146	'class': /^Font(?:Smaller\|Larger\|Small\|Big\|Double)$/
		147	}
		148	}
		149	]
		150	} ,
		151
		152	/*
		153	* Font colors.
		154	*/
		155	colorButton_enableMore: false,
		156
		157	colorButton_colors: 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00',
		158	colorButton_foreStyle: {
		159	element: 'span',
		160	attributes: { 'class': '#(color)' },
		161	overrides: [
		162	{
		163	element: 'span',
		164	attributes: {
		165	'class': /^FontColor(?:1\|2\|3)$/
		166	}
		167	}
		168	]
		169	},
		170
		171	colorButton_backStyle: {
		172	element: 'span',
		173	attributes: { 'class': '#(color)BG' },
		174	overrides: [
		175	{
		176	element: 'span',
		177	attributes: {
		178	'class': /^FontColor(?:1\|2\|3)BG$/
		179	}
		180	}
		181	]
		182	},
		183
		184	/*
		185	* Indentation.
		186	*/
		187	indentClasses: [ 'Indent1', 'Indent2', 'Indent3' ],
		188
		189	/*
		190	* Paragraph justification.
		191	*/
		192	justifyClasses: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull' ],
		193
		194	/*
		195	* Styles combo.
		196	*/
		197	stylesSet: [
		198	{ name: 'Strong Emphasis', element: 'strong' },
		199	{ name: 'Emphasis', element: 'em' },
		200
		201	{ name: 'Computer Code', element: 'code' },
		202	{ name: 'Keyboard Phrase', element: 'kbd' },
		203	{ name: 'Sample Text', element: 'samp' },
		204	{ name: 'Variable', element: 'var' },
		205
		206	{ name: 'Deleted Text', element: 'del' },
		207	{ name: 'Inserted Text', element: 'ins' },
		208
		209	{ name: 'Cited Work', element: 'cite' },
		210	{ name: 'Inline Quotation', element: 'q' }
		211	]
		212	});
		213
		214	</script>
		215	</p>
		216	<p>
		217	<input type="submit" value="Submit">
		218	</p>
		219	</form>
		220	<div id="footer">
		221	<hr>
		222	<p>
		223	CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
		224	</p>
		225	<p id="copy">
		226	Copyright © 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
		227	Knabben. All rights reserved.
		228	</p>
		229	</div>
		230	</body>
		231	</html>

Subversion Repositories Integrator Subversion

(root)/DOCUMENTOS E ANALISE/telas/assets/global/plugins/ckeditor/samples/xhtmlstyle.html - Rev 1