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