crossreference-demo: ckeditor/samples/old/htmlwriter/outputforflash.html@44d330dccc59

     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>

    20 		.alert

    21 		{

    22 			background: #ffa84c;

    23 			padding: 10px 15px;

    24 			font-weight: bold;

    25 			display: block;

    26 			margin-bottom: 20px;

    27 		}

    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>

    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.' );

    71 					var editor = CKEDITOR.replace( 'editor1', {

    72 						/*

    73 						 * Ensure that htmlwriter plugin, which is required for this sample, is loaded.

    74 						 */

    75 						extraPlugins: 'htmlwriter',

    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 						],

    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;}',

    92 						/*

    93 						 * Quirks doctype

    94 						 */

    95 						docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',

    97 						/*

    98 						 * Core styles.

    99 						 */

   100 						coreStyles_bold: { element: 'b' },

   101 						coreStyles_italic: { element: 'i' },

   102 						coreStyles_underline: { element: 'u' },

   104 						/*

   105 						 * Font face.

   106 						 */

   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 						},

   115 						/*

   116 						 * Font sizes.

   117 						 */

   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 						} ,

   128 						/*

   129 						 * Font colors.

   130 						 */

   131 						colorButton_enableMore: true,

   133 						colorButton_foreStyle: {

   134 							element: 'font',

   135 							attributes: { 'color': '#(color)' }

   136 						},

   138 						colorButton_backStyle: {

   139 							element: 'font',

   140 							styles: { 'background-color': '#(color)' }

   141 						},

   143 						on: { 'instanceReady': configureFlashOutput }

   144 					});

   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;

   155 						// Out self closing tags the HTML4 way, like <br>.

   156 						dataProcessor.writer.selfClosingEnd = '>';

   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 						});

   177 						// Output properties as attributes, not styles.

   178 						htmlFilter.addRules( {

   179 							elements: {

   180 								$: function( element ) {

   181 									var style, match, width, height, align;

   183 									// Output dimensions of images as width and height

   184 									if ( element.name == 'img' ) {

   185 										style = element.attributes.style;

   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];

   192 											// Get the height from the style.

   193 											match = ( /(?:^|\s)height\s*:\s*(\d+)px/i ).exec( style );

   194 											height = match && match[1];

   196 											if ( width ) {

   197 												element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );

   198 												element.attributes.width = width;

   199 											}

   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 									}

   208 									// Output alignment of paragraphs using align

   209 									if ( element.name == 'p' ) {

   210 										style = element.attributes.style;

   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];

   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 									}

   224 									if ( element.attributes.style === '' )

   225 										delete element.attributes.style;

   227 									return element;

   228 								}

   229 							}

   230 						});

   231 					}

   233 					function sendToFlash() {

   234 						var html = CKEDITOR.instances.editor1.getData() ;

   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>' )

   240 						var flash = document.getElementById( 'ckFlashContainer' ) ;

   241 						flash.setData( html ) ;

   242 					}

   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 						}

   252 						swfobject.embedSWF(

   253 							'assets/outputforflash/outputforflash.swf',

   254 							'ckFlashContainer',

   255 							'550',

   256 							'400',

   257 							'8',

   258 							{ wmode: 'transparent' }

   259 						);

   260 					});

   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>

author	indvd00m (gotoindvdum[at]gmail[dot]com)
	Thu, 15 Dec 2016 18:10:20 +0300
changeset 0	44d330dccc59
permissions	-rw-r--r--