+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
-<!--\r
-Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.\r
-For licensing, see LICENSE.html or http://ckeditor.com/license\r
--->\r
-<html xmlns="http://www.w3.org/1999/xhtml">\r
-<head>\r
- <title>Output for Flash — CKEditor Sample</title>\r
- <meta content="text/html; charset=utf-8" http-equiv="content-type" />\r
- <script type="text/javascript" src="../ckeditor.js"></script>\r
- <script src="sample.js" type="text/javascript"></script>\r
- <link href="sample.css" rel="stylesheet" type="text/css" />\r
- <script type="text/javascript" src="assets/swfobject.js"></script>\r
- <script type="text/javascript">\r
-function sendToFlash()\r
-{\r
- var html = CKEDITOR.instances.editor1.getData() ;\r
- var flash = document.getElementById( 'ckFlash' ) ;\r
- flash.setData( html ) ;\r
-}\r
-\r
-function init()\r
-{\r
- var so = new SWFObject("assets/output_for_flash.swf", "ckFlash", "550", "400", "8", "#ffffff") ;\r
- so.addParam("wmode", "transparent");\r
- so.write("ckFlashContainer") ;\r
-}\r
- </script>\r
- </head>\r
-<body onload="init()">\r
- <h1 class="samples">\r
- CKEditor Sample — Producing Flash Compliant HTML Output\r
- </h1>\r
- <div class="description">\r
- <p>\r
- This sample shows how to configure CKEditor to output\r
- HTML code that can be used with\r
- <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">\r
- Adobe Flash</a>.\r
- The code will contain a subset of standard HTML elements like <code><b></code>,\r
- <code><i></code>, and <code><p></code> as well as HTML attributes.\r
- </p>\r
- <p>\r
- To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard\r
- JavaScript call, and define CKEditor features to use HTML elements and attributes.\r
- </p>\r
- <p>\r
- For details on how to create this setup check the source code of this sample page.\r
- </p>\r
- </div>\r
- <p>\r
- To see how it works, create some content in the editing area of CKEditor on the left\r
- and send it to the Flash object on the right side of the page by using the\r
- <strong>Send to Flash</strong> button.\r
- </p>\r
-\r
- <!-- This <div> holds alert messages to be display in the sample page. -->\r
- <div id="alerts">\r
- <noscript>\r
- <p>\r
- <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript\r
- support, like yours, you should still see the contents (HTML data) and you should\r
- be able to edit it normally, without a rich editor interface.\r
- </p>\r
- </noscript>\r
- </div>\r
- <hr />\r
- <table width="100%" cellpadding="0" cellspacing="0">\r
- <tr>\r
- <td style="width: 100%">\r
- <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>\r
- <script type="text/javascript">\r
- //<![CDATA[\r
-\r
- if ( document.location.protocol == 'file:' )\r
- alert( 'Warning: This samples does not work when loaded from local filesystem due to security restrictions implemented in Flash.' +\r
- '\n\nPlease load the sample from a web server instead.') ;\r
-\r
- CKEDITOR.replace( 'editor1',\r
- {\r
- height : 300,\r
- width : '100%',\r
- toolbar : [\r
- ['Source','-','Bold','Italic','Underline','-','BulletedList','-','Link','Unlink'],\r
- ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],\r
- '/',\r
- ['Font','FontSize'],\r
- ['TextColor','-','About']\r
- ],\r
-\r
- /*\r
- * Style sheet for the contents\r
- */\r
- contentsCss : 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',\r
-\r
- /*\r
- * Quirks doctype\r
- */\r
- docType : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',\r
-\r
- /*\r
- * Core styles.\r
- */\r
- coreStyles_bold : { element : 'b' },\r
- coreStyles_italic : { element : 'i' },\r
- coreStyles_underline : { element : 'u'},\r
-\r
- /*\r
- * Font face\r
- */\r
- // Define the way font elements will be applied to the document. The "font"\r
- // element will be used.\r
- font_style :\r
- {\r
- element : 'font',\r
- attributes : { 'face' : '#(family)' }\r
- },\r
-\r
- /*\r
- * Font sizes.\r
- * The CSS part of the font sizes isn't used by Flash, it is there to get the\r
- * font rendered correctly in CKEditor.\r
- */\r
- 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',\r
- fontSize_style :\r
- {\r
- element : 'font',\r
- attributes : { 'size' : '#(size)' },\r
- styles : { 'font-size' : '#(size)px' }\r
- } ,\r
-\r
- /*\r
- * Font colors.\r
- */\r
- colorButton_enableMore : true,\r
-\r
- colorButton_foreStyle :\r
- {\r
- element : 'font',\r
- attributes : { 'color' : '#(color)' }\r
- },\r
-\r
- colorButton_backStyle :\r
- {\r
- element : 'font',\r
- styles : { 'background-color' : '#(color)' }\r
- },\r
-\r
-\r
- on : { 'instanceReady' : configureFlashOutput }\r
- });\r
-\r
-/*\r
- * Adjust the behavior of the dataProcessor to match the\r
- * requirements of Flash\r
- */\r
-function configureFlashOutput( ev )\r
-{\r
- var editor = ev.editor,\r
- dataProcessor = editor.dataProcessor,\r
- htmlFilter = dataProcessor && dataProcessor.htmlFilter;\r
-\r
- // Out self closing tags the HTML4 way, like <br>.\r
- dataProcessor.writer.selfClosingEnd = '>';\r
-\r
- // Make output formatting match Flash expectations\r
- var dtd = CKEDITOR.dtd;\r
- for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )\r
- {\r
- dataProcessor.writer.setRules( e,\r
- {\r
- indent : false,\r
- breakBeforeOpen : false,\r
- breakAfterOpen : false,\r
- breakBeforeClose : false,\r
- breakAfterClose : false\r
- });\r
- }\r
- dataProcessor.writer.setRules( 'br',\r
- {\r
- indent : false,\r
- breakBeforeOpen : false,\r
- breakAfterOpen : false,\r
- breakBeforeClose : false,\r
- breakAfterClose : false\r
- });\r
-\r
- // Output properties as attributes, not styles.\r
- htmlFilter.addRules(\r
- {\r
- elements :\r
- {\r
- $ : function( element )\r
- {\r
- var style, match, width, height, align;\r
-\r
- // Output dimensions of images as width and height\r
- if ( element.name == 'img' )\r
- {\r
- style = element.attributes.style;\r
-\r
- if ( style )\r
- {\r
- // Get the width from the style.\r
- match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style );\r
- width = match && match[1];\r
-\r
- // Get the height from the style.\r
- match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );\r
- height = match && match[1];\r
-\r
- if ( width )\r
- {\r
- element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );\r
- element.attributes.width = width;\r
- }\r
-\r
- if ( height )\r
- {\r
- element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );\r
- element.attributes.height = height;\r
- }\r
- }\r
- }\r
-\r
- // Output alignment of paragraphs using align\r
- if ( element.name == 'p' )\r
- {\r
- style = element.attributes.style;\r
-\r
- if ( style )\r
- {\r
- // Get the align from the style.\r
- match = /(?:^|\s)text-align\s*:\s*(\w*);?/i.exec( style );\r
- align = match && match[1];\r
-\r
- if ( align )\r
- {\r
- element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );\r
- element.attributes.align = align;\r
- }\r
- }\r
- }\r
-\r
- if ( element.attributes.style === '' )\r
- delete element.attributes.style;\r
-\r
- return element;\r
- }\r
- }\r
-\r
- } );\r
-}\r
-\r
- //]]>\r
- </script>\r
- <input type="button" value="Send to Flash" onclick="sendToFlash();" />\r
- </td>\r
- <td valign="top" style="padding-left: 15px" id="ckFlashContainer">\r
- </td>\r
- </tr>\r
- </table>\r
-\r
- <div id="footer">\r
- <hr />\r
- <p>\r
- CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
- </p>\r
- <p id="copy">\r
- Copyright © 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
- Knabben. All rights reserved.\r
- </p>\r
- </div>\r
-</body>\r
-</html>\r
Got questions, comments, patches, etc.? Contact Jason Woofenden