_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>