3 Copyright (c) 2003-2017, 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=
"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=
"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>.
22 <div class=
"description">
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><font
></code>,
<code><u
></code>) or attributes
27 (
<code>size
</code>,
<code>face
</code>) will be replaced with XHTML compliant code.
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.
34 A snippet of the configuration code can be seen below; check the source of this page for
38 CKEDITOR.replace( '
<em>textarea_id
</em>', {
39 contentsCss: 'assets/outputxhtml.css',
43 attributes: { 'class': 'Bold' }
47 attributes: { 'class': 'Italic' }
53 <form action=
"sample_posteddata.php" method=
"post">
58 <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>
61 CKEDITOR
.replace( 'editor1', {
63 * Style sheet for the contents
65 contentsCss
: 'assets/outputxhtml/outputxhtml.css',
68 * Special allowed content rules for spans used by
69 * font face, size, and color buttons.
71 * Note: all rules have been written separately so
72 * it was possible to specify required classes.
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)',
84 attributes
: { 'class': 'Bold' }
88 attributes
: { 'class': 'Italic' }
90 coreStyles_underline
: {
92 attributes
: { 'class': 'Underline' }
96 attributes
: { 'class': 'StrikeThrough' },
99 coreStyles_subscript
: {
101 attributes
: { 'class': 'Subscript' },
104 coreStyles_superscript
: {
106 attributes
: { 'class': 'Superscript' },
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).
127 attributes
: { 'class': '#(family)' },
132 'class': /^Font(?:Comic|Courier|Times)$/
141 fontSize_sizes
: 'Smaller/FontSmaller;Larger/FontLarger;8pt/FontSmall;14pt/FontBig;Double Size/FontDouble',
144 attributes
: { 'class': '#(size)' },
149 'class': /^Font(?:Smaller|Larger|Small|Big|Double)$/
158 colorButton_enableMore
: false,
160 colorButton_colors
: 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00',
161 colorButton_foreStyle
: {
163 attributes
: { 'class': '#(color)' },
168 'class': /^FontColor(?:1|2|3)$/
174 colorButton_backStyle
: {
176 attributes
: { 'class': '#(color)BG' },
181 'class': /^FontColor(?:1|2|3)BG$/
190 indentClasses
: [ 'Indent1', 'Indent2', 'Indent3' ],
193 * Paragraph justification.
195 justifyClasses
: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull' ],
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' }
220 <input type=
"submit" value=
"Submit">
226 CKEditor - The text editor for the Internet -
<a class=
"samples" href=
"http://ckeditor.com/">http://ckeditor.com
</a>
229 Copyright
© 2003-
2017,
<a class=
"samples" href=
"http://cksource.com/">CKSource
</a> - Frederico
230 Knabben. All rights reserved.