crossreference-demo: ckeditor/samples/old/xhtmlstyle.html@44d330dccc59

     1 <!DOCTYPE html>

     2 <!--

     3 Copyright (c) 2003-2016, 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 &mdash; CKEditor Sample</title>

    10 	<meta name="ckeditor-sample-required-plugins" content="sourcearea">

    11 	<script src="../../ckeditor.js"></script>

    12 	<script src="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> &raquo; Producing XHTML Compliant Output

    18 	</h1>

    19 	<div class="warning deprecated">

    20 		This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/basicstyles.html">brand new version in CKEditor SDK</a>.

    21 	</div>

    22 	<div class="description">

    23 		<p>

    24 			This sample shows how to configure CKEditor to output valid

    25 			<a class="samples" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> code.

    26 			Deprecated elements (<code>&lt;font&gt;</code>, <code>&lt;u&gt;</code>) or attributes

    27 			(<code>size</code>, <code>face</code>) will be replaced with XHTML compliant code.

    28 		</p>

    29 		<p>

    30 			To add a CKEditor instance outputting valid XHTML code, load the editor using a standard

    31 			JavaScript call and define CKEditor features to use the XHTML compliant elements and styles.

    32 		</p>

    33 		<p>

    34 			A snippet of the configuration code can be seen below; check the source of this page for

    35 			full definition:

    36 		</p>

    37 <pre class="samples">

    38 CKEDITOR.replace( '<em>textarea_id</em>', {

    39 	contentsCss: 'assets/outputxhtml.css',

    41 	coreStyles_bold: {

    42 		element: 'span',

    43 		attributes: { 'class': 'Bold' }

    44 	},

    45 	coreStyles_italic: {

    46 		element: 'span',

    47 		attributes: { 'class': 'Italic' }

    48 	},

    50 	...

    51 });</pre>

    52 	</div>

    53 	<form action="sample_posteddata.php" method="post">

    54 		<p>

    55 			<label for="editor1">

    56 				Editor 1:

    57 			</label>

    58 			<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;span class="Bold"&gt;sample text&lt;/span&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>

    59 			<script>

    61 				CKEDITOR.replace( 'editor1', {

    62 					/*

    63 					 * Style sheet for the contents

    64 					 */

    65 					contentsCss: 'assets/outputxhtml/outputxhtml.css',

    67 					/*

    68 					 * Special allowed content rules for spans used by

    69 					 * font face, size, and color buttons.

    70 					 *

    71 					 * Note: all rules have been written separately so

    72 					 * it was possible to specify required classes.

    73 					 */

    74 					extraAllowedContent: 'span(!FontColor1);span(!FontColor2);span(!FontColor3);' +

    75 						'span(!FontColor1BG);span(!FontColor2BG);span(!FontColor3BG);' +

    76 						'span(!FontComic);span(!FontCourier);span(!FontTimes);' +

    77 						'span(!FontSmaller);span(!FontLarger);span(!FontSmall);span(!FontBig);span(!FontDouble)',

    79 					/*

    80 					 * Core styles.

    81 					 */

    82 					coreStyles_bold: {

    83 						element: 'span',

    84 						attributes: { 'class': 'Bold' }

    85 					},

    86 					coreStyles_italic: {

    87 						element: 'span',

    88 						attributes: { 'class': 'Italic' }

    89 					},

    90 					coreStyles_underline: {

    91 						element: 'span',

    92 						attributes: { 'class': 'Underline' }

    93 					},

    94 					coreStyles_strike: {

    95 						element: 'span',

    96 						attributes: { 'class': 'StrikeThrough' },

    97 						overrides: 'strike'

    98 					},

    99 					coreStyles_subscript: {

   100 						element: 'span',

   101 						attributes: { 'class': 'Subscript' },

   102 						overrides: 'sub'

   103 					},

   104 					coreStyles_superscript: {

   105 						element: 'span',

   106 						attributes: { 'class': 'Superscript' },

   107 						overrides: 'sup'

   108 					},

   110 					/*

   111 					 * Font face.

   112 					 */

   114 					// List of fonts available in the toolbar combo. Each font definition is

   115 					// separated by a semi-colon (;). We are using class names here, so each font

   116 					// is defined by {Combo Label}/{Class Name}.

   117 					font_names: 'Comic Sans MS/FontComic;Courier New/FontCourier;Times New Roman/FontTimes',

   119 					// Define the way font elements will be applied to the document. The "span"

   120 					// element will be used. When a font is selected, the font name defined in the

   121 					// above list is passed to this definition with the name "Font", being it

   122 					// injected in the "class" attribute.

   123 					// We must also instruct the editor to replace span elements that are used to

   124 					// set the font (Overrides).

   125 					font_style: {

   126 						element: 'span',

   127 						attributes: { 'class': '#(family)' },

   128 						overrides: [

   129 							{

   130 								element: 'span',

   131 								attributes: {

   132 									'class': /^Font(?:Comic|Courier|Times)$/

   133 								}

   134 							}

   135 						]

   136 					},

   138 					/*

   139 					 * Font sizes.

   140 					 */

   141 					fontSize_sizes: 'Smaller/FontSmaller;Larger/FontLarger;8pt/FontSmall;14pt/FontBig;Double Size/FontDouble',

   142 					fontSize_style: {

   143 						element: 'span',

   144 						attributes: { 'class': '#(size)' },

   145 						overrides: [

   146 							{

   147 								element: 'span',

   148 								attributes: {

   149 									'class': /^Font(?:Smaller|Larger|Small|Big|Double)$/

   150 								}

   151 							}

   152 						]

   153 					} ,

   155 					/*

   156 					 * Font colors.

   157 					 */

   158 					colorButton_enableMore: false,

   160 					colorButton_colors: 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00',

   161 					colorButton_foreStyle: {

   162 						element: 'span',

   163 						attributes: { 'class': '#(color)' },

   164 						overrides: [

   165 							{

   166 								element: 'span',

   167 								attributes: {

   168 									'class': /^FontColor(?:1|2|3)$/

   169 								}

   170 							}

   171 						]

   172 					},

   174 					colorButton_backStyle: {

   175 						element: 'span',

   176 						attributes: { 'class': '#(color)BG' },

   177 						overrides: [

   178 							{

   179 								element: 'span',

   180 								attributes: {

   181 									'class': /^FontColor(?:1|2|3)BG$/

   182 								}

   183 							}

   184 						]

   185 					},

   187 					/*

   188 					 * Indentation.

   189 					 */

   190 					indentClasses: [ 'Indent1', 'Indent2', 'Indent3' ],

   192 					/*

   193 					 * Paragraph justification.

   194 					 */

   195 					justifyClasses: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull' ],

   197 					/*

   198 					 * Styles combo.

   199 					 */

   200 					stylesSet: [

   201 						{ name: 'Strong Emphasis', element: 'strong' },

   202 						{ name: 'Emphasis', element: 'em' },

   204 						{ name: 'Computer Code', element: 'code' },

   205 						{ name: 'Keyboard Phrase', element: 'kbd' },

   206 						{ name: 'Sample Text', element: 'samp' },

   207 						{ name: 'Variable', element: 'var' },

   209 						{ name: 'Deleted Text', element: 'del' },

   210 						{ name: 'Inserted Text', element: 'ins' },

   212 						{ name: 'Cited Work', element: 'cite' },

   213 						{ name: 'Inline Quotation', element: 'q' }

   214 					]

   215 				});

   217 			</script>

   218 		</p>

   219 		<p>

   220 			<input type="submit" value="Submit">

   221 		</p>

   222 	</form>

   223 	<div id="footer">

   224 		<hr>

   225 		<p>

   226 			CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>

   227 		</p>

   228 		<p id="copy">

   229 			Copyright &copy; 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico

   230 			Knabben. All rights reserved.

   231 		</p>

   232 	</div>

   233 </body>

   234 </html>

author	indvd00m (gotoindvdum[at]gmail[dot]com)
	Thu, 15 Dec 2016 18:10:20 +0300
changeset 0	44d330dccc59
permissions	-rw-r--r--