release/samples/old/htmlwriter/outputforflash.html

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