7. Installation:
The installation is quite simple. All
the classes needed are contained within the HTMLEditor.jar and if
the Java Plug-in 1.3 / 1.4/ 1.5/ 1.6 / 1.7/1.8 is installed you will be able to see the
applet opening the page which contains it. To include it within a
page you have to include the following code inside the page.
To use the embedded mode the class
to be started is sferyx.administration.editors.HTMLEditor
<applet code=sferyx.administration.editors.HTMLEditor archive=HTMLEditor.jar
width=800 height=600>
</applet>
To use the external window mode
the class to be started is sferyx.administration.editors.HTMLEditorFrame.
Inside the calling page will appear only one button for the invocation
of the editor, thus the dimensions of the applet can be reduced to
150 x 30 or something similar
<applet code=sferyx.administration.editors.HTMLEditorFrame
archive=HTMLEditor.jar width=150 height=30>
</applet>
In generally this code is sufficient
to achieve the desired result, thought sometimes there could be problems
with the browser using its embedded java environment instead of the
Java Plug-in 1.4.x. In this cases it would be necessary to use the
following code which is also included into the demo and the example
files:
For Internet Explorer:
<OBJECT classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
WIDTH = "800" HEIGHT = "600" NAME = "htmleditor"
codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4-win.cab#Version=1,4,0,0">
<PARAM NAME = CODE VALUE = "sferyx.administration.editors.HTMLEditor">
<PARAM NAME = ARCHIVE VALUE = "HTMLEditorAppletPro.jar">
<PARAM NAME = NAME VALUE = "htmleditor">
<PARAM NAME="type" VALUE="application/x-java-applet;version=1.4">
<PARAM NAME="scriptable" VALUE="true">
<COMMENT>
</COMMENT>
</OBJECT>
Consult the html source
of the demo included for major details on the inclusion of the applet
within web pages.
8. Applet
Parameters
<PARAM NAME = "saveURL" VALUE="http://yourhost.com/your_script">
- Specifies the URL of the script
which will receive the content of the HTMLEditor when the user presses
the "Save remote" button on the File menu. It will do nothing
if this variable is not specified. It sends all the content of the
editor using the POST method.
<PARAM NAME = "variableName" VALUE="html_content">
html_content
<PARAM NAME = "parametersToSend" VALUE="Var1=1&Var2=2">
- Specifies any additional variables
to be sent along the content of the editor if your server-side script
may need any.
<PARAM NAME="addJavascriptButtons" VALUE="shortcutToolbar,helloFromJavascript(),null,Hello
there|shortcutToolbar,helloFromJavascript2(),null,Hello here"> - Using
this parameter can be added multiple javascript buttons using the
delimiter "|" for the buttons and "," for the button parameters. See
addJavascriptButtons() javascript function for parameter details.
(Enterprise Edition Only)
<PARAM NAME = "sourceCodeModeOnly" VALUE="true|false">
- Specifies whether the editor
should run only in source code editor mode or not. If true, the editor
will display only the HTML source code editor with syntax highlighting.
<PARAM NAME = "wrapNewLineIntoBR"
VALUE="true|false"> -
Specifies whether the Enter key should generate new paragraph or a
line break. The default value is false and pressing the Enter key
new paragraph is generated. The default key assignments are as follows:
If wrapNewLineIntoBR
is set to true then the Enter
will generate line break <br> and for new paragraphs
should be used Ctrl + Enter
<PARAM NAME ="absoluteDocumentTranslationURL"
VALUE="http://yourhost/your_htmlfiles/"> -
Specifies the translation path to be used to resolve the relative
URLs of images, hyperlinks etc, if the content of the editor is set
using javascript and the editor resides in a different directory than
the one in which the edited documents are located. If this parameter
is missing or not specified correctly some images may not be visualized
correctly.
<PARAM NAME ="initialURL" VALUE="http://yourhost/anypage.htm">
<PARAM NAME ="initialContent"
VALUE="Hello, this is the initial content"> -
Specifies simple initial content of the editor when the editor is
started. If this parameter is not specified than blank page is created.
For complex documents use initialURL instead
of this one.
<PARAM NAME ="initialURLEncodedContent"
VALUE="Hello%2c+this+is+the+initial+content"> -
Specifies the initial content of the editor when the editor is started-
it should be URLEncoded. The editor will decode it and visualize it
for editing. This permits the loading of even very complicated pages,
since all the tags are encoded and there is no interference with the
rest of the page. This approach is very useful for loading of the
initial content simply without javascripts etc.
<PARAM NAME ="uploadContentAsMultipartFormData"
VALUE="true|false"> - if
true, the content of the editor will be posted as multipart form data
to the server when used the "Save Remote" menu item or the
javascript function public boolean uploadMultipartContent(String
saveLocation, boolean entireFile) . This
will include all images, hyperlink targets etc. and everything will
be packed and uploaded to the server. If this parameter is used in
conjunction with uploadedObjectsTranslationPath the
URLs of the images and hyperlinks will be converted automatically
in order to be displayed correctly after uploading. See the javascript
functions for major details on how to upload content to the server
through javascript.
<PARAM NAME ="restrictedFontsList"
VALUE="Sans Serif,verdana,sans-serif,arial,sans-serif,Comic Sans,Tahoma,...">
- Should contain a comma separated
values of the fonts to be used. If specified, instead of using all
system font, only the fonts specified by this parameter will be used.
<PARAM NAME ="defaultInitialFont"
VALUE="verdana,sans-serif"> - If
specified the the editor will use this font as default font to be
applied automatically upon typing.
<PARAM NAME ="fontSizes" VALUE="8,10,12,14,...">
- If specified the the editor
will use this font sizes instead of the standard ones.
When the applet runs as
a separate window version you can specify with the parameters below
the appearance of the button which launches the editor window:
<PARAM NAME ="buttonBgColor" VALUE="0xFFFFFF">
<PARAM NAME ="buttonFgColor" VALUE="0x000000">
<PARAM NAME ="buttonText" VALUE="Start the Visual
Editor">
<PARAM NAME ="supressRemoteFileDialog"
VALUE="true|false"> -
Indicates whether the RemoteFileDialog should be disabled. If "true"
the dialog will be disabled, if false the dialog will be active and
will try to load the page indicated with the parameter
remoteBrowseLocation. Must
pay attention on the security restrictions when indicating the URL
to load if not granted the additional privileges requested at startup.
<PARAM NAME ="supressLocalFileDialog"
VALUE="true|false"> -
Indicates whether the LocalFileDialog should be disabled. If "true"
the dialog will be disabled, if false the dialog will be active and
will be available for browsing local files if the security restrictions
permit this. The signed applet will request additional privileges
upon loading and if granted will be possible to open/browse/save files
on the local machine.
<PARAM NAME ="remoteBrowseLocation"
VALUE="http://yourhost.com/YourFileBrowserScript">
- Indicates the URL of the page
that should be loaded when using remote file browsing. If you want
to be able to select and insert files through the remote file browser
dialog, the output from the server should complain with only few requirements:
There is absolutely no obligation of the type of the server side script
since the editor display any page sent by the server inside the RemoteFileDialog.
The only requirement for select & insert capability is that the
links to the files are in the following format:
<input type="submit" name="anyName" value="files/taxi-3.jpg">
<PARAM NAME ="remoteLinksBrowseLocation"
VALUE="http://yourhost.com/YourHyperlinkBrowserScript">
- Indicates the URL of the page
that should be loaded when using remote hypelink browsing. If you
want to be able to hyperlinks through the remote file browser dialog,
the output from the server should complain with only few requirements:
There is absolutely no obligation of the type of the server side script
since the editor display any page sent by the server inside the RemoteFileDialog.
The only requirement for select & insert capability is that the
links to the files are in the following format:
<input type="submit" name="anyName" value="files/taxi-3.jpg">
<PARAM NAME ="externalStyleSheetLocation"
VALUE="http://yourhost/YourStyleSheetFile.css"> -
Indicates the URL of the style sheet file (css) to be loaded. If this
parameter is indicated, then the style sheet will be loaded and added
to the document. All the class names will be parsed and will be available
for browsing through the style combo boxes on all property dialogs.
See the following CSS file format guidelines:
In order to achieve best
rendering results please use only separate selectors such as the following:
body {color: #000; font-size:
10px; font-family: verdana,sans-serif, arial,sans-serif, Helvetica, sans-serif; text-decoration:
none }
td {color: #000; font-size: 10px; font-family: verdana,sans-serif, arial,sans-serif,
Helvetica, sans-serif; text-decoration: none }
p {fcolor: #000; font-size: 10px; font-family: verdana,sans-serif, arial,sans-serif,
Helvetica, sans-serif; text-decoration: none }
.text {color: #000; font-size: 10px;}
(Enterprise Edition Only)
<PARAM NAME ="externalDictionary" VALUE="http://yourhost/dictionary.dict">
- Indicates the URL of the dictionary
to be used for spell checking. The dictionary should be plain text
in the following semicolon delimited format:
A=;aa;aaaa;aaaaaa;.....etc;
B=;bb;bbb;bbbbb;bbbbbbb;......;
C=;ccc;cccc;ccccc;ccccc;....;
Each line contains all
words for a given letter, for example the first line contains all
the words beginning with A, the second with B etc.
All the words should
be in lower case, note the initial and end delimiters. There shouldn't
be any white spaces.
<PARAM
NAME ="menuItemsToRemove" VALUE="insertBreakMenuItem,insertParagraphMenuItem,...">
- Indicates which menu items should
be removed from the menus. This list contains comma separated names
of the menu items contained within the editor to be removed. This
allows the full customization of the dropdown menus inside the main
menu. The full list is:
File Menu
newFileMenuItem
- new file menu item on the "File" menu
openFileMenuItem - open file menu item on the "File"
menu
openLocationMenuItem - open location menu item on the "File"
menu
closeFileMenuItem - close file menu item on the "File"
menu
saveFileMenuItem - save file menu item on the "File"
menu
saveasFileMenuItem - save remote file menu item on the
"File" menu
printFileMenuItem - print file menu item on the "File"
menu
exitFileMenuItem - close file menu item on the "File"
menu
Edit Menu
copyMenuItem
-copy menu item on the "Edit" menu
cutMenuItem - cut menu item on the "Edit" menu
pasteMenuItem - paste menu item on the "Edit"
menu
copyFormattedTextMenuItem - copy formatted text menu item
on the "Edit" menu
pasteFormattedTextMenuItem- paste formatted text menu item
on the "Edit" menu
selectAllMenuItem - select all menu item on the "Edit"
menu
findMenuItem - find menu item on the "Edit" menu
- professional version
replaceMenuItem - replace menu item on the "Edit"
menu - professional version
Insert Menu
insertBreakMenuItem
- insert break menu item on the "Insert" menu
insertParagraphMenuItem - insert paragraph menu item on the
"Insert" menu
insertSpaceMenuItem - insert space menu item on the "Insert"
menu
horizontalLineMenuItem - insert horizontal line menu item
on the "Insert" menu
insertDateMenuItem - insert date menu item on the "Insert"
menu
insertSymbolMenuItem - insert symbol menu item on the "Insert"
menu
insertFormFieldTextBoxMenuItem - insert text box menu item
on the "Insert -> Form" menu
insertFormFieldTextAreaMenuItem - insert text area menu item
on the "Insert -> Form" menu
insertFormFieldCheckBoxMenuItem - insert check box menu item
on the "Insert -> Form" menu
insertFormFieldRadioButtonMenuItem - insert radio button menu
item on the "Insert -> Form" menu
insertFormFieldDropDownMenuItem - insert drop down menuitem
on the "Insert -> Form" menu
insertFormFieldPushButtonMenuItem - insert push button menu
item on the "Insert -> Form" menu
insertFormFieldImageButtonMenuItem - insert image button menu
item on the "Insert -> Form" menu
insertInsertImageMenuItem - insert image menu item on the
"Insert" menu
insertInsertHyperlinkMenuItem - insert hyperlink menu item
on the "Insert " menu
Table Menu
insertTableMainMenuItem
- insert table menu item on the "Table" menu
insertTableRowMainMenuItem - insert table row menu item on
the "Table" menu
insertTableColumnMainMenuItem - insert table column menu item
on the "Table" menu
deleteTableCellsItem - delete table column menu item on the
"Table" menu
selectTableMenuItem - select table menu item on the "Table"
menu
selectTableColumnMenuItem - select table column menu item
on the "Table" menu
selectTableRowMenuItem - select table row menu item on the
"Table" menu
selectTableCellMenuItem - select table cell menu item on the
"Table" menu
splitTableCellMenuItem - split table cell menu item on the
"Table" menu
mergeTableCellMenuItem - merge table cell menu item on the
"Table" menu
tablePropertiesMainMenuItem - table properties menu item on
the "Table" menu
tableCellPropertiesMainMenuItem - table cell properties menu
item on the "Table" menu
Window Menu
newWindowMenuItem
- new window menu item on the "Window" menu
Format Menu
fontPropertiesMainMenuItem
- font properties menu item on the "Format" menu
pagePropertiesMainMenuItem - page properties menu item on
the "Format" menu
removeFormattingMainMenuItem - remove formatting menu item
View Menu
viewStatusBarMenuItem
- view status bar menu item on the "View" menu
viewToolBarMenuItem - view tool bar menu item on the "View"
menu - professional version
viewSourceEditorMenuItem - view source editor menu item on
the "View" menu - professional version
viewPagePreviewMenuItem - view preview menu item on the "View"
menu - professional version
Help Menu
aboutFileMenuItem
- about menu item on the "Help" menu
<PARAM NAME ="menusToRemove" VALUE="menuTools,menuWindow,menuHelp,...">
- Indicates which menus should
be removed from the main menu bar. This list contains comma separated
names of the menus contained within the editor's main menu bar to
be removed. This allows the full customization of the menus inside
the main menu bar. The full list of the menus is:
Main Menus:
menuFile - the
File menu on the main menu bar - will remove the entire menu;
menuEdit - the Edit menu on the main menu bar - will remove
the entire menu;
menuView - the View menu on the main menu bar - will remove
the entire menu;
menuInsert - the Insert menu on the main menu bar - will remove
the entire menu;
menuFormat - the Format menu on the main menu bar - will remove
the entire menu;
menuTools - the Tools menu on the main menu bar - will remove
the entire menu;
menuTable - the Table menu on the main menu bar - will remove
the entire menu;
menuWindow - the Window menu on the main menu bar - will remove
the entire menu;
menuHelp - the Help menu on the main menu bar - will remove
the entire menu;
Submenus:
menuInsertTable -
the Insert menu inside the Table main menu - will remove the entire
menu;
menuSelectTable - the Select menu inside the Table main menu
- will remove the entire menu;
menuPropertiesTable - the Properties menu inside the Table
main menu - will remove the entire menu;
menuForm - the Form menu inside the Insert main menu
- will remove the entire menu;
<PARAM NAME ="toolbarItemsToRemove"
VALUE="tableBtn,decreaseIndentButton,fontsList,...">
- Indicates which toolbar items
should be removed from the main tool bar. This list contains comma
separated names of the toolbar items contained within the editor's
main tool bar to be removed. This allows the full customization of
the tools inside the main tool bar. The full list of the items is:
insertImageButton
- the insert image toolbar button;
tableBtn - the insert table toolbar button;
undoButton - the undo toolbar button;
redoButton - the redo toolbar button;
insertHyperlinkButton - the insert hyperlink toolbar button;
increaseIndentButton - the increase indent toolbar button;
decreaseIndentButton - the decrease indent toolbar button;
fontSizeButton - the font properties button;
setForegroundButton - the font foreground toolbar button;
unorderedListButton - the unordered list toolbar button;
orderedListButton - the ordered list toolbar button;
newFileButton - the new file toolbar button;
openFileButton - the open file toolbar button;
saveFileButton - the save file button;
printFileButton - the print file button;
pasteButton - the paste toolbar button;
copyButton - the copy toolbar button;
cutButton - the cut toolbar button;
alignRightButton - the align right toolbar button;
alignCenterButton - the align center toolbar button;
alignLeftButton - the align left toolbar button;
fontUnderlineButton - the font underline toolbar button;
fontItalicButton - the font italic toolbar button;
fontBoldButton - the font bold toolbar button;
fontsList - the fonts list toolbar combo box;
fontSizes - the font sizes toolbar combo box;
headingStyles - the heading styles toolbar combo box;
copyFormattingButton - the copy formatting brush toolbar button;
insertTableButton - insert table toolbar button
insertTableRowButton - insert row toolbar button
insertTableColumnButton - insert column toolbar button
deleteTableCellsButton - delete table cells toolbar button
selectTableButton - select table toolbar button
selectTableColumnButton - select table column toolbar button
selectTableRowButton - select table row toolbar button
selectTableCellButton - select table cell toolbar button
splitTableCellButton - split table cell toolbar button
mergeTableCellButton - merge table cell toolbar button
tablePropertiesButton - table properties toolbar button
tableCellPropertiesButton - table cell properties toolbar
button
styleClasses -
the style classes toolbar combo box
showParagraphsButton
- the button for revealing
paragraphs
fontBackgroundButton - font
background (text highlight) button
insertEquationButton - the button for inserting mathematical
equations through Sferyx EquationEditor
alignJustifyButton -
the button for align justify paragraphs
superscriptButton - the button for superscipt
subscriptButton - the button for subscript
insertSymbolButton- the button for inserting symbols
tableToolbarSeparator-
the separator between the table items
pasteToolbarSeparator- the separator between the pasting
items
undoToolbarSeparator- the separator between the undo
items
saveToolbarSeparator- the separator between save items
printToolbarSeparator
- the separator before the print item
fontToolbarSeparator - the separator between formatting items
fontStyleToolbarSeparator - the separator before the
style combo
alignmentToolbarSeparator - the separator before the paragraph
alignment items
listsToolbarSeparator- the separator before the list items
zoomoutTextButton -
the text zoom out button
zoominTextButton - the text zoom in button
pdfExportButton - the PDF export toolbar button when
enabled
imageMapRectButton -
the image map insert rectangle button
imageMapCircleButton - the image map insert circle button
imageMapPolyButton - the image map insert polygon button
<PARAM NAME ="removedPopupMenuItems"
VALUE="listPropertiesMenuItem,insertTableRowMenuItem...">
- Indicates which toolbar items
should be removed from the main tool bar. This list contains comma
separated names of the toolbar items contained within the editor's
main tool bar to be removed. This allows the full customization of
the tools inside the main tool bar. The full list of the items is:
listPropertiesMenuItem
- list properties popup menu item, appears when the cursor
is palced over a list
insertTableRowMenuItem - insert table row popup menu item
insertTableCellMenuItem - insert table cell popup menu item
insertTableMenuItem - insert
table row popup menu item
imagePropertiesMenuItem
- image properties popup menu item, appears when there is
an image selected
imageButtonFieldPropertiesMenuItem - image button properties
popup menu item, appears when there is an image button selected
formPropertiesMenuItem - form button properties popup menu
item, appears when there is a form
buttonFieldPropertiesMenuItem - button properties popup menu
item, appears when there is a button selected
radioButtonFieldPropertiesMenuItem - radio button properties
popup menu item, appears when there is a radio button selected
checkBoxFieldPropertiesMenuItem - check box properties popup
menu item, appears when there is a check box selected
textFieldPropertiesMenuItem - text field properties popup
menu item, appears when there is a text field selected
textAreaFieldPropertiesMenuItem - text area properties popup
menu item, appears when there is a text area selected
selectFieldPropertiesMenuItem - select(list) field properties
popup menu item, appears when there is a select field(list) selected
tablePropertiesMenuItem
- table properties popup
menu item, appears when there is a table at the cursor position
tableCellPropertiesMenuItem -
table cell properties popup
menu item, appears when there is a table at the cursor position
pagePropertiesMenuItem -
page properties popup menu
item
mergeItem - merge table
cells properties popup menu item, appears when there is a table
at the cursor position
splitItem - split table
cell properties popup menu item, appears when there is a table
at the cursor position
hyperlinkPropertiesPopupMenuItem -
hyperlink properties popup menu item
fontPropertiesMenuItem
- font properties popup
menu item
objectPropertiesMenuItem
- object properties popup
menu item
paragraphPropertiesPopupMenuItem - paragraph properties popup
menu item
copyItem -
copy formatted text popup menu item
copyPlainTextMenuItem -
copy plain text popup menu item
pasteItem - paste formatted
text popup menu item
copyPopupMenuItem - copy popup menu item
pastePopupMenuItem - paste popup menu item
cutPopupMenuItem - cut popup menu item
boldPopupMenuItem - bold popup menu item
italicPopupMenuItem - italic popup menu item
underlinePopupMenuItem - underline popup menu item
alignLeftPopupMenuItem - align left popup menu item
alignCenterPopupMenuItem - align center popup menu item
alignRightPopupMenuItem - align center popup menu item
<PARAM NAME ="mainMenuVisible"
VALUE="true|false"> -
Indicates if the entire main menu is visible or not. The default value
is true
<PARAM NAME ="statusbarVisible"
VALUE="true|false"> -
Indicates if the status bar is visible or not. The default value is
true
<PARAM NAME ="toolbarVisible"
VALUE="true|false"> -
Indicates if the entire main toolbar is visible or not. The default
value is true
<PARAM NAME ="formattingToolbarVisible"
VALUE="true|false"> -
Indicates if the formatting toolbar is visible or not. The default
value is true
<PARAM NAME ="shortcutsToolbarVisible"
VALUE="true|false"> -
Indicates if the shortcuts toolbar is visible or not. The default
value is true
(Pro/ Enterprise Only)
<PARAM NAME ="previewVisible" VALUE="true|false">
- Indicates if the preview section
is visible or not. The default value is true
(Pro/ Enterprise Only)
<PARAM NAME ="sourceEditorVisible" VALUE="true|false">
- Indicates if the entire source
editor is visible or not. The default value is true
(Pro/ Enterprise Only)
<PARAM NAME="generatePlainHTML" VALUE="true">
- when this is specified then plain html
will be generated, no xhtml closing slash will be added to the self
closing tags.
<PARAM NAME="loadInterfaceLanguageFile"VALUE="http://yourhost/german.txt">
- If this parameter is specifed,
the editor will load upon startup the language file and will initialize
the entire user interface with the new language setting. This way
the editor interface can be localized in any language as needed. See
the supplied "sample-german-translation.txt" file as an
example for the format of the UI language files.
<PARAM NAME="addJavascriptButtons" VALUE="shortcutToolbar,helloFromJavascript(),null,Hello
there|shortcutToolbar,helloFromJavascript2(),null,Hello here">
Possibility to add javascript
buttons from applet parameter
(Enterprise Only)
<PARAM NAME = "sourceCodeModeOnly" VALUE="true|false">
- Specifies whether the editor should run only in source code editor
mode or not. If true, the editor will display only the HTML source
code editor with syntax highlighting.
(Pro/ Enterprise Only)
<PARAM NAME="showBodyContentOnlyInSource"
VALUE="true|false"> -if
true, then only the body content will be shown in the html source
editor. This should be used with care, because when editing entire
pages, information such style sheets and meta tags contained outside
the body may be lost when switching between source and visual editors.
<PARAM NAME="smartWordContentHanldingEnabled"
VALUE="true|false"> -if
true, then the import filter will be applied to all the pasted content
and will clean proprietary MS tags and adjust the correct rendering
of the documents. The default value is true.
<PARAM NAME="forceInlineCSSGeneration" VALUE="true|false">
- if true, then all the inline CSS definitions
such as <div style="font-size:10pt">content</div>
will be preserved. The default value is true. If this is disabled
the inline style definitions will be converted into HTML 3.2 specifications
and in some cases ignored.
<PARAM NAME="fontRenderingZoomLevel" VALUE="2">
- if specified, the rendering of all fonts
will be increased/decreased by the specified value. You can specify
positive or negative values in order to increase or decrease visibly
the fonts. This is used only to change the rendering size, not the
HTML generation. All the fonts will be relatively increased/decreased
preserving all the formatting. This is useful for persons with visual
impairments in order to help them read the content easily increasing
the rendering fonts size as needed.
<PARAM NAME="alignedImagesWordWrapEnabled"
VALUE="true|false"> -
if specified, the rendering of aligned images will be as in any web
browser - the text will be wrapped around and the images will be placed
respectively on the left/right side of the current text block. Since
this is a new feature in some cases it may be necessary to revert
back to the default behavior. Just specifying false will return the
default behavior of the editor which the alignment of the images is
ignored.
<PARAM NAME="remoteFileDialogWidth" VALUE="800">
- specifies the width of the remote file dialog to be used
<PARAM NAME="remoteFileDialogHeight" VALUE="600">
- specifies the height of the remote file
dialog to be used
<PARAM NAME="remoteFileDialogResizable" VALUE="true|false">
- specifies whether the Remote File dialog
should be resizable or not
<PARAM NAME="disableIndentingAndLineBreaks" VALUE="true|false">
- will disable the indenting and line
breaks inside table cells. This may be useful to improve the rendering
in IE with content generated from the editor for table cells with
small height.
<PARAM NAME="preserveComments" VALUE="true|false">
- this will cause the preservation of
comments inside the HTML. This way the users will not be able to delete
the inline comments when typing.
<PARAM NAME="popupMenuVisible" VALUE="true|false">
- if specified the popup menu will be
enabled/disabled. The default value is true
<PARAM NAME="useSaveAsSaveRemote" VALUE="true|false">
- this will cause all buttons/menus for
save to have the behavior of "Save Remote" functionality.
This way also the shortcut on the toolbar ("the save floppy icon")
can be used to save the content of the editor remotely. The default
is false.
<PARAM NAME="saveEntireFile" VALUE="true|false">
- this parameter specifies whether the
"Save Remote" functionality should send entire HTML files
(including <html><head><body> tags) or should send
only the body content as a page fragment.
<PARAM NAME="defaultCharset" VALUE="windows-1251">
- this parameter specifies which charset
to be used as default one. It can be used as a replacement for the
<meta http-equiv> directive for editing of international pages.
<PARAM NAME="forceInternalJSExecution" VALUE="true|false">
- this parameter defines the calling method
for javscript functions invoked by custom JS buttons from inside the
editor. This should be set to false for Mac OS X browsers which do
not support the java-javascript communication directly. The default
value is true.
<PARAM NAME="generateUniqueImageFilenames"
VALUE="true|false"> - this
parameter will force the generation of unique file name during the
image uploads to server-side scripts. This allows preserving of images
with the same names from being overwritten.
<PARAM NAME="transferFocusOnTAB" VALUE="true|false">
- if this parameter is set to false then
upon pressing the TAB key will be inserted an non-breakable tabbed
space inside the editor. If this parameter is set to true the editor
will call a javascript function called "transferFocus()"
in order to transfer the focus to the next form field component. The
transferFocus() implementation is left to the webmaster in order to
be able to decide to which field exactly should be transferred the
focus to. This parameter can be used in conjunction with the new javascript
function focus() in order to transfer the focus to the editor.
<PARAM NAME="publishContentUsingWebDAV"
VALUE="true|false"> - if this
parameter is set to true when using the save remote functionalities
or the multipart upload functionalities, the entire content of the
editor will be published using WebDAV specification. Obviously you
server must be configured properly in order to be able to receive
and save such a content. Please refer to the section Configuring
of "Save Remote" functionality for
majore details on how to publish content from the editor.
<PARAM NAME="callJavascriptFunctionOnLoad"
VALUE="yourJavascriptFunction()"> - if this
parameter is specified the editor will invoke the javascript function
specified as a parameter value upon loading automatically.
<PARAM NAME="preferredPasteOperation"
VALUE="PASTE_FORMATTED_TEXT|PASTE_PLAIN_TEXT|
PASTE_FORMATTED_PARAGRAPHS_WITHOUT_STYLE |PASTE_FILTERED_FORMATTED_TEXT">
- if this parameter is specified the prefered
paste operation will be used as a default paste opration for the editor.
Allowed values are as follows:
PASTE_FORMATTED_TEXT
PASTE_PLAIN_TEXT
PASTE_FORMATTED_PARAGRAPHS_WITHOUT_STYLE
PASTE_FILTERED_FORMATTED_TEXT
(Enterprise Only) <PARAM
NAME="asYouTypeSpellcheckingEnabled"
VALUE="true|false"> - if this
parameter is set to true then upon typing the spellchecking will performed.
The default value is false.
<PARAM NAME="loadStyleClassesDescriptionFile"
VALUE="http://your_style_descriptions_file_url">
-this parameter specifies the URL where
the style descriptions file is located. When the style descriptions
are loaded, in the toolbar quick style dropdown menu will be displayed
the descriptions of the stlyes instead of the class names, resulting
in a more user friendly diplay for the end user.
Example format of
the style description file:
bold_title=Bold title on the main page
red_text=Customer notes text
yellow_caption=Section heading
....
(Enterprise Only) <PARAM
NAME="enableEquationEditorIntegration"
VALUE="true|false">
-if set to true this parameter will enable integration with the Sferyx
Equation Editor. The Sferyx Equation Editor should be purchased with
a separate license from Sferyx.
<PARAM NAME="restrictedHeadingsList"
VALUE="Normal,Heading 3,Heading 4">
-this parameter specifies the heading
entries to be shown in the headings combo box on the toolbar. It can
be used to restrict the available headings to a limited number of
entries.
<PARAM NAME="enablePDFExport"
VALUE="true|false">
-this parameter enables the PDFExport
Add-on if available - it will allow the generation of PDF file from
the document which can be saved and linked to the document as a
hyperlink target for subsequent automatic upload if needed.
<PARAM NAME="singleParagraphSpacing"
VALUE="true|false">
-this will enable generation of a MS
Word style paragraphs in edit time.
<PARAM NAME = "uploadedObjectsTranslationPath"
VALUE="http://server_path_to_the_uploaded_images">
-
indicates how the uploaded
object's path should be translated automatically by the editor in
order to match the server paths - this is to be used both with
multipart uploads and WebDAV
<PARAM NAME="useCookie"
VALUE="cookie_here">
- this parameter specifies the cookie
to be used along with the requests - this can be useful in order to
force some cookie usage if necessary.
<PARAM NAME="useFixedFileNameNamingRule"
VALUE="file_name">
- this parameter specifies the fixed
filename to be used for all files uploaded through the file upload
features.
<PARAM NAME="maxCharacterWidthPerLine"
VALUE="50">
- this parameter specifies maximum line
width to be generated in the html output per line.
(Enterprise Only)
<PARAM NAME="appendExternalDictionary"
VALUE="true|false">
- this parameter specifies whether to
append the external dictionary to the existing one - this is useful
when only specific terms need to bee added to the dictionary. The
default value is false.
(Enterprise Only)
<PARAM NAME="asYouTypeSpellcheckingEnabled"
VALUE="true|false">
- enable/disable the as-you-type
spellchecker .
(Enterprise Only)
<PARAM NAME="addWordsToDictionaryEnabled"
VALUE="true|false">
- enable/disable the possibility for
each user to specify own words to be added to the dictionary .
(Enterprise Only) <PARAM NAME="externalDictionaryEncoding"
VALUE="dictionary_encoding">
- specifies the external dictionary
encoding to be used for loading different dictionaries.
<PARAM NAME="useFlowToolbarLayout"
VALUE="true|false">
- enable/disable the flowing toolbar
layout - when enabled the toolbar will be wrapped inside the editor
window so all the available buttons are always visible - very
useful for cases when the editor is placed inside small areas.
<PARAM NAME="sakai_compatibility_mode"
VALUE="true|false">
<PARAM NAME="forceSpanGeneration"
VALUE="true|false">
- forces the generation of SPAN tags
instead of deprecated FONT tags in order to generate standards compliant
content.
<PARAM NAME="usePixelsForFontSizeListCombo"
VALUE="true|false">
<PARAM NAME="maxFileUploadSize" VALUE="number
or 20M or 20K"> this new
parameter will limit the file size of the uploads limited to a specified
value. If one of the files is bigger the upload will be stopped and
error message will be prompted.
<PARAM NAME="keepAspectRatioWhenResizeImages" VALUE="true|false">
this forces when resizing images visually to keep aspect ratio.
Otherwise this can be achieved by pressing the Shift key down while
resizing.
<PARAM NAME="replaceCharactersAsYouType" VALUE="o=a|this=that">
- specifies characters or string literals to be replaced as-you-type.
The format for replacing is as follows : charToReplace=replacementChar.
The same is valid for string literals, the various pairs of replacements
a separated by the "|" character. When replacing string literals, the
replacement will be completed when a space, tab or new line character is
typed after the string to be replaced.
<PARAM NAME="disabledKeyboardCharacters" VALUE="oagjiesc">
- specifies characters to be disabled as-you-type. All the single
characters specified in the parameter will be denied entry from the
keyboard as the user types on it. In the example here all the single
characters o,a,g,j,i,s,c will not be allowed to be inserted from the
keyboard.
<PARAM NAME="removeCTRLKeystrokes" VALUE="true|false">
- if true - this parameter will disable all the CTRL+key default
operations. The default value is false.
<PARAM NAME="sendAddWordsToServer" VALUE="http://your_server">
- specifies the server address
where to send new words if there is a need to manage them centrally for
all users. This parameter will cause all new words added by the users to
be sent to a central repository and added to a centralized dictionary -
the word will be sent through a GET request using query string parameter
name wordToAdd. This parameter could be used in conjunction with
externalDictionary and appendExternalDictionary parameters
<PARAM NAME ="debug" VALUE="true|false">
- will force the editor to display inside the editor window the response
returned from the server if any.
<PARAM NAME ="displayServerResponseAsWarning" VALUE="true|false">
- will force the editor to display the server response inside a popup
window as a warning message. To be used in conjunction with the
parameter "debug"
<PARAM NAME ="globalReplacementFontFamily" VALUE="Arial">
- will force the editor to automatically replace all font family style
definitions contained in the pasted content.
<PARAM NAME ="embedAllImagesInsideTheDocument" VALUE="true|false">
- will instruct the editor to automatically embed all images inside the
document and create a self contained HTML document with inline Base
64 encoded images. This way it is very to transfer the whole
document as a string and avoid uploading all images separately.
<PARAM NAME ="openLinksInABrowserWindow" VALUE="true|false">
- will instruct the editor to allow clicking on the hyperlinks in the
preview section and opening the resulting URL into a specified
browser window. The default name of the browser window is "_blank"
so new window will be opened.
<PARAM NAME ="windowTarget" VALUE="_blank|_self|_top|_parent|name
of window or frame">
- specifies the target window to be used for opening the hyperlinks when
openLinksInABrowserWindow
is set to true.
9. Accessing
the HTMLEditor from javascript
The demo includes functional
examples how to access the HTMLEditor content using javascript.
There are available the
following functions:
public void setContent(String htmlContent)
- sets the content of the HTMLEditor.
The content could be an html document, portion of html document or
plain text
public void setURLEncodedContent(String htmlURLEncodedContent)
- sets the content of the HTMLEditor.
The content could be an html document which is URLEncoded - it will
be decoded by the editor and rendered properly.
public String getContent() - returns
the content of the html editor as entire html document (includes tags
<html>, and <body>).
public String getSelectedContent() - returns
the content only within the selection. If there is no selection, empty
string will be returned.
public String getBodyContent() - returns
the content of the html editor as a potion of html document
(without tags <html>, and <body>). For use with
content management systems is recommended using this function when
editing single pieces of pages. If you have inserted portion of document
using setContent
method this will return what you need.
public String getPlainText() - returns
the content of the html editor as plain text without any formatting.
public String getSelectedEditor() - returns
the selected tab of the editor - return values could be "VISUAL_EDITOR",
"SOURCE_EDITOR", "PAGE_PREVIEW". (Enterprise
Only)
public void insertContent(String htmlContent)
public void insertText(String plainText) -inserts
plain text content inside the editor without erasing the rest of the
document. The new content is inserted at the current caret position.
The text inserted will take the attributes of the text at the caret
position (ex. bold, italic etc.) If there is a selection, the selection
will be replaced with the new text.
public void insertImage(String imageURL) -inserts
an image inside the editor. It could be also relative URL - the correct
resolving of the relative URLs depends on the configuration of the
applet parameter absoluteDocumentTranslationURL
public void insertLink(String linkURL) -inserts
a hyperlink over the selected text in the editor. For correct resolving
of relative URLs if used as an applet you may cosider the Applet Edition
of this product.
public void setDefaultCharset(String charsetMimeType)
-set the default charset for
converting the document content. This value will be used as default
if charset statement is not specified in the page loaded. If there
is a statement indicating the charset of the page such as "<meta
http-equiv="Content-Type" content="text/html; charset=windows-1252">"
this statement will be parsed and used instead of the default one. The
charset is used when loading and saving documents.
public void saveToLocation(String locationURL,
boolean entireFile) - sends
the content of the HTMLEditor using method POST to the server script
specified in locationURL and sends it as entire document if entireFile
is true, otherwise it will send only the portion of the document as
specified in getBodyContent()
public void saveToDefaultLocation() - saveURL
and sends it as entire document using also the parameters variableName
and parametersToSend
if specified, otherwise the
default variable name is html_content.
public void openLocation(String location)
- opens new document from
the location specified. The parameter location should
be a fully qualified URL.When used as an applet the document obviously
should be from the same server where the applet resides.
Only in external window
mode is available the following function:
public void startVisualEditor() - starts
and shows the window of the HMTLEditor without the need to click on
the applet button.
public boolean uploadMultipartContent(String
saveLocation, boolean entireFile) - this
will upload the content of the editor to the server as multipart form
data - it will bundle together with the html document all images,
hyperlink targets etc. which are local object or have a host different
from this of the editor it self. The return value is true if the upload
is successful, false otherwise. You can make the browser wait until
the upload is completed waiting for the return value for a variable
from javascript. The saveLocation sould
be the URL of the server side script which receives the content of
the editor, entireFile indicates
whether the content of the HTML document should be entire page (including
HTML, body etc.) or only a fragment of page -paragraph etc.
publi void addJavascriptButton ("shortcutToolbar","helloFromJavascript()",
"http://host/icon.gif", "Tooltip Text")
- this will add new javascript
button on the specified toolbar. The toolbars are as follows: shortcutToolbar
- the toolbar with open, save, etc. shortcuts, and formattingToolbar
- which contains all text formatting buttons. The second parameter
is the javascript function to be invoked, third parameter is the icon
of the button (should be a fully qualified URL), and last is the tooltip
text to be displayed when the mouse is over the button.
public void focus() - will
transfer the focus to the editor. You can use this function in conjunction
with the parameter transferFocusOnTAB in order to manage the focus
over the various form elements.
public void setSaveLocation(String
url_location) - will set dinamically
the save location for the remote save functionalities.
public void setUploadedObjectsTranslationPath(String
url) - will set dinamically
the translation path for resolving uploaded objects.
public void setExternalStyleSheetLocation(String
urtl) -
will load dinamically stylesheets into the editor.
public void setDocumentLenghtLimit(int
limit, String warningMessage) -
can be used to specify document length limit of the length of the
entire document including the HTML markup. If the limit is reached,
warning message will be shown to the user. If the message is null,
default message will be displayed.
public void resetDocumentLenghtLimit() -
will reset the previously imposed document length limit.
public boolean isDocumentEdited() -
will return true or false indicating whether the document has been edited
(changed) by the user or not. This can be useful for checking if the
docuemnt has been changed before performing save operations or ask the
user to save before leaving the page.
public void
addAdditionalDynamicParameter(String name, String value)
- this method allows dynamically to be added
new variables to be sent to the server together with the file upload
operation. This would allow complete AJAX style operations without the
need to reload the page when saving the content. You can send this way
all the page form fields along with the applet multipart upload.
public void
setEmbedAllImagesInsideTheDocument(boolean embed)
- will instruct the editor to automatically embed all images
inside the document and create a self contained HTML document with
inline Base 64 encoded images. This way it is very to transfer the
whole document as a string and avoid uploading all images
separately.
public boolean
isEmbedAllImagesInsideTheDocument() -
will return if embedding of the images is enabled.
public setOpenLinksInABrowserWindow(boolean
open)
- will instruct the editor to allow clicking on the hyperlinks in the
preview section and opening the resulting URL into a specified
browser window. The default name of the browser window is "_blank"
so new window will be opened.
public setWindowTarget(String target)
-
specifies the target window to be used for opening the hyperlinks
when setOpenLinksInABrowserWindow
is set to true. It could be one of the
following values _blank|_self|_top|_parent|name of
window or frame
10. Configuration
of Remote or Local file browsing for images and hyperlinks
<PARAM NAME ="supressRemoteFileDialog"
VALUE="true|false"> -
Indicates whether the RemoteFileDialog should be disabled. If "true"
the dialog will be disabled, if false the dialog will be active and
will try to load the page indicated with the parameter
remoteBrowseLocation. Must
pay attention on the security restrictions when indicating the URL
to load if not granted the additional privileges requested at startup.
<PARAM NAME ="supressLocalFileDialog"
VALUE="true|false"> -
Indicates whether the LocalFileDialog should be disabled. If "true"
the dialog will be disabled, if false the dialog will be active and
will be available for browsing local files if the security restrictions
permit this. The signed applet will request additional privileges
upon loading and if granted will be possible to open/browse/save files
on the local machine.
<PARAM NAME ="remoteBrowseLocation"
VALUE="http://yourhost.com/YourFileBrowserScript">
- Indicates the URL of the page
that should be loaded when using remote file browsing. If you want
to be able to select and insert files through the remote file browser
dialog, the output from the server should complain with only few requirements:
There is absolutely no obligation of the type of the server side script
since the editor display any page sent by the server inside the RemoteFileDialog.
The only requirement for select & insert capability is that the
links to the files are in the following format:
<input type="submit" name="anyName" value="files/taxi-3.jpg"
displaylabel="taxi-3.jpg" defaultlink="files/taxi-3.jpg">
displaylabel - can
be used to display the text of the link to be visualized if different
from the link URL.
defaultlink -
<PARAM NAME ="remoteLinksBrowseLocation"
VALUE="http://yourhost.com/YourFileBrowserScript">
- Indicates the URL of the page
that should be loaded when using remote file browsing. If you want
to be able to select and insert files through the remote file browser
dialog, the output from the server should complain with only few requirements:
There is absolutely no obligation of the type of the server side script
since the editor display any page sent by the server inside the RemoteFileDialog.
The only requirement for select & insert capability is that the
links to the files are in the following format:
<input type="submit" name="anyName" value="files/taxi-3.jpg"
displaylabel="taxi-3.jpg" defaultlink="files/taxi-3.jpg">
displaylabel - can
be used to display the text of the link to be visualized if different
from the link URL.
defaultlink -
11.
Setting the content of the editor
There are several approaches
for setting the content of the editor depending on the exact usage.
Here are explained the most common:
-
Using
the applet parameters to set the content directly from the server-side
script
-
Using
the initialURL applet parameter to open remote location when
the editor is loaded
-
Using
javascript functions to set the content during runtime
1)
Using the applet parameters to set the content directly from the server-side
script:
The easiest way to set the
content of the editor is similar to those of the html <textarea>
- the content is set directly through the server-side script inside
the applet tags. If you are dealing with complex HTML content it is
necessary to pass it encode to the applet parameter in order to do
not interfere with the source of the page containing the applet. The
editor will automatically decode and display the content for editing.
Simple illustrations of
that are as follows:
- If you are using ASP
server scripting you can do the following:
<PARAM NAME="initialURLEncodedContent"
VALUE="<%=Server.URLEncode( your_content_variable_here
)%>">
- If you are using PHP
server scripting you can do the following:
<PARAM NAME="initialURLEncodedContent"
VALUE="<?php echo urlencode( $your_content_variable_here
) ?>">
- If you are using JSP
server scripting you can do the following:
<PARAM NAME="initialURLEncodedContent"
VALUE="<%=URLEncoder.encode( your_content_variable_here
); %>">
This approach is very simple
and easy to use way for passing dynamically generated content to the
editor, without the use of complex javascripts and it is fully crossbrowser
and crossplatform. This example will work on all browsers on all platforms
without any modification.
You may need to specify
the parameter absoluteDocumentTranslationURL in order to resolve
properly the relative images and hyperlynks contained inside the document.
Please see the Applet parameters
section for major details about the various parameters.
The content will be inserted
into the applet parameter (it can be also entire HTML page - it will
be URL encoded and will not affect the page containing the applet).
When the editor is loaded and started the content will be decoded
and shown immediately into the editor, since it has been already loaded
with the page.
If you are dealing with
plain text as initial content, you may consider also initialContent
applet parameter which is not URL encoded and is recommended for plain
text content. Should be used in conjunction with server-side scripts
as explained above, but without URLEncoding the content.
2)
Using the initialURL applet parameter to open remote location when
the editor is loaded:
You can specify a remote
location to be opened when the editor is loaded. This way you can
control easily what the editor loads, and is the easiest way to open
complex pages with images and hyperlinks which need to be resolved
correctly
<PARAM NAME="initialURL"
VALUE="http://yourhost/your_page_to_be_loaded">
Note that the URL should
be a fully qualified absolute URL including the protocol (http://)
etc.
The document base for resolving
of images will be set automatically with the location of the page,
however if you want to override this setting you can do so using the
absoluteDocumentTranslationURL applet parameter. Please
see the Applet parameters
section for major details about the various parameters.
3)
Using javascript functions to set the content during runtime:
If you would like to change
the content of the editor during runtime, for example for passing
the content from other page elements such as <textarea>, <div>
or other document fields, you can use the various javascript functions
as follows:
if your editor is named
htmleditor, you can invoke the various javascript functions
directly the following way:
htmleditor.setContent(some_html_content);
This may be associated with
various event handlers such as button click or onLoad page handlers.
htmleditor.insertContent(some_html_content);
This will insert new content
at the caret position. May be used to insert page fragments in already
existing documents.
htmleditor.setURLEncodedContent(String
htmlURLEncodedContent) -
sets the content of the HTMLEditor. The content could be an html document
which is URLEncoded - it will be decoded by the editor and rendered
properly.
htmleditor.insertText(String
plainText) -inserts
plain text content inside the editor without erasing the rest of the
document. The new content is inserted at the current caret position.
The text inserted will take the attributes of the text at the caret
position (ex. bold, italic etc.) If there is a selection, the selection
will be replaced with the new text.
htmleditor.insertImage(String
imageURL) -inserts
an image inside the editor. It could be also relative URL - the correct
resolving of the relative URLs depends on the configuration of the
applet parameter absoluteDocumentTranslationURL
htmleditor.insertLink(String
linkURL) -inserts
a hyperlink over the selected text in the editor. For correct resolving
of relative URLs if used as an applet you may cosider the Applet Edition
of this product.
See the supplied sample
pages for major details about the use of javascript functions. You
may consult also the Accessing
the editor from Javascript section for all available javascript
functions.
12.
Getting the content of the editor
There are several approaches
for getting the content of the editor depending on the exact usage.
Here are explained the most common:
-
Using
the getContent() and getBodyContent() javascript functions
-
Using
the saveRemote functionalities to send the content of the editor
directly to the server
-
Using
upload multipart content functionalities to send all embedded
local images and hypelink targets
Important Note: With the new functions like the
parameter <PARAM NAME ="embedAllImagesInsideTheDocument" VALUE="true|false">
or the JavaScript method
setEmbedAllImagesInsideTheDocument(true) you can instruct the editor to automatically
embed all images inside the document and create a self contained
HTML document with inline Base 64 encoded images. This way it is
very to transfer the whole document as a string and avoid uploading
all images separately - you can transfer the document using a simple
POST or via JavaScript to hidden fields etc.
1)
Using the getContent() and getBodyContent() javascript functions:
When using the applet, you
can get the content of the editor using javascript:
- using htmleditor.getContent() - will return the entire content of
the page
- using htmleditor.getBodyContent() - will return only the content
of the body
When you are using a form
element you should get the content from the editor using one of the
functions above and
place it for example in to a hidden field in the form. After that
the entire form can be submitted to the server.
Here below is supplied an example script that sends all the content
of the editor from a FORM element using the variable "html_content"
- note the usage of the onSubmit() form handler:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function sendContent()
{
//If you want to include all images inside the document as
inline embedded images
window.document.htmleditor.setEmbedAllImagesInsideTheDocument(true);
window.document.ContentForm.html_content.value=window.document.htmleditor.getContent();
//Here we get the content of the
editor and put it into the hidden variable
//
if you want to reset the previously set embedding fo the images
window.document.htmleditor.setEmbedAllImagesInsideTheDocument(false);
window.document.ContentForm.submit();
//We submit the
form with all the content
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="ContentForm"
action="form_dump.php" method="post">
<INPUT TYPE="hidden" NAME="html_content" VALUE="">
<APPLET code="sferyx.administration.editors.HTMLEditor"
archive="HTMLEditorAppletLight.jar" width="600" height="400"
name="htmleditor">
</APPLET>
<INPUT TYPE="Button" VALUE="Submit"
onClick="sendContent();"> //This
will call the sendContent() javascript function before submitting
the form
</FORM>
</BODY>
</HTML>
This example will work on almost all
browsers on all platforms without any modification. It will work on
Windows (IE, Netscape, Mozilla, Opera, FireFox etc.), Linux (Netscape,
Mozilla, FireFox, Konqueror, Galeon, Opera), Solaris (Netscape, Mozilla,
FireFox, Konqueror, Opera), Sun JavaDesktop System (Netscape, Mozilla,
FireFox, Konqueror, Galeon, Opera), and Safari 1.2 on Mac OS
X. For the browsers that do not support the java-javascript
communication directly (IE 5.2, Mozilla on Mac OS X) is necessary
the Sferyx LiveConnect Proxy which is included with all retail products
but not in the downloadable demo version. See the LiveConnect Proxy
section for major details.
2)
Using the Save Remote functionalities:
The Save Remote functionalities
is very useful when you need to edit a document, and make feel your
users that they are using any word processing application. Using the
Save Remote functionalities they can save the document directly from
the editor by hitting "Save Remote" on the File menu or
if configured properly, they can use the toolbar shortcut icon "Save"
to save the content remotely.
The editor will send the
content to the server as POST data contained in the variable html_content
which is the default name. If you want to change it, you can use the
following parameter:
<PARAM NAME ="variableName" VALUE="htmlcontent">
The URL of the script should be defined in the following parameter:
<PARAM NAME ="saveURL" VALUE="http://your_server_upload_script>
The saveURL parameter should be a fully qualified absolute URL
with http://.. etc. Note that when posting the data to the
server, the applet will not change the page in your browser - it works
exactly as when you save a file to your local computer with the difference
that it sends it remotely. If there occurs an error, error message
will be displayed, otherwise on the status bar will appear " File
saved successfully".
<PARAM NAME ="embedAllImagesInsideTheDocument" VALUE="true|false">
- will instruct the editor to automatically embed all images
inside the document and create a self contained HTML document with
inline Base 64 encoded images. This way it is very easy to transfer the
whole document as a string and avoid uploading all images
separately.
This approach is very useful
for example when you need to edit a complex document and also you
using the external window editor mode. This way you will feel as using
any normal word processing application, because at the end of the
editing it will be sufficient to hit the "Save" icon or "Save
Remote" menu item and simply close the window when "File
Saved Successfully" message appears.
For advanced configuration
you may use the following additional parameters.
<PARAM NAME="useSaveAsSaveRemote"
VALUE="true|false"> -
this will cause all buttons/menus for save to have the behavior of
"Save Remote" functionality. This way also the shortcut
on the toolbar ("the save floppy icon") can be used to save
the content of the editor remotely. The default is false.
<PARAM NAME="saveEntireFile" VALUE="true|false">
- this parameter specifies whether the
"Save Remote" functionality should send entire HTML files
(including <html><head><body> tags) or should send
only the body content as a page fragment.
Server
side scripts for receiving the posted from the editor content
1.) ASP/.Net example -
This a simple script which will receive the html content posted from
the editor and will save it in a file on the server. In this example
we presume that the content will be posted in the variable "htmlcontent"
. The received content will be saved to a sample file test.htm in
the directory specified in the variable saveDirVar
<%@ Language=VBScript
%>
<%
Dim saveDirVar
saveDirVar= "c:\Inetpub\wwwroot\saveremote"
Dim fso, fileName, testFile
Set fso = Server.CreateObject("Scripting.FileSystemObject")
fileName = saveDirVar & "\test.htm"
Set testFile = fso.CreateTextFile(fileName,
true)
testFile.WriteLine(Request.Form("htmlcontent"))
testFile.Close
%>
2) PHP example -
This a simple script which will receive the html content posted from
the editor and will save it in a file on the server. In this example
we presume that the content will be posted in the variable "htmlcontent".
The received content will be saved to a sample file test.htm
<?php
$result=$HTTP_POST_VARS["htmlcontent"];
$f_name="test.htm";
$fp=fopen($f_name,"w");
fwrite($fp,stripslashes($result));
fclose($fp);
?>
3) ColdFusion example
-
This a simple script which will receive the multipart content posted from
the editor and will save all the files on the server. Note that the
applet will name the files as form fields in the following manner:
sferyxFileUpload0,sferyxFileUpload1,sferyxFileUpload2 etc.
<cfset uploadPath = GetDirectoryFromPath(GetTemplatePath()) & "uploads\">
<cfif not DirectoryExists(uploadPath)>
<cfdirectory action="create" directory="#uploadPath#">
</cfif>
<cfset numberoffields = 10>
<cfloop index="i" from="0" to="#variables.numberoffields#" step="1">
<cfset filename = "form.sferyxFileUpload" & #i#>
<cfif isDefined(variables.filename) and variables.filename neq "">
<cffile action="upload" fileField="#variables.filename#" destination="#uploadPath#" nameConflict="MakeUnique">
</cfif>
</cfloop>
<cfoutput>
<h1>Done!</h1>
</cfoutput>
2)
Using the Upload Multipart content functionalities
As first step consult the
section Using
the Save Remote functionalities.
Configuring the editor for
use of the uploading of multipart content is fairly simple. In order
to use the upload you should do the same configuration as for the
Save Remote functionality, but in addition you should specify the
following parameters:
<PARAM NAME = "uploadContentAsMultipartFormData"
VALUE="true"> - this will force the editor to post Multipart content
data to the server instead of simple post data. It will include all
images and hyperlink targets which should be uploaded.
<PARAM NAME = "uploadedObjectsTranslationPath"
VALUE="http://server_path_to_the_uploaded_images">
- this is the translation path on the server which will be used
to transform the local paths in server-side paths. You should provide
values in according to your needs and the structure of your web application.
You should provide the adequate
server-side scripts for receiving the uploaded content. Here below
you can find a simple PHP script for receiving the uploaded content:
-
PHP example
for receiving
the uploaded content:
This example will save
all the uploaded files in a directory called ../images. Please change
this values to reflect your directory structure.
<?php
//Uncomment this if
you want to see the variable dump
//phpinfo();
//This is the directory where all the files and images will be
uploaded
$uploadDirectory="../images/";
//This is the directory where the content of the document will
be saved
$contentDirectory="../";
//Indicates whether the content of the document should be saved
in a file
$saveContent=true;
//The name of the variable containing the file name where document
content should be saved
$fileNameVar="filename";
//The name of the variable where the document content is contained
$htmlContentVar="htmlcontent";
foreach($_FILES as $file)
{
$array_path=explode('/',$file['name']);
$arraySize=count($array_path);
//will take only the
file name without the enitre local path
$fileNameOnly=$array_path[$arraySize-1] ;
copy($file['tmp_name'], $uploadDirectory.$fileNameOnly);
}
//Saving the content if enabled
if($saveContent)
{
$result=$HTTP_POST_VARS[$htmlContentVar];
$f_name=$HTTP_POST_VARS[$fileNameVar]; // if this
variable is specified somewhere in the form
$fp=fopen($contentDirectory.$f_name,"w");
fwrite($fp,stripslashes($result));
fclose($fp);
}
?>
- ColdFusion example
-
This a simple script which will receive the multipart content posted from
the editor and will save all the files on the server. Note that the
applet will name the files as form fields in the following manner:
sferyxFileUpload0,sferyxFileUpload1,sferyxFileUpload2 etc.
<cfset uploadPath =
GetDirectoryFromPath(GetTemplatePath()) & "uploads\">
<cfif not DirectoryExists(uploadPath)>
<cfdirectory action="create" directory="#uploadPath#">
</cfif>
<cfset numberoffields = 10>
<cfloop index="i" from="0" to="#variables.numberoffields#" step="1">
<cfset filename = "form.sferyxFileUpload" & #i#>
<cfif isDefined(variables.filename) and variables.filename neq "">
<cffile action="upload" fileField="#variables.filename#"
destination="#uploadPath#" nameConflict="MakeUnique">
</cfif>
</cfloop>
<cfoutput>
<h1>Done!</h1>
</cfoutput>
-
ASP /.Net example - you
can use the editor in combination with any of the commercial or free
ASP upload components. Here is a simple example which illustrates
how to save the page content and all the files sent with the multipart
request.
<%@ Page ValidateRequest="false"%>
<script runat="server">
Sub Page_Load
Dim resultMessage As String = "file uploaded successfully"
Dim fileName As String = "file.jpg"
Dim folderName As String
Dim fileObject As HttpPostedFile
Dim i As Integer
folderName = Server.MapPath(".") & "\"
'Saves the html content sent along with the uploaded files
writeContent()
'Saves all the uploaded files
Try
For i = 0 To Request.Files.Count - 1
fileObject = Request.Files(i)
fileName=Request.Files(i).FileName
fileName=fileName.Replace("\" , "/")
fileName=fileName.Substring(fileName.LastIndexOf("/")+1)
fileObject.SaveAs(Server.MapPath(".") & "\" & i & fileName)
resultMessage = fileName
Next
Catch errorVariable As Exception
resultMessage = errorVariable.ToString()
End Try
messageLabel.Text = resultMessage
End Sub
Sub writeContent()
Dim loop1 As Integer
Dim arr1() As String
Dim coll As NameValueCollection
Dim fso, fileName, testFile
Dim folderName As String
folderName = Server.MapPath(".") & "\"
fso = Server.CreateObject("Scripting.FileSystemObject")
fileName = folderName & "content.html"
testFile = fso.CreateTextFile(fileName, true)
coll=Request.Form
arr1 = coll.AllKeys
For loop1 = 0 To arr1.GetUpperBound(0)
testFile.WriteLine(coll.GetValues(arr1(loop1))(0))
Next loop1
testFile.Close
End Sub
</script>
<html>
<body>
<form runat="server">
<h3><asp:label id="messageLabel" runat="server" /></h3>
</form>
</body>
</html>
- Perl
examples - Here
is a simple example which illustrates how to save the page content and
all the files sent with the multipart request.
#!/usr/bin/perl.exe
use strict;
use CGI;
my $cgi = new CGI;
########################
# General Variables #
########################
my (%Form);
#############################
# Save the conten variables #
#############################
my @keys = $cgi->param();
print "Content-type: text/html\n\n";
open(FILE, ">>dump.txt");
foreach my $key(@keys)
{
$Form{$key} = $cgi->param($key);
if($key=~/^sferyxFileUpload/)
{
file_upload($key,$Form{$key});
}
print "$key->$Form{$key}<br>";
print FILE "$key->$Form{$key}\n";
}
close(FILE);
#############################
# Save the uploaded files #
#############################
sub file_upload
{
my $upload_dir = "C:/uploadedFiles";
my ($uploadVarName, $filename)=@_;
$filename =~ s/.*[\/\\](.*)/$1/;
my $upload_filehandle = $cgi->upload($uploadVarName);
open UPLOADFILE, ">$upload_dir/$filename";
binmode UPLOADFILE;
while ( <$upload_filehandle> )
{
print UPLOADFILE;
}
close UPLOADFILE;
}
- JSP examples -
Here is a simple example which illustrates how to save the page
content and all the files sent with the multipart request.
<%@ page contentType="text/html;charset=windows-1252"%>
<%@ page import="org.apache.commons.fileupload.DiskFileUpload"%>
<%@ page import="org.apache.commons.fileupload.FileItem"%>
<%@ page import="java.util.*"%>
<%@ page import="java.io.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Process File Upload</title>
</head>
<body>
<%
out.print("Content Type ="+request.getContentType()+"<br>");
try
{
DiskFileUpload fu = new DiskFileUpload();
// You can set some file size limit here...
fu.setSizeMax(1000000);
List fileItems = fu.parseRequest(request);
Iterator itr = fileItems.iterator();
int i=0;
while(itr.hasNext())
{
FileItem fi = (FileItem)itr.next();
//Print out some debug info about file items
if(!fi.isFormField())
{
out.print("NAME: "+fi.getName()+"<br>");
out.print("SIZE: "+fi.getSize()+"<br>");
//Save the file somewhere - you can handle the path as you like...
File fNew= new File(application.getRealPath("/"), "upload_"+i+".txt");
out.print("FILE PATH: "+fNew.getAbsolutePath()+"<br>");
fi.write(fNew);
i++;
}
//The rest of the form fields are printed here
else
{
out.print("Form Field Name="+fi.getFieldName()+"Value="+fi.getString()+"<hr>");
}
}
}
catch(Throwable exc)
{
exc.printStackTrace();
}
%>
</body>
</html>
13.
Translating the user interface
Translating the user interface
is easy and fast - it is sufficient to translate the sample language
file supplied and specify the following applet parameter pointing
to the translation to be loaded.
<PARAM NAME="loadInterfaceLanguageFile"VALUE="http://yourhost/german.txt">
- If this parameter is specified,
the editor will load upon startup the language file and will initialize
the entire user interface with the new language setting. This way
the editor interface can be localized in any language as needed. See
the supplied "sample-german-translation.txt" file as an
example for the format of the UI language files.
If you see some labels missing
you simply can add the translation in the language file respecting
this simple rule:
Convert the text in English in lowercase and replace the whitespaces
with "_" . This way add new entry in the language file with
the correct translation.
Example:
Label "Find what" - should be added an entry like this:
find_what=your translation in your language
Also for the "Whole words only"
whole_words_only=your translation in your language
Upon request we can supply
to our customers translations in French, German, Spanish, Italian
and also other languages. In case you need specific language, you
may contact us at support@sferyx.com
.
14.
Adding external style sheets
You can easily import external
style sheets to be used for rendering of the content using the parameter
below:
<PARAM NAME ="externalStyleSheetLocation"
VALUE="http://yourhost/YourStyleSheetFile.css"> -
Indicates the URL of the style sheet file (css) to be loaded. If this
parameter is indicated, then the style sheet will be loaded and added
to the document. All the class names will be parsed and will be available
for browsing through the style combo boxes on all property dialogs.
See the following CSS file format guidelines:
In order to achieve best
rendering results please use only separate selectors such as the following:
body {color: #000; font-size:
10px; font-family: verdana,sans-serif, arial,sans-serif, Helvetica, sans-serif; text-decoration:
none }
td {color: #000; font-size: 10px; font-family: verdana,sans-serif, arial,sans-serif,
Helvetica, sans-serif; text-decoration: none }
p {color: #000; font-size: 10px; font-family: verdana,sans-serif, arial,sans-serif,
Helvetica, sans-serif; text-decoration: none }
.text {color: #000; font-size: 10px;}
The majority of the standard
style sheets will be rendered correctly. Once imported, the style
classes will be parsed and will appear on the style combo boxes. The
Enterprise Edition has extended style sheet support which includes
style combo boxes on all property windows - for applying styles to
tables, table cells, form elements, images etc. The Light and Professional
versions include basic style sheet support for applying styles only
to text.
15.
Setting a read-only sections within the documents
You can mark sections of
the document as read-only simply putting a readonly attribute like
this:
<p readonly="true">
...some content
</p>
or
<div readonly="true">
...some content
</div>
or
<table readonly="true">
...some content
</table>
Note that the attribute
readonly="true" should be specified in lowercase.
All page elements containing
such an attribute will be treated as read-only and thus not editable.
Enabling
text folding features:
If you would like to enable
text folding on a certain document elements, you will need to add the
following attributes:
<div textfolding="true"
initialstate="collapsed | expanded"><h1>Some
heading</h1>
<p>The rest of the text here</p>
</div>
About
the browse and save buttons
Due to the security restrictions for
the applets, when used as normal applet the browse and save buttons
and menu items are disabled since are used to open, browse files on
the local computer. For browsing remote locations are used "Open
location" and "Save remote" menu items on the File
menu. If the HTMLEditor is used as signed applet within an intranet
or on an internet site and the user grants the requested permissions
all the menu items become available and the HTMLEditor can be used
for example as an unified editing solution within an organization
installed on the LAN server and accessed from unlimited number of
clients.
Our
Services and assistance
All Sferyx products are
assured with continuous e-mail support. With the retail products is
included in the price 30 days startup support. Additionally, you can
purchase annual support subscription tickets from our web store.
Sferyx offers also a wide
range of customization services for its products in order to satisfy
any customer requirement. We can adapt our products to fit the customer
needs and any kind of integration requirements. We execute also express
developments, customization under request, development of new features
on demand. You can request a quote at sales@sferyx.com
or support@sferyx.com indicating
your requirements and the terms of delivery.
