Subversion Repositories php-qbpwcf

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
23 liveuser 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 &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">
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">&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-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
230 
			Knabben. All rights reserved.
231 
		</p>
232 
	</div>
233 
</body>
234 
</html>