| 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 — 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 — 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&file=00000922.html">
|
|---|
| 39 | Adobe Flash</a>.
|
|---|
| 40 | The code will contain a subset of standard HTML elements like <code><b></code>,
|
|---|
| 41 | <code><i></code>, and <code><p></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"><p>This is some <b>sample text</b>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></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 © 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>
|
|---|
