EditLive! 9 Documentation : optimizingLoadTime.html
Created by Jessica Hardy, last modified by Brett Henderson on Aug 02, 2013
<!--
******************************************************
optimizingLoadTime.html --
EditLive! tutorial to use specific load-time properties
to improve the load time for the editor
Copyright © 2007 Ephox Corporation. All rights reserved.
See license.txt for license agreement
******************************************************
-->
<html>
<head>
<title>Tutorial - Optimizing Load Times</title>
<link rel="stylesheet" href="stylesheet.css">
<!--
Include the EditLive! JavaScript Library
-->
<script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
</head>
<body>
<h1>Instantiating the EditLive! Editor</h1>
<!--
The instance of EditLive!
-->
<script language="JavaScript">
// Create a new EditLive! instance with the name "ELApplet", a height of 400 pixels and a width of 700 pixels.
var editlive = new EditLiveJava("ELApplet", 700, 400);
// This sets a relative or absolute path to the XML configuration file to use
editlive.setConfigurationText(encodeURIComponent("<?xml version=\"1.0\" encoding=\"utf-8\"?><!--This file customizes and configures EditLive!.TIP: this file can be dynamically generated using ASP, JSP or PHP to achieve runtime changes to settings--><editlive> <!-- Default content for the editor --> <document> <html> <!-- Default document header --> <head> <!-- Specify the base URL for the editor to download all relative images and style sheets --> <!--<base href=\"http://www.youserver.com/cms/\" />--> <!-- Specify the character encoding for the editor. By default this should be UTF-8, which will encode all special characters as numeric entities in XHTML or as named entities in HTML --> <!--<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />--> <!-- Uncomment the following line to load an external style sheet for the editor --> <!-- <link rel=\"stylesheet\" href=\"http://www.yourserver.com/style.css\" type=\"text/css\"/> --> <!-- Specify any embedded styles for the editor You can remove or customize the styles below. --> <!-- <style type=\"text/css\"> body { font-family: Verdana, Arial; } h1 { font-family: Tahoma, Arial; font-size: 24pt; font-weight: normal; color: #003366; border-bottom: solid 1px #003366; } p.fineprint{ font-size: 8pt; text-align: center; } span.comment { border: solid 1px #FFFF00; background-color: #FFFFCC; } </style> --> </head> <!-- Default document body. Add content here if you want this to be the default when the editor loads, although this is better done at runtime. --> <body> </body> </html> </document> <!-- Add your Ephox-provided license key here --> <ephoxLicenses> <license accountID=\"BB56B8DD47EF\" activationURL=\"http://www.ephox.com/elregister/el2/activate.asp\" domain=\"LOCALHOST\" expiration=\"NEVER\" forceActive=\"false\" key=\"6FFF-9765-8052-7AA5\" licensee=\"For Evaluation Only\" product=\"EditLive!\" release=\"6.0\" seats=\"\" type=\"Evaluation License\" eqEditor=\"true\" /> </ephoxLicenses> <!-- Specify the location of the spell checker and thesaurus. If no spellcheck or thesaurus jars are specified, the location for these jars is automatically generated based on the specified DownloadDirectory load-time property and the user's locale. --> <!-- <spellCheck jar=\"../../redistributables/editlivejava/dictionaries/en_us_4_0.jar\" useNotModified=\"false\"> </spellCheck> <thesaurus jar=\"../../redistributables/editlivejava/thesaurus/thes_am_6_0.jar\" useNotModified=\"false\"/> --> <!-- Specify HTML filter settings --> <htmlFilter outputXHTML=\"true\" outputXML=\"false\" indentContent=\"false\" logicalEmphasis=\"true\" quoteMarks=\"false\" removeFontTags=\"false\" uppercaseTags=\"false\" uppercaseAttributes=\"false\" wrapLength=\"0\"> </htmlFilter> <!-- Specify settings for the Design (WYSIWYG) view(s) of the editor. Set tabPlacement=\"off\" to disable the tabs. --> <wysiwygEditor tabPlacement=\"bottom\" brOnEnter=\"false\" showDocumentNavigator=\"false\" disableInlineImageResizing=\"false\" disableInlineTableResizing=\"false\" enableTrackChanges=\"false\" > <!-- Define Custom Tags actions --> <!-- <customTags> <doubleClickActions> <action.../> </doubleClickActions> </customTags> --> <!-- Define additional symbols for the symbol dialog here --> <!-- <symbols></symbols> --> </wysiwygEditor> <!-- Specify settings for the Source (code) view of the editor --> <sourceEditor showBodyOnly=\"false\"/> <!-- Specify options for content that EditLive has detected has been pasted from Microsoft Word --> <wordImport styleOption=\"merge_inline_styles\"/> <!-- Specify options for content that EditLive has detected has been pasted from another HTML document --> <htmlImport styleOption=\"merge_inline_styles\"/> <mediaSettings> <!-- Specify HTTP upload settings 'base' is the base URL used to update the 'src' attributes of any local files in the HTML source 'href' is your server-side script for handling multipart-formdata uploads from ELJ The httpUploadData element specifies any additional fields to post with the image data --> <!-- <httpUpload base=\"http://www.yourserver.com/userfiles/\" href=\"http://www.yourserver.com/scripts/upload.jsp\"> <httpUploadData name=\"hello\" data=\"world\"/> </httpUpload> --> <images allowLocalImages=\"true\" allowUserSpecified=\"true\"> <!-- The list of images which appear in the Insert Image dialog. TIP: Dynamically generate this from your database or repository to achieve an easy image library. --> <imageList> <image name=\"Ephox EditLive!\" description=\"Ephox EditLive! Logo\" alt=\"Ephox EditLive! Logo\" src=\"http://www.ephox.com/product/editliveforjava/demos/startcms/images/eljlogo.jpg\" title=\"Ephox EditLive!\" /> <image name=\"iMac\" alt=\"iMac Computer\" description=\"IMac Computer\" title=\"iMac\" border=\"0\" src=\"http://www.ephox.com/product/editliveforjava/demos/startcms/images/newimac.gif\" /> <image name=\"Apple Computer\" alt=\"Apple Computer\" title=\"Apple Computer\" description=\"Picture of a new Apple Computer\" border=\"0\" src=\"http://www.ephox.com/product/editliveforjava/demos/startcms/images/applecomp.jpg\" /> <image name=\"IBM Thinkpad\" alt=\"IBM Thinkpad\" border=\"0\" title=\"IBM Thinkpad\" description=\"Picture of a new IBM Thinkpad\" src=\"http://www.ephox.com/product/editliveforjava/demos/startcms/images/ibm_thinkpad.gif\" /> </imageList> </images> <multimedia> <types> <type name=\"Macromedia Flash\" type=\"application/x-shockwave-flash\" extension=\"swf\" allowCustomParams=\"true\" urlParam=\"movie\"> <param name=\"movie\" /> <param name=\"quality\" /> <param name=\"bgcolor\" /> </type> <type name=\"QuickTime Movie\" type=\"video/quicktime\" extension=\"mov\" allowCustomParams=\"true\"> <param name=\"autohref\" /> <param name=\"autoplay\" /> <param name=\"bgcolor\" /> <param name=\"cache\" /> <param name=\"controller\" /> <param name=\"correction\" /> <param name=\"dontflattenwhensaving\" /> <param name=\"enablejavascript\" /> <param name=\"endtime\" /> <param name=\"fov\" /> <param name=\"height\" /> <param name=\"href\" /> <param name=\"kioskmode\" /> <param name=\"loop\" /> <param name=\"movieid\" /> <param name=\"moviename\" /> <param name=\"node\" /> <param name=\"pan\" /> <param name=\"playeveryframe\" /> <param name=\"qtsrcchokespeed\" /> <param name=\"scale\" /> <param name=\"starttime\" /> <param name=\"target\" /> <param name=\"targetcache\" /> <param name=\"tilt\" /> <param name=\"urlsubstitute\" /> <param name=\"volume\" /> </type> <type name=\"Window Media\" type=\"application/x-mplayer2\" extension=\"asf\" allowCustomParams=\"true\" urlParam=\"fileName\"> <param name=\"animationAtStart\" /> <param name=\"autoStart\" /> <param name=\"showControls\" /> <param name=\"clickToPlay\" /> <param name=\"transparentAtStart\" /> </type> <type name=\"Window Media (Streaming)\" type=\"application/x-mplayer2\" extension=\"asx\" allowCustomParams=\"true\" urlParam=\"fileName\"> <param name=\"animationAtStart\" /> <param name=\"autoStart\" /> <param name=\"showControls\" /> <param name=\"clickToPlay\" /> <param name=\"transparentAtStart\" /> </type> <type name=\"WAV Audio\" type=\"application/x-mplayer2\" extension=\"wav\" allowCustomParams=\"true\" /> <type name=\"MP3 Audio\" type=\"application/x-mplayer2\" extension=\"mp3\" allowCustomParams=\"true\" /> <type name=\"AVI\" type=\"application/x-mplayer2\" extension=\"avi\" allowCustomParams=\"true\" /> </types> </multimedia> </mediaSettings> <hyperlinks> <hyperlinkList> <hyperlink href=\"http://www.ephox.com\" description=\"Ephox Web site\" /> <hyperlink href=\"http://www.apple.com\" description=\"Apple Computer Web site\" /> <hyperlink href=\"http://www.sun.com\" description=\"Sun Microsystems Web site\" /> </hyperlinkList> <mailtoList> <mailtolink href=\"mailto:info@ephox.com\" description=\"Ephox information\" /> </mailtoList> </hyperlinks> <!-- Customize the EditLive! menus Note: you must display some sort of Ephox copyright statement within your application, only remove the About menu (by setting showAboutMenu=\"false\") if you have correctly attributed Ephox's copyright in the appropriate place(s) within your application. --> <menuBar showAboutMenu=\"true\"> <menu name=\"ephox_filemenu\"> <menuItem name=\"New\"/> <menuItem name=\"Open\"/> <menuSeparator/> <menuItem name=\"Save\"/> <menuItem name=\"SaveAs\"/> <menuSeparator/> <menuItem name=\"Print\"/> </menu> <menu name=\"ephox_editmenu\"> <menuItem name=\"Undo\"/> <menuItem name=\"Redo\"/> <menuSeparator/> <menuItem name=\"Cut\"/> <menuItem name=\"Copy\"/> <menuItem name=\"Paste\"/> <menuItem name=\"PasteSpecial\"/> <menuSeparator/> <menuItem name=\"Select\"/> <menuItem name=\"SelectAll\"/> <menuSeparator/> <menuItem name=\"Find\"/> <menuSeparator/> </menu> <menu name=\"ephox_viewmenu\"> <menuItemGroup name=\"SourceView\"/> <menuSeparator/> <menuItem name=\"Popout\"/> <menuSeparator/> <menuItem name=\"showDocumentNavigator\"/> <menuSeparator/> <menuItem name=\"ParagraphMarker\"/> </menu> <menu name=\"ephox_insertmenu\"> <menuItem name=\"HLink\"/> <menuItem name=\"Bookmark\"/> <menuItem name=\"RemoveHyperlink\" /> <menuSeparator/> <menuItem name=\"ImageServer\"/> <menuItem name=\"InsertObject\"/> <menuSeparator/> <menuItem name=\"Symbol\"/> <menuItem name=\"HRule\"/> <menuSeparator/> <menuItem name=\"DateTime\"/> <menuSeparator/> <menuItem name=\"insertcomment\"/> </menu> <menu name=\"ephox_formatmenu\"> <submenu name=\"Style\"/> <submenu name=\"Face\"/> <submenu name=\"Size\"/> <menuSeparator/> <menuItem name=\"Bold\"/> <menuItem name=\"Italic\"/> <menuItem name=\"Underline\"/> <menuSeparator/> <menuItemGroup name=\"Align\"/> <menuSeparator/> <menuItemGroup name=\"List\"/> <menuItem name=\"DecreaseIndent\"/> <menuItem name=\"IncreaseIndent\"/> <menuItem name=\"PropList\"/> <menuSeparator/> <menuItemGroup name=\"Script\"/> <menuItem name=\"Strike\"/> <menuSeparator/> <menuItem name=\"RemoveFormatting\"/> <menuItem name=\"FormatPainter\"/> </menu> <menu name=\"ephox_toolsmenu\"> <menuItem name=\"Spelling\"/> <menuItem name=\"BackgroundSpellChecking\"/> <menuItem name=\"thesaurus\"/> <menuSeparator/> <menuItem name=\"Accessibility\"/> <menuSeparator/> <menuItem name=\"WordCount\"/> </menu> <menu name=\"ephox_tablemenu\"> <menuItem name=\"InsTable\"/> <menuItem name=\"InsRowCol\"/> <menuSeparator/> <menuItem name=\"DelRow\"/> <menuItem name=\"DelCol\"/> <menuSeparator/> <menuItem name=\"Split\"/> <menuItem name=\"Merge\"/> <menuItem name=\"tableautofit\"/> <menuSeparator/> <menuItem name=\"PropCell\"/> <menuItem name=\"PropRow\"/> <menuItem name=\"PropCol\"/> <menuItem name=\"PropTable\"/> <menuSeparator/> <menuItem name=\"Gridlines\"/> </menu> <menu name=\"ephox_formmenu\"> <menuItem name=\"InsForm\"/> <menuSeparator/> <menuItem name=\"InsTextField\"/> <menuItem name=\"InsPasswordField\"/> <menuItem name=\"InsHiddenField\"/> <menuItem name=\"InsFileField\"/> <menuItem name=\"InsButtonField\"/> <menuItem name=\"InsSubmitField\"/> <menuItem name=\"InsResetField\"/> <menuItem name=\"InsCheckboxField\"/> <menuItem name=\"InsRadioField\"/> <menuItem name=\"InsTextAreaField\"/> <menuItem name=\"InsSelectField\"/> <menuItem name=\"InsImageField\"/> </menu> <menu name=\"ephox_trackchangesmenu\"> <menuItem name=\"enabletrackchanges\" /> <menuSeparator /> <menuItem name=\"acceptChange\" /> <menuItem name=\"rejectChange\" /> <menuSeparator /> <menuItem name=\"previousChange\" /> <menuItem name=\"nextChange\" /> <menuSeparator /> <menuItem name=\"acceptAllChanges\" /> <menuItem name=\"rejectAllChanges\" /> <menuSeparator /> <menuItem name=\"showTrackChangesDialog\" /> <menuSeparator /> <menuItem name=\"setUsername\" /> </menu> </menuBar> <!-- Customize the EditLive! toolbars --> <toolbars> <toolbar name=\"Command\"> <toolbarButton name=\"Print\"/> <toolbarSeparator/> <toolbarButton name=\"Spelling\"/> <toolbarButton name=\"Find\"/> <toolbarSeparator/> <toolbarButton name=\"Cut\"/> <toolbarButton name=\"Copy\"/> <toolbarButton name=\"Paste\"/> <toolbarButton name=\"FormatPainter\" /> <toolbarSeparator/> <toolbarButton name=\"Undo\"/> <toolbarButton name=\"Redo\"/> <toolbarSeparator/> <toolbarButton name=\"HLink\"/> <toolbarButton name=\"ImageServer\"/> <toolbarButton name=\"insertequation\"/> <toolbarSeparator/> <toolbarButton name=\"InsTableWizard\"/> <toolbarButton name=\"InsRow\"/> <toolbarButton name=\"InsCol\"/> <toolbarButton name=\"DelRow\"/> <toolbarButton name=\"DelCol\"/> <toolbarSeparator/> <toolbarButton name=\"enableTrackChanges\"/> <toolbarButton name=\"acceptChange\"/> <toolbarButton name=\"rejectchange\"/> <toolbarButton name=\"previouschange\"/> <toolbarButton name=\"nextchange\"/> <toolbarSeparator/> <toolbarButton name=\"ParagraphMarker\"/> <toolbarSeparator/> <toolbarButton name=\"Popout\"/> </toolbar> <toolbar name=\"Format\"> <!-- Styles from any embeddedd or external stylesheets will also be automatically added to the Styles drop-down --> <toolbarComboBox name=\"Style\"> <comboBoxItem name=\"P\"/> <comboBoxItem name=\"H1\"/> <comboBoxItem name=\"H2\"/> <comboBoxItem name=\"H3\"/> <comboBoxItem name=\"H4\"/> <comboBoxItem name=\"H5\"/> <comboBoxItem name=\"H6\"/> </toolbarComboBox> <!-- You can remove the Font drop-down if you just want users to use Styles. The following fonts are part of the Microsoft Core Web Fonts and are available on at least Mac OS X and Windows To change the default font, change the embedded style sheet in the 'style' element above. --> <toolbarComboBox name=\"Face\"> <comboBoxItem name=\"Arial\" text=\"Arial\"/> <comboBoxItem name=\"Arial Black\" text=\"Arial Black\"/> <comboBoxItem name=\"Arial Narrow\" text=\"Arial Narrow\"/> <comboBoxItem name=\"Comic Sans MS\" text=\"Comic Sans MS\"/> <comboBoxItem name=\"Courier New\" text=\"Courier New\"/> <comboBoxItem name=\"Georgia\" text=\"Georgia\"/> <comboBoxItem name=\"Impact\" text=\"Impact\"/> <comboBoxItem name=\"Times New Roman\" text=\"Times New Roman\"/> <comboBoxItem name=\"Trebuchet MS\" text=\"Trebuchet MS\"/> <comboBoxItem name=\"Verdana\" text=\"Verdana\"/> </toolbarComboBox> <!-- Font Size drop-down --> <toolbarComboBox name=\"Size\"> <comboBoxItem name=\"1\" text=\"8pt\"/> <comboBoxItem name=\"2\" text=\"10pt\"/> <comboBoxItem name=\"3\" text=\"12pt\"/> <comboBoxItem name=\"4\" text=\"14pt\"/> <comboBoxItem name=\"5\" text=\"18pt\"/> <comboBoxItem name=\"6\" text=\"24pt\"/> <comboBoxItem name=\"7\" text=\"36pt\"/> </toolbarComboBox> <toolbarSeparator/> <toolbarButton name=\"Bold\"/> <toolbarButton name=\"Italic\"/> <toolbarButton name=\"Underline\"/> <toolbarSeparator/> <toolbarButtonGroup name=\"Align\"/> <toolbarSeparator/> <toolbarButtonGroup name=\"List\"/> <toolbarButton name=\"DecreaseIndent\"/> <toolbarButton name=\"IncreaseIndent\"/> <toolbarSeparator/> <toolbarButton name=\"HighlightColor\"/> <toolbarButton name=\"Color\"/> </toolbar> </toolbars> <!-- Customize the EditLive! shortcut menu --> <shortcutMenu> <shrtMenu> <shrtMenuItem name=\"Undo\"/> <shrtMenuItem name=\"Redo\"/> <shrtMenuSeparator/> <shrtMenuItem name=\"Cut\"/> <shrtMenuItem name=\"Copy\"/> <shrtMenuItem name=\"Paste\"/> <shrtMenuSeparator/> <shrtMenuItem name=\"Select\"/> <shrtMenuSeparator/> <shrtMenuItem name=\"acceptChange\"/> <shrtMenuItem name=\"rejectChange\"/> <shrtMenuItem name=\"nextchange\"/> <shrtMenuItem name=\"previouschange\"/> <shrtMenuSeparator/> <shrtMenuItem name=\"Hyperlink\"/> <shrtMenuItem name=\"RemoveHyperlink\"/> <shrtMenuItem name=\"PropImage\"/> <shrtMenuItem name=\"PropObject\"/> <shrtMenuItem name=\"PropList\"/> <shrtMenuItem name=\"PropHR\"/> <shrtMenuSeparator/> <shrtMenuItem name=\"Split\"/> <shrtMenuItem name=\"Merge\"/> <shrtMenuItem name=\"tableautofit\"/> <shrtMenuSeparator/> <shrtMenuItem name=\"PropTable\"/> <shrtMenuItem name=\"PropRow\"/> <shrtMenuItem name=\"PropCol\"/> <shrtMenuItem name=\"PropCell\"/> <shrtMenuSeparator/> <shrtMenuItem name=\"synonyms\"/> <shrtMenuItem name=\"EditTag\"/> </shrtMenu> </shortcutMenu></editlive>"));
editlive.setPreload(function() {
alert("EditLive! has finished loading.");
});
// .show is the final call and instructs the JavaScript library (editlivejava.js) to insert a new EditLive! instance
// at the this location.
editlive.show();
</script>
</body>
</html>