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