skins/ckeditor/samples/plugins/htmlwriter/outputforflash.html

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