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