_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-2010, 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</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>\r
  32                 CKEditor Sample\r
  33         </h1>\r
  34         <!-- This <div> holds alert messages to be display in the sample page. -->\r
  35         <div id="alerts">\r
  36                 <noscript>\r
  37                         <p>\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
  41                         </p>\r
  42                 </noscript>\r
  43         </div>\r
  44 \r
  45         <div>\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&amp;file=00000922.html">\r
  48                         Flash</a>.\r
  49         </div>\r
  50         <hr />\r
  51         <table width="100%" cellpadding="0" cellspacing="0">\r
  52                 <tr>\r
  53                         <td style="width: 100%">\r
  54                         <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
  55                         <script type="text/javascript">\r
  56                         //<![CDATA[\r
  57 \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
  61 \r
  62                                 CKEDITOR.replace( 'editor1',\r
  63                                         {\r
  64                                                 height : 300,\r
  65                                                 width : '100%',\r
  66                                                 toolbar : [\r
  67                                                                 ['Source','-','Bold','Italic','Underline','-','BulletedList','-','Link','Unlink'],\r
  68                                                                 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],\r
  69                                                                 '/',\r
  70                                                                 ['Font','FontSize','-','TextColor','-','About']\r
  71                                                         ],\r
  72 \r
  73                                                 /*\r
  74                                                  * Style sheet for the contents\r
  75                                                  */\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
  77 \r
  78                                                 /*\r
  79                                                  * Quirks doctype\r
  80                                                  */\r
  81                                                 docType : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',\r
  82 \r
  83                                                 /*\r
  84                                                  * Core styles.\r
  85                                                  */\r
  86                                                 coreStyles_bold : { element : 'b' },\r
  87                                                 coreStyles_italic       : { element : 'i' },\r
  88                                                 coreStyles_underline    : { element : 'u'},\r
  89 \r
  90                                                 /*\r
  91                                                  * Font face\r
  92                                                  */\r
  93                                                 // Define the way font elements will be applied to the document. The "font"\r
  94                                                 // element will be used.\r
  95                                                 font_style :\r
  96                                                 {\r
  97                                                                 element         : 'font',\r
  98                                                                 attributes              : { 'face' : '#(family)' }\r
  99                                                 },\r
 100 \r
 101                                                 /*\r
 102                                                  * Font sizes.\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
 105                                                  */\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
 107                                                 fontSize_style :\r
 108                                                         {\r
 109                                                                 element         : 'font',\r
 110                                                                 attributes      : { 'size' : '#(size)' },\r
 111                                                                 styles          : { 'font-size' : '#(size)px' }\r
 112                                                         } ,\r
 113 \r
 114                                                 /*\r
 115                                                  * Font colors.\r
 116                                                  */\r
 117                                                 colorButton_enableMore : true,\r
 118 \r
 119                                                 colorButton_foreStyle :\r
 120                                                         {\r
 121                                                                 element : 'font',\r
 122                                                                 attributes : { 'color' : '#(color)' }\r
 123                                                         },\r
 124 \r
 125                                                 colorButton_backStyle :\r
 126                                                         {\r
 127                                                                 element : 'font',\r
 128                                                                 styles  : { 'background-color' : '#(color)' }\r
 129                                                         },\r
 130 \r
 131 \r
 132                                                 on : { 'instanceReady' : configureFlashOutput }\r
 133                                         });\r
 134 \r
 135 /*\r
 136  * Adjust the behavior of the dataProcessor to match the\r
 137  * requirements of Flash\r
 138  */\r
 139 function configureFlashOutput( ev )\r
 140 {\r
 141         var editor = ev.editor,\r
 142                 dataProcessor = editor.dataProcessor,\r
 143                 htmlFilter = dataProcessor && dataProcessor.htmlFilter;\r
 144 \r
 145         // Out self closing tags the HTML4 way, like <br>.\r
 146         dataProcessor.writer.selfClosingEnd = '>';\r
 147 \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
 151         {\r
 152                 dataProcessor.writer.setRules( e,\r
 153                         {\r
 154                                 indent : false,\r
 155                                 breakBeforeOpen : false,\r
 156                                 breakAfterOpen : false,\r
 157                                 breakBeforeClose : false,\r
 158                                 breakAfterClose : false\r
 159                         });\r
 160         }\r
 161         dataProcessor.writer.setRules( 'br',\r
 162                 {\r
 163                         indent : false,\r
 164                         breakBeforeOpen : false,\r
 165                         breakAfterOpen : false,\r
 166                         breakBeforeClose : false,\r
 167                         breakAfterClose : false\r
 168                 });\r
 169 \r
 170         // Output properties as attributes, not styles.\r
 171         htmlFilter.addRules(\r
 172                 {\r
 173                         elements :\r
 174                         {\r
 175                                 $ : function( element )\r
 176                                 {\r
 177                                         var style, match, width, height, align;\r
 178 \r
 179                                         // Output dimensions of images as width and height\r
 180                                         if ( element.name == 'img' )\r
 181                                         {\r
 182                                                 style = element.attributes.style;\r
 183 \r
 184                                                 if ( style )\r
 185                                                 {\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
 189 \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
 193 \r
 194                                                         if ( width )\r
 195                                                         {\r
 196                                                                 element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );\r
 197                                                                 element.attributes.width = width;\r
 198                                                         }\r
 199 \r
 200                                                         if ( height )\r
 201                                                         {\r
 202                                                                 element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );\r
 203                                                                 element.attributes.height = height;\r
 204                                                         }\r
 205                                                 }\r
 206                                         }\r
 207 \r
 208                                         // Output alignment of paragraphs using align\r
 209                                         if ( element.name == 'p' )\r
 210                                         {\r
 211                                                 style = element.attributes.style;\r
 212 \r
 213                                                 if ( style )\r
 214                                                 {\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
 218 \r
 219                                                         if ( align )\r
 220                                                         {\r
 221                                                                 element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );\r
 222                                                                 element.attributes.align = align;\r
 223                                                         }\r
 224                                                 }\r
 225                                         }\r
 226 \r
 227                                         if ( element.attributes.style == '' )\r
 228                                                 delete element.attributes.style;\r
 229 \r
 230                                         return element;\r
 231                                 }\r
 232                         }\r
 233 \r
 234                 } );\r
 235 }\r
 236 \r
 237                         //]]>\r
 238                         </script>\r
 239                                 <input type="button" value="Send to Flash" onclick="sendToFlash();" />\r
 240                         </td>\r
 241                         <td valign="top" style="padding-left: 15px" id="ckFlashContainer">\r
 242                         </td>\r
 243                 </tr>\r
 244         </table>\r
 245 \r
 246         <div id="footer">\r
 247                 <hr />\r
 248                 <p>\r
 249                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>\r
 250                 </p>\r
 251                 <p id="copy">\r
 252                         Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico\r
 253                         Knabben. All rights reserved.\r
 254                 </p>\r
 255         </div>\r
 256 </body>\r
 257 </html>\r