3 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
4 For licensing, see LICENSE.md or http://ckeditor.com/license
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.">
33 <a href="../../../samples/old/index.html">CKEditor Samples</a> » Producing Flash Compliant HTML Output
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>.
38 <div class="description">
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">
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.
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.
52 For details on how to create this setup check the source code of this sample page.
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.
60 <table style="width: 100%; border-spacing: 0; border-collapse:collapse;">
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>
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.' );
71 var editor = CKEDITOR.replace( 'editor1', {
73 * Ensure that htmlwriter plugin, which is required for this sample, is loaded.
75 extraPlugins: 'htmlwriter',
80 [ 'Source', '-', 'Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink' ],
81 [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
83 [ 'Font', 'FontSize' ],
84 [ 'TextColor', '-', 'About' ]
88 * Style sheet for the contents
90 contentsCss: 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',
95 docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
100 coreStyles_bold: { element: 'b' },
101 coreStyles_italic: { element: 'i' },
102 coreStyles_underline: { element: 'u' },
108 // Define the way font elements will be applied to the document. The "font"
109 // element will be used.
112 attributes: { 'face': '#(family)' }
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',
124 attributes: { 'size': '#(size)' },
125 styles: { 'font-size': '#(size)px' }
131 colorButton_enableMore: true,
133 colorButton_foreStyle: {
135 attributes: { 'color': '#(color)' }
138 colorButton_backStyle: {
140 styles: { 'background-color': '#(color)' }
143 on: { 'instanceReady': configureFlashOutput }
147 * Adjust the behavior of the dataProcessor to match the
148 * requirements of Flash
150 function configureFlashOutput( ev ) {
151 var editor = ev.editor,
152 dataProcessor = editor.dataProcessor,
153 htmlFilter = dataProcessor && dataProcessor.htmlFilter;
155 // Out self closing tags the HTML4 way, like <br>.
156 dataProcessor.writer.selfClosingEnd = '>';
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, {
163 breakBeforeOpen: false,
164 breakAfterOpen: false,
165 breakBeforeClose: false,
166 breakAfterClose: false
169 dataProcessor.writer.setRules( 'br', {
171 breakBeforeOpen: false,
172 breakAfterOpen: false,
173 breakBeforeClose: false,
174 breakAfterClose: false
177 // Output properties as attributes, not styles.
178 htmlFilter.addRules( {
180 $: function( element ) {
181 var style, match, width, height, align;
183 // Output dimensions of images as width and height
184 if ( element.name == 'img' ) {
185 style = element.attributes.style;
188 // Get the width from the style.
189 match = ( /(?:^|\s)width\s*:\s*(\d+)px/i ).exec( style );
190 width = match && match[1];
192 // Get the height from the style.
193 match = ( /(?:^|\s)height\s*:\s*(\d+)px/i ).exec( style );
194 height = match && match[1];
197 element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
198 element.attributes.width = width;
202 element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
203 element.attributes.height = height;
208 // Output alignment of paragraphs using align
209 if ( element.name == 'p' ) {
210 style = element.attributes.style;
213 // Get the align from the style.
214 match = ( /(?:^|\s)text-align\s*:\s*(\w*);?/i ).exec( style );
215 align = match && match[1];
218 element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
219 element.attributes.align = align;
224 if ( element.attributes.style === '' )
225 delete element.attributes.style;
233 function sendToFlash() {
234 var html = CKEDITOR.instances.editor1.getData() ;
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>' )
240 var flash = document.getElementById( 'ckFlashContainer' ) ;
241 flash.setData( html ) ;
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 );
253 'assets/outputforflash/outputforflash.swf',
258 { wmode: 'transparent' }
264 <input type="button" value="Send to Flash" onclick="sendToFlash();">
267 <td style="vertical-align: top; padding-left: 20px">
268 <div id="ckFlashContainer"></div>
275 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
278 Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
279 Knabben. All rights reserved.