source: trunk/admin/inc/ckeditor/_samples/output_html.html@ 292

Last change on this file since 292 was 239, checked in by luc, 9 years ago

Admin: correzione visulaizzazione immissione dati spoglio per Chrome e Safari - Aggiornamento dell'editor da FCKeditor a CKeditor , accessibili anche a Chrome e Safari.
  • Property svn:executable set to *
File size: 8.2 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<!--
3Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.html or http://ckeditor.com/license
5-->
6<html xmlns="http://www.w3.org/1999/xhtml">
7<head>
8 <title>HTML Compliant Output &mdash; CKEditor Sample</title>
9 <meta content="text/html; charset=utf-8" http-equiv="content-type" />
10 <script type="text/javascript" src="../ckeditor.js"></script>
11 <script src="sample.js" type="text/javascript"></script>
12 <link href="sample.css" rel="stylesheet" type="text/css" />
13</head>
14<body>
15 <h1 class="samples">
16 CKEditor Sample &mdash; Producing HTML Compliant Output
17 </h1>
18 <div class="description">
19 <p>
20 This sample shows how to configure CKEditor to output valid
21 <a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.
22 Traditional HTML elements like <code>&lt;b&gt;</code>,
23 <code>&lt;i&gt;</code>, and <code>&lt;font&gt;</code> are used in place of
24 <code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, and CSS styles.
25 </p>
26 <p>
27 To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard
28 JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.
29 </p>
30 <p>
31 A snippet of the configuration code can be seen below; check the source of this page for
32 full definition:
33 </p>
34 <pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
35 {
36 coreStyles_bold : { element : 'b' },
37 coreStyles_italic : { element : 'i' },
38
39 fontSize_style :
40 {
41 element : 'font',
42 attributes : { 'size' : '#(size)' }
43 }
44
45 // More definitions follow.
46 });</pre>
47 </div>
48
49 <!-- This <div> holds alert messages to be display in the sample page. -->
50 <div id="alerts">
51 <noscript>
52 <p>
53 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
54 support, like yours, you should still see the contents (HTML data) and you should
55 be able to edit it normally, without a rich editor interface.
56 </p>
57 </noscript>
58 </div>
59 <form action="sample_posteddata.php" method="post">
60 <p>
61 <label for="editor1">
62 Editor 1:</label>
63 <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;b&gt;sample text&lt;/b&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
64 <script type="text/javascript">
65 //<![CDATA[
66
67 CKEDITOR.replace( 'editor1',
68 {
69 /*
70 * Style sheet for the contents
71 */
72 contentsCss : 'body {color:#000; background-color#:FFF;}',
73
74 /*
75 * Simple HTML5 doctype
76 */
77 docType : '<!DOCTYPE HTML>',
78
79 /*
80 * Core styles.
81 */
82 coreStyles_bold : { element : 'b' },
83 coreStyles_italic : { element : 'i' },
84 coreStyles_underline : { element : 'u'},
85 coreStyles_strike : { element : 'strike' },
86
87 /*
88 * Font face
89 */
90 // Define the way font elements will be applied to the document. The "font"
91 // element will be used.
92 font_style :
93 {
94 element : 'font',
95 attributes : { 'face' : '#(family)' }
96 },
97
98 /*
99 * Font sizes.
100 */
101 fontSize_sizes : 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
102 fontSize_style :
103 {
104 element : 'font',
105 attributes : { 'size' : '#(size)' }
106 } ,
107
108 /*
109 * Font colors.
110 */
111 colorButton_enableMore : true,
112
113 colorButton_foreStyle :
114 {
115 element : 'font',
116 attributes : { 'color' : '#(color)' }
117 },
118
119 colorButton_backStyle :
120 {
121 element : 'font',
122 styles : { 'background-color' : '#(color)' }
123 },
124
125 /*
126 * Styles combo.
127 */
128 stylesSet :
129 [
130 { name : 'Computer Code', element : 'code' },
131 { name : 'Keyboard Phrase', element : 'kbd' },
132 { name : 'Sample Text', element : 'samp' },
133 { name : 'Variable', element : 'var' },
134
135 { name : 'Deleted Text', element : 'del' },
136 { name : 'Inserted Text', element : 'ins' },
137
138 { name : 'Cited Work', element : 'cite' },
139 { name : 'Inline Quotation', element : 'q' }
140 ],
141
142 on : { 'instanceReady' : configureHtmlOutput }
143 });
144
145/*
146 * Adjust the behavior of the dataProcessor to avoid styles
147 * and make it look like FCKeditor HTML output.
148 */
149function configureHtmlOutput( ev )
150{
151 var editor = ev.editor,
152 dataProcessor = editor.dataProcessor,
153 htmlFilter = dataProcessor && dataProcessor.htmlFilter;
154
155 // Out self closing tags the HTML4 way, like <br>.
156 dataProcessor.writer.selfClosingEnd = '>';
157
158 // Make output formatting behave similar to FCKeditor
159 var dtd = CKEDITOR.dtd;
160 for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
161 {
162 dataProcessor.writer.setRules( e,
163 {
164 indent : true,
165 breakBeforeOpen : true,
166 breakAfterOpen : false,
167 breakBeforeClose : !dtd[ e ][ '#' ],
168 breakAfterClose : true
169 });
170 }
171
172 // Output properties as attributes, not styles.
173 htmlFilter.addRules(
174 {
175 elements :
176 {
177 $ : function( element )
178 {
179 // Output dimensions of images as width and height
180 if ( element.name == 'img' )
181 {
182 var style = element.attributes.style;
183
184 if ( style )
185 {
186 // Get the width from the style.
187 var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
188 width = match && match[1];
189
190 // Get the height from the style.
191 match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
192 var height = match && match[1];
193
194 if ( width )
195 {
196 element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
197 element.attributes.width = width;
198 }
199
200 if ( height )
201 {
202 element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
203 element.attributes.height = height;
204 }
205 }
206 }
207
208 // Output alignment of paragraphs using align
209 if ( element.name == 'p' )
210 {
211 style = element.attributes.style;
212
213 if ( style )
214 {
215 // Get the align from the style.
216 match = /(?:^|\s)text-align\s*:\s*(\w*);/i.exec( style );
217 var align = match && match[1];
218
219 if ( align )
220 {
221 element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
222 element.attributes.align = align;
223 }
224 }
225 }
226
227 if ( !element.attributes.style )
228 delete element.attributes.style;
229
230 return element;
231 }
232 },
233
234 attributes :
235 {
236 style : function( value, element )
237 {
238 // Return #RGB for background and border colors
239 return convertRGBToHex( value );
240 }
241 }
242 } );
243}
244
245
246/**
247* Convert a CSS rgb(R, G, B) color back to #RRGGBB format.
248* @param Css style string (can include more than one color
249* @return Converted css style.
250*/
251function convertRGBToHex( cssStyle )
252{
253 return cssStyle.replace( /(?:rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\))/gi, function( match, red, green, blue )
254 {
255 red = parseInt( red, 10 ).toString( 16 );
256 green = parseInt( green, 10 ).toString( 16 );
257 blue = parseInt( blue, 10 ).toString( 16 );
258 var color = [red, green, blue] ;
259
260 // Add padding zeros if the hex value is less than 0x10.
261 for ( var i = 0 ; i < color.length ; i++ )
262 color[i] = String( '0' + color[i] ).slice( -2 ) ;
263
264 return '#' + color.join( '' ) ;
265 });
266}
267 //]]>
268 </script>
269 </p>
270 <p>
271 <input type="submit" value="Submit" />
272 </p>
273 </form>
274 <div id="footer">
275 <hr />
276 <p>
277 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
278 </p>
279 <p id="copy">
280 Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
281 Knabben. All rights reserved.
282 </p>
283 </div>
284</body>
285</html>
Note: See TracBrowser for help on using the repository browser.