Configuration des barres d'outils.
[ckeditor.git] / skins / ckeditor / _samples / output_for_flash.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <!--
3 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
4 For licensing, see LICENSE.html or http://ckeditor.com/license
5 -->
6 <html xmlns="http://www.w3.org/1999/xhtml">
7 <head>
8 <title>Output for Flash &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 <script type="text/javascript" src="assets/swfobject.js"></script>
14 <script type="text/javascript">
15 function sendToFlash()
16 {
17 var html = CKEDITOR.instances.editor1.getData() ;
18 var flash = document.getElementById( 'ckFlash' ) ;
19 flash.setData( html ) ;
20 }
21
22 function init()
23 {
24 var so = new SWFObject("assets/output_for_flash.swf", "ckFlash", "550", "400", "8", "#ffffff") ;
25 so.addParam("wmode", "transparent");
26 so.write("ckFlashContainer") ;
27 }
28 </script>
29 </head>
30 <body onload="init()">
31 <h1 class="samples">
32 CKEditor Sample &mdash; Producing Flash Compliant HTML Output
33 </h1>
34 <div class="description">
35 <p>
36 This sample shows how to configure CKEditor to output
37 HTML code that can be used with
38 <a class="samples" href="http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&amp;file=00000922.html">
39 Adobe Flash</a>.
40 The code will contain a subset of standard HTML elements like <code>&lt;b&gt;</code>,
41 <code>&lt;i&gt;</code>, and <code>&lt;p&gt;</code> as well as HTML attributes.
42 </p>
43 <p>
44 To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard
45 JavaScript call, and define CKEditor features to use HTML elements and attributes.
46 </p>
47 <p>
48 For details on how to create this setup check the source code of this sample page.
49 </p>
50 </div>
51 <p>
52 To see how it works, create some content in the editing area of CKEditor on the left
53 and send it to the Flash object on the right side of the page by using the
54 <strong>Send to Flash</strong> button.
55 </p>
56
57 <!-- This <div> holds alert messages to be display in the sample page. -->
58 <div id="alerts">
59 <noscript>
60 <p>
61 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
62 support, like yours, you should still see the contents (HTML data) and you should
63 be able to edit it normally, without a rich editor interface.
64 </p>
65 </noscript>
66 </div>
67 <hr />
68 <table width="100%" cellpadding="0" cellspacing="0">
69 <tr>
70 <td style="width: 100%">
71 <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>
72 <script type="text/javascript">
73 //<![CDATA[
74
75 if ( document.location.protocol == 'file:' )
76 alert( 'Warning: This samples does not work when loaded from local filesystem due to security restrictions implemented in Flash.' +
77 '\n\nPlease load the sample from a web server instead.') ;
78
79 CKEDITOR.replace( 'editor1',
80 {
81 height : 300,
82 width : '100%',
83 toolbar : [
84 ['Source','-','Bold','Italic','Underline','-','BulletedList','-','Link','Unlink'],
85 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
86 '/',
87 ['Font','FontSize'],
88 ['TextColor','-','About']
89 ],
90
91 /*
92 * Style sheet for the contents
93 */
94 contentsCss : 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',
95
96 /*
97 * Quirks doctype
98 */
99 docType : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
100
101 /*
102 * Core styles.
103 */
104 coreStyles_bold : { element : 'b' },
105 coreStyles_italic : { element : 'i' },
106 coreStyles_underline : { element : 'u'},
107
108 /*
109 * Font face
110 */
111 // Define the way font elements will be applied to the document. The "font"
112 // element will be used.
113 font_style :
114 {
115 element : 'font',
116 attributes : { 'face' : '#(family)' }
117 },
118
119 /*
120 * Font sizes.
121 * The CSS part of the font sizes isn't used by Flash, it is there to get the
122 * font rendered correctly in CKEditor.
123 */
124 fontSize_sizes : '8px/8;9px/9;10px/10;11px/11;12px/12;14px/14;16px/16;18px/18;20px/20;22px/22;24px/24;26px/26;28px/28;36px/36;48px/48;72px/72',
125 fontSize_style :
126 {
127 element : 'font',
128 attributes : { 'size' : '#(size)' },
129 styles : { 'font-size' : '#(size)px' }
130 } ,
131
132 /*
133 * Font colors.
134 */
135 colorButton_enableMore : true,
136
137 colorButton_foreStyle :
138 {
139 element : 'font',
140 attributes : { 'color' : '#(color)' }
141 },
142
143 colorButton_backStyle :
144 {
145 element : 'font',
146 styles : { 'background-color' : '#(color)' }
147 },
148
149
150 on : { 'instanceReady' : configureFlashOutput }
151 });
152
153 /*
154 * Adjust the behavior of the dataProcessor to match the
155 * requirements of Flash
156 */
157 function configureFlashOutput( ev )
158 {
159 var editor = ev.editor,
160 dataProcessor = editor.dataProcessor,
161 htmlFilter = dataProcessor && dataProcessor.htmlFilter;
162
163 // Out self closing tags the HTML4 way, like <br>.
164 dataProcessor.writer.selfClosingEnd = '>';
165
166 // Make output formatting match Flash expectations
167 var dtd = CKEDITOR.dtd;
168 for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
169 {
170 dataProcessor.writer.setRules( e,
171 {
172 indent : false,
173 breakBeforeOpen : false,
174 breakAfterOpen : false,
175 breakBeforeClose : false,
176 breakAfterClose : false
177 });
178 }
179 dataProcessor.writer.setRules( 'br',
180 {
181 indent : false,
182 breakBeforeOpen : false,
183 breakAfterOpen : false,
184 breakBeforeClose : false,
185 breakAfterClose : false
186 });
187
188 // Output properties as attributes, not styles.
189 htmlFilter.addRules(
190 {
191 elements :
192 {
193 $ : function( element )
194 {
195 var style, match, width, height, align;
196
197 // Output dimensions of images as width and height
198 if ( element.name == 'img' )
199 {
200 style = element.attributes.style;
201
202 if ( style )
203 {
204 // Get the width from the style.
205 match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style );
206 width = match && match[1];
207
208 // Get the height from the style.
209 match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
210 height = match && match[1];
211
212 if ( width )
213 {
214 element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
215 element.attributes.width = width;
216 }
217
218 if ( height )
219 {
220 element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
221 element.attributes.height = height;
222 }
223 }
224 }
225
226 // Output alignment of paragraphs using align
227 if ( element.name == 'p' )
228 {
229 style = element.attributes.style;
230
231 if ( style )
232 {
233 // Get the align from the style.
234 match = /(?:^|\s)text-align\s*:\s*(\w*);?/i.exec( style );
235 align = match && match[1];
236
237 if ( align )
238 {
239 element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
240 element.attributes.align = align;
241 }
242 }
243 }
244
245 if ( element.attributes.style === '' )
246 delete element.attributes.style;
247
248 return element;
249 }
250 }
251
252 } );
253 }
254
255 //]]>
256 </script>
257 <input type="button" value="Send to Flash" onclick="sendToFlash();" />
258 </td>
259 <td valign="top" style="padding-left: 15px" id="ckFlashContainer">
260 </td>
261 </tr>
262 </table>
263
264 <div id="footer">
265 <hr />
266 <p>
267 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
268 </p>
269 <p id="copy">
270 Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
271 Knabben. All rights reserved.
272 </p>
273 </div>
274 </body>
275 </html>