3 Copyright (c) 2003-2016, 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-
2016,
<a class=
"samples" href=
"http://cksource.com/">CKSource
</a> - Frederico
230 Knabben. All rights reserved.