3 Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
4 For licensing, see LICENSE.md or http://ckeditor.com/license
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">
17 <a href=
"index.html">CKEditor Samples
</a> » Producing XHTML Compliant Output
19 <div class=
"description">
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.
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.
31 A snippet of the configuration code can be seen below; check the source of this page for
35 CKEDITOR.replace( '
<em>textarea_id
</em>', {
36 contentsCss: 'assets/outputxhtml.css',
40 attributes: { 'class': 'Bold' }
44 attributes: { 'class': 'Italic' }
50 <form action=
"sample_posteddata.php" method=
"post">
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>
58 CKEDITOR.replace( 'editor1', {
60 * Style sheet for the contents
62 contentsCss: 'assets/outputxhtml/outputxhtml.css',
65 * Special allowed content rules for spans used by
66 * font face, size, and color buttons.
68 * Note: all rules have been written separately so
69 * it was possible to specify required classes.
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)',
81 attributes: { 'class': 'Bold' }
85 attributes: { 'class': 'Italic' }
87 coreStyles_underline: {
89 attributes: { 'class': 'Underline' }
93 attributes: { 'class': 'StrikeThrough' },
96 coreStyles_subscript: {
98 attributes: { 'class': 'Subscript' },
101 coreStyles_superscript: {
103 attributes: { 'class': 'Superscript' },
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',
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).
124 attributes: { 'class': '#(family)' },
129 'class': /^Font(?:Comic|Courier|Times)$/
138 fontSize_sizes: 'Smaller/FontSmaller;Larger/FontLarger;
8pt/FontSmall;
14pt/FontBig;Double Size/FontDouble',
141 attributes: { 'class': '#(size)' },
146 'class': /^Font(?:Smaller|Larger|Small|Big|Double)$/
155 colorButton_enableMore: false,
157 colorButton_colors: 'FontColor1/FF9900,FontColor2/
0066CC,FontColor3/F00',
158 colorButton_foreStyle: {
160 attributes: { 'class': '#(color)' },
165 'class': /^FontColor(?:
1|
2|
3)$/
171 colorButton_backStyle: {
173 attributes: { 'class': '#(color)BG' },
178 'class': /^FontColor(?:
1|
2|
3)BG$/
187 indentClasses: [ 'Indent1', 'Indent2', 'Indent3' ],
190 * Paragraph justification.
192 justifyClasses: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull' ],
198 { name: 'Strong Emphasis', element: 'strong' },
199 { name: 'Emphasis', element: 'em' },
201 { name: 'Computer Code', element: 'code' },
202 { name: 'Keyboard Phrase', element: 'kbd' },
203 { name: 'Sample Text', element: 'samp' },
204 { name: 'Variable', element: 'var' },
206 { name: 'Deleted Text', element: 'del' },
207 { name: 'Inserted Text', element: 'ins' },
209 { name: 'Cited Work', element: 'cite' },
210 { name: 'Inline Quotation', element: 'q' }
217 <input type=
"submit" value=
"Submit">
223 CKEditor - The text editor for the Internet -
<a class=
"samples" href=
"http://ckeditor.com/">http://ckeditor.com
</a>
226 Copyright
© 2003-
2014,
<a class=
"samples" href=
"http://cksource.com/">CKSource
</a> - Frederico
227 Knabben. All rights reserved.