|
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 — 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> » 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><font></code>, <code><u></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', |
|
40 |
|
41 coreStyles_bold: { |
|
42 element: 'span', |
|
43 attributes: { 'class': 'Bold' } |
|
44 }, |
|
45 coreStyles_italic: { |
|
46 element: 'span', |
|
47 attributes: { 'class': 'Italic' } |
|
48 }, |
|
49 |
|
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"><p>This is some <span class="Bold">sample text</span>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea> |
|
59 <script> |
|
60 |
|
61 CKEDITOR.replace( 'editor1', { |
|
62 /* |
|
63 * Style sheet for the contents |
|
64 */ |
|
65 contentsCss: 'assets/outputxhtml/outputxhtml.css', |
|
66 |
|
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)', |
|
78 |
|
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 }, |
|
109 |
|
110 /* |
|
111 * Font face. |
|
112 */ |
|
113 |
|
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', |
|
118 |
|
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 }, |
|
137 |
|
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 } , |
|
154 |
|
155 /* |
|
156 * Font colors. |
|
157 */ |
|
158 colorButton_enableMore: false, |
|
159 |
|
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 }, |
|
173 |
|
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 }, |
|
186 |
|
187 /* |
|
188 * Indentation. |
|
189 */ |
|
190 indentClasses: [ 'Indent1', 'Indent2', 'Indent3' ], |
|
191 |
|
192 /* |
|
193 * Paragraph justification. |
|
194 */ |
|
195 justifyClasses: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull' ], |
|
196 |
|
197 /* |
|
198 * Styles combo. |
|
199 */ |
|
200 stylesSet: [ |
|
201 { name: 'Strong Emphasis', element: 'strong' }, |
|
202 { name: 'Emphasis', element: 'em' }, |
|
203 |
|
204 { name: 'Computer Code', element: 'code' }, |
|
205 { name: 'Keyboard Phrase', element: 'kbd' }, |
|
206 { name: 'Sample Text', element: 'samp' }, |
|
207 { name: 'Variable', element: 'var' }, |
|
208 |
|
209 { name: 'Deleted Text', element: 'del' }, |
|
210 { name: 'Inserted Text', element: 'ins' }, |
|
211 |
|
212 { name: 'Cited Work', element: 'cite' }, |
|
213 { name: 'Inline Quotation', element: 'q' } |
|
214 ] |
|
215 }); |
|
216 |
|
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 © 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> |