1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
\r
3 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
\r
4 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
6 <html xmlns="http://www.w3.org/1999/xhtml">
\r
8 <title>Output for Flash</title>
\r
9 <meta content="text/html; charset=utf-8" http-equiv="content-type" />
\r
10 <script type="text/javascript" src="../ckeditor.js"></script>
\r
11 <script src="sample.js" type="text/javascript"></script>
\r
12 <link href="sample.css" rel="stylesheet" type="text/css" />
\r
13 <script type="text/javascript" src="assets/swfobject.js"></script>
\r
14 <script type="text/javascript">
\r
15 function sendToFlash()
\r
17 var html = CKEDITOR.instances.editor1.getData() ;
\r
18 var flash = document.getElementById( 'ckFlash' ) ;
\r
19 flash.setData( html ) ;
\r
24 var so = new SWFObject("assets/output_for_flash.swf", "ckFlash", "550", "400", "8", "#ffffff") ;
\r
25 so.addParam("wmode", "transparent");
\r
26 so.write("ckFlashContainer") ;
\r
30 <body onload="init()">
\r
34 <!-- This <div> holds alert messages to be display in the sample page. -->
\r
38 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
\r
39 support, like yours, you should still see the contents (HTML data) and you should
\r
40 be able to edit it normally, without a rich editor interface.
\r
46 This sample shows CKEditor configured to produce HTML code that can be used with
\r
47 <a href="http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000922.html">
\r
51 <table width="100%" cellpadding="0" cellspacing="0">
\r
53 <td style="width: 100%">
\r
54 <textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <b>sample text</b>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
\r
55 <script type="text/javascript">
\r
58 if ( document.location.protocol == 'file:' )
\r
59 alert( 'Warning: This samples does not work when loaded from local filesystem due to security restrictions implemented in Flash.' +
\r
60 '\n\nPlease load the sample from a web server instead.') ;
\r
62 CKEDITOR.replace( 'editor1',
\r
67 ['Source','-','Bold','Italic','Underline','-','BulletedList','-','Link','Unlink'],
\r
68 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
\r
70 ['Font','FontSize','-','TextColor','-','About']
\r
74 * Style sheet for the contents
\r
76 contentsCss : 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',
\r
81 docType : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
\r
86 coreStyles_bold : { element : 'b' },
\r
87 coreStyles_italic : { element : 'i' },
\r
88 coreStyles_underline : { element : 'u'},
\r
93 // Define the way font elements will be applied to the document. The "font"
\r
94 // element will be used.
\r
98 attributes : { 'face' : '#(family)' }
\r
103 * The CSS part of the font sizes isn't used by Flash, it is there to get the
\r
104 * font rendered correctly in CKEditor.
\r
106 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',
\r
110 attributes : { 'size' : '#(size)' },
\r
111 styles : { 'font-size' : '#(size)px' }
\r
117 colorButton_enableMore : true,
\r
119 colorButton_foreStyle :
\r
122 attributes : { 'color' : '#(color)' }
\r
125 colorButton_backStyle :
\r
128 styles : { 'background-color' : '#(color)' }
\r
132 on : { 'instanceReady' : configureFlashOutput }
\r
136 * Adjust the behavior of the dataProcessor to match the
\r
137 * requirements of Flash
\r
139 function configureFlashOutput( ev )
\r
141 var editor = ev.editor,
\r
142 dataProcessor = editor.dataProcessor,
\r
143 htmlFilter = dataProcessor && dataProcessor.htmlFilter;
\r
145 // Out self closing tags the HTML4 way, like <br>.
\r
146 dataProcessor.writer.selfClosingEnd = '>';
\r
148 // Make output formatting match Flash expectations
\r
149 var dtd = CKEDITOR.dtd;
\r
150 for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
\r
152 dataProcessor.writer.setRules( e,
\r
155 breakBeforeOpen : false,
\r
156 breakAfterOpen : false,
\r
157 breakBeforeClose : false,
\r
158 breakAfterClose : false
\r
161 dataProcessor.writer.setRules( 'br',
\r
164 breakBeforeOpen : false,
\r
165 breakAfterOpen : false,
\r
166 breakBeforeClose : false,
\r
167 breakAfterClose : false
\r
170 // Output properties as attributes, not styles.
\r
171 htmlFilter.addRules(
\r
175 $ : function( element )
\r
177 var style, match, width, height, align;
\r
179 // Output dimensions of images as width and height
\r
180 if ( element.name == 'img' )
\r
182 style = element.attributes.style;
\r
186 // Get the width from the style.
\r
187 match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style );
\r
188 width = match && match[1];
\r
190 // Get the height from the style.
\r
191 match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
\r
192 height = match && match[1];
\r
196 element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
\r
197 element.attributes.width = width;
\r
202 element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
\r
203 element.attributes.height = height;
\r
208 // Output alignment of paragraphs using align
\r
209 if ( element.name == 'p' )
\r
211 style = element.attributes.style;
\r
215 // Get the align from the style.
\r
216 match = /(?:^|\s)text-align\s*:\s*(\w*);?/i.exec( style );
\r
217 align = match && match[1];
\r
221 element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
\r
222 element.attributes.align = align;
\r
227 if ( element.attributes.style == '' )
\r
228 delete element.attributes.style;
\r
239 <input type="button" value="Send to Flash" onclick="sendToFlash();" />
\r
241 <td valign="top" style="padding-left: 15px" id="ckFlashContainer">
\r
249 CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
\r
252 Copyright © 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
\r
253 Knabben. All rights reserved.
\r