1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/ckeditor/samples/old/htmlwriter/outputforflash.html Thu Dec 15 18:10:20 2016 +0300
1.3 @@ -0,0 +1,283 @@
1.4 +<!DOCTYPE html>
1.5 +<!--
1.6 +Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
1.7 +For licensing, see LICENSE.md or http://ckeditor.com/license
1.8 +-->
1.9 +<html>
1.10 +<head>
1.11 + <meta charset="utf-8">
1.12 + <title>Output for Flash — CKEditor Sample</title>
1.13 + <script src="../../../ckeditor.js"></script>
1.14 + <script src="../../../samples/old/sample.js"></script>
1.15 + <script src="assets/outputforflash/swfobject.js"></script>
1.16 + <link href="../../../samples/old/sample.css" rel="stylesheet">
1.17 + <meta name="ckeditor-sample-required-plugins" content="sourcearea">
1.18 + <meta name="ckeditor-sample-name" content="Output for Flash">
1.19 + <meta name="ckeditor-sample-group" content="Advanced Samples">
1.20 + <meta name="ckeditor-sample-description" content="Configuring CKEditor to produce HTML code that can be used with Adobe Flash.">
1.21 + <style>
1.22 +
1.23 + .alert
1.24 + {
1.25 + background: #ffa84c;
1.26 + padding: 10px 15px;
1.27 + font-weight: bold;
1.28 + display: block;
1.29 + margin-bottom: 20px;
1.30 + }
1.31 +
1.32 + </style>
1.33 +</head>
1.34 +<body>
1.35 + <h1 class="samples">
1.36 + <a href="../../../samples/old/index.html">CKEditor Samples</a> » Producing Flash Compliant HTML Output
1.37 + </h1>
1.38 + <div class="warning deprecated">
1.39 + This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.
1.40 + </div>
1.41 + <div class="description">
1.42 + <p>
1.43 + This sample shows how to configure CKEditor to output
1.44 + HTML code that can be used with
1.45 + <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">
1.46 + Adobe Flash</a>.
1.47 + The code will contain a subset of standard HTML elements like <code><b></code>,
1.48 + <code><i></code>, and <code><p></code> as well as HTML attributes.
1.49 + </p>
1.50 + <p>
1.51 + To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard
1.52 + JavaScript call, and define CKEditor features to use HTML elements and attributes.
1.53 + </p>
1.54 + <p>
1.55 + For details on how to create this setup check the source code of this sample page.
1.56 + </p>
1.57 + </div>
1.58 + <p>
1.59 + To see how it works, create some content in the editing area of CKEditor on the left
1.60 + and send it to the Flash object on the right side of the page by using the
1.61 + <strong>Send to Flash</strong> button.
1.62 + </p>
1.63 + <table style="width: 100%; border-spacing: 0; border-collapse:collapse;">
1.64 + <tr>
1.65 + <td style="width: 100%">
1.66 + <textarea cols="80" id="editor1" name="editor1" rows="10"><p><b><font size="18" style="font-size:18px;">Flash and HTML</font></b></p><p>&nbsp;</p><p>It is possible to have <a href="http://ckeditor.com">CKEditor</a> creating content that will be later loaded inside <b>Flash</b> objects and animations.</p><p>&nbsp;</p><p>Flash has a few limitations when dealing with HTML:</p><p>&nbsp;</p><ul><li>It has limited support on tags.</li><li>There is no margin between block elements, like paragraphs.</li></ul></textarea>
1.67 + <script>
1.68 +
1.69 + if ( document.location.protocol == 'file:' )
1.70 + alert( 'Warning: This samples does not work when loaded from local filesystem' +
1.71 + 'due to security restrictions implemented in Flash.' +
1.72 + '\n\nPlease load the sample from a web server instead.' );
1.73 +
1.74 + var editor = CKEDITOR.replace( 'editor1', {
1.75 + /*
1.76 + * Ensure that htmlwriter plugin, which is required for this sample, is loaded.
1.77 + */
1.78 + extraPlugins: 'htmlwriter',
1.79 +
1.80 + height: 290,
1.81 + width: '100%',
1.82 + toolbar: [
1.83 + [ 'Source', '-', 'Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink' ],
1.84 + [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
1.85 + '/',
1.86 + [ 'Font', 'FontSize' ],
1.87 + [ 'TextColor', '-', 'About' ]
1.88 + ],
1.89 +
1.90 + /*
1.91 + * Style sheet for the contents
1.92 + */
1.93 + contentsCss: 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',
1.94 +
1.95 + /*
1.96 + * Quirks doctype
1.97 + */
1.98 + docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
1.99 +
1.100 + /*
1.101 + * Core styles.
1.102 + */
1.103 + coreStyles_bold: { element: 'b' },
1.104 + coreStyles_italic: { element: 'i' },
1.105 + coreStyles_underline: { element: 'u' },
1.106 +
1.107 + /*
1.108 + * Font face.
1.109 + */
1.110 +
1.111 + // Define the way font elements will be applied to the document. The "font"
1.112 + // element will be used.
1.113 + font_style: {
1.114 + element: 'font',
1.115 + attributes: { 'face': '#(family)' }
1.116 + },
1.117 +
1.118 + /*
1.119 + * Font sizes.
1.120 + */
1.121 +
1.122 + // The CSS part of the font sizes isn't used by Flash, it is there to get the
1.123 + // font rendered correctly in CKEditor.
1.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',
1.125 + fontSize_style: {
1.126 + element: 'font',
1.127 + attributes: { 'size': '#(size)' },
1.128 + styles: { 'font-size': '#(size)px' }
1.129 + } ,
1.130 +
1.131 + /*
1.132 + * Font colors.
1.133 + */
1.134 + colorButton_enableMore: true,
1.135 +
1.136 + colorButton_foreStyle: {
1.137 + element: 'font',
1.138 + attributes: { 'color': '#(color)' }
1.139 + },
1.140 +
1.141 + colorButton_backStyle: {
1.142 + element: 'font',
1.143 + styles: { 'background-color': '#(color)' }
1.144 + },
1.145 +
1.146 + on: { 'instanceReady': configureFlashOutput }
1.147 + });
1.148 +
1.149 + /*
1.150 + * Adjust the behavior of the dataProcessor to match the
1.151 + * requirements of Flash
1.152 + */
1.153 + function configureFlashOutput( ev ) {
1.154 + var editor = ev.editor,
1.155 + dataProcessor = editor.dataProcessor,
1.156 + htmlFilter = dataProcessor && dataProcessor.htmlFilter;
1.157 +
1.158 + // Out self closing tags the HTML4 way, like <br>.
1.159 + dataProcessor.writer.selfClosingEnd = '>';
1.160 +
1.161 + // Make output formatting match Flash expectations
1.162 + var dtd = CKEDITOR.dtd;
1.163 + for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
1.164 + dataProcessor.writer.setRules( e, {
1.165 + indent: false,
1.166 + breakBeforeOpen: false,
1.167 + breakAfterOpen: false,
1.168 + breakBeforeClose: false,
1.169 + breakAfterClose: false
1.170 + });
1.171 + }
1.172 + dataProcessor.writer.setRules( 'br', {
1.173 + indent: false,
1.174 + breakBeforeOpen: false,
1.175 + breakAfterOpen: false,
1.176 + breakBeforeClose: false,
1.177 + breakAfterClose: false
1.178 + });
1.179 +
1.180 + // Output properties as attributes, not styles.
1.181 + htmlFilter.addRules( {
1.182 + elements: {
1.183 + $: function( element ) {
1.184 + var style, match, width, height, align;
1.185 +
1.186 + // Output dimensions of images as width and height
1.187 + if ( element.name == 'img' ) {
1.188 + style = element.attributes.style;
1.189 +
1.190 + if ( style ) {
1.191 + // Get the width from the style.
1.192 + match = ( /(?:^|\s)width\s*:\s*(\d+)px/i ).exec( style );
1.193 + width = match && match[1];
1.194 +
1.195 + // Get the height from the style.
1.196 + match = ( /(?:^|\s)height\s*:\s*(\d+)px/i ).exec( style );
1.197 + height = match && match[1];
1.198 +
1.199 + if ( width ) {
1.200 + element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
1.201 + element.attributes.width = width;
1.202 + }
1.203 +
1.204 + if ( height ) {
1.205 + element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
1.206 + element.attributes.height = height;
1.207 + }
1.208 + }
1.209 + }
1.210 +
1.211 + // Output alignment of paragraphs using align
1.212 + if ( element.name == 'p' ) {
1.213 + style = element.attributes.style;
1.214 +
1.215 + if ( style ) {
1.216 + // Get the align from the style.
1.217 + match = ( /(?:^|\s)text-align\s*:\s*(\w*);?/i ).exec( style );
1.218 + align = match && match[1];
1.219 +
1.220 + if ( align ) {
1.221 + element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
1.222 + element.attributes.align = align;
1.223 + }
1.224 + }
1.225 + }
1.226 +
1.227 + if ( element.attributes.style === '' )
1.228 + delete element.attributes.style;
1.229 +
1.230 + return element;
1.231 + }
1.232 + }
1.233 + });
1.234 + }
1.235 +
1.236 + function sendToFlash() {
1.237 + var html = CKEDITOR.instances.editor1.getData() ;
1.238 +
1.239 + // Quick fix for link color.
1.240 + html = html.replace( /<a /g, '<font color="#0000FF"><u><a ' )
1.241 + html = html.replace( /<\/a>/g, '</a></u></font>' )
1.242 +
1.243 + var flash = document.getElementById( 'ckFlashContainer' ) ;
1.244 + flash.setData( html ) ;
1.245 + }
1.246 +
1.247 + CKEDITOR.domReady( function() {
1.248 + if ( !swfobject.hasFlashPlayerVersion( '8' ) ) {
1.249 + CKEDITOR.dom.element.createFromHtml( '<span class="alert">' +
1.250 + 'At least Adobe Flash Player 8 is required to run this sample. ' +
1.251 + 'You can download it from <a href="http://get.adobe.com/flashplayer">Adobe\'s website</a>.' +
1.252 + '</span>' ).insertBefore( editor.element );
1.253 + }
1.254 +
1.255 + swfobject.embedSWF(
1.256 + 'assets/outputforflash/outputforflash.swf',
1.257 + 'ckFlashContainer',
1.258 + '550',
1.259 + '400',
1.260 + '8',
1.261 + { wmode: 'transparent' }
1.262 + );
1.263 + });
1.264 +
1.265 + </script>
1.266 + <p>
1.267 + <input type="button" value="Send to Flash" onclick="sendToFlash();">
1.268 + </p>
1.269 + </td>
1.270 + <td style="vertical-align: top; padding-left: 20px">
1.271 + <div id="ckFlashContainer"></div>
1.272 + </td>
1.273 + </tr>
1.274 + </table>
1.275 + <div id="footer">
1.276 + <hr>
1.277 + <p>
1.278 + CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
1.279 + </p>
1.280 + <p id="copy">
1.281 + Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
1.282 + Knabben. All rights reserved.
1.283 + </p>
1.284 + </div>
1.285 +</body>
1.286 +</html>