aboutsummaryrefslogtreecommitdiff
path: root/release/samples/old/xhtmlstyle.html
diff options
context:
space:
mode:
Diffstat (limited to 'release/samples/old/xhtmlstyle.html')
-rw-r--r--release/samples/old/xhtmlstyle.html234
1 files changed, 234 insertions, 0 deletions
diff --git a/release/samples/old/xhtmlstyle.html b/release/samples/old/xhtmlstyle.html
new file mode 100644
index 0000000..daf5879
--- /dev/null
+++ b/release/samples/old/xhtmlstyle.html
@@ -0,0 +1,234 @@
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
4For 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">
38CKEDITOR.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">&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>
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 &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
230 Knabben. All rights reserved.
231 </p>
232 </div>
233</body>
234</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-03 17:30:58 +0000