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 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.
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">
- Specifies the name
of the variable to be used for the content of the editor when using
the POST method. If not specified the default name is 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. If you need to specify only resolving of images inserted
through the RemoteFileDialog, please consider for this the parameter
remoteFileDialogAbsoluteImageTranslationURL
which
has the same functionality, but applies only for the remote file dialog.
<PARAM NAME ="
remoteFileDialogAbsoluteImageTranslationURL
" VALUE="http://yourhost/your_htmlfiles/">
- Specifies the translation path
to be used to resolve the relative URLs of images, hyperlinks etc, inserted
through the RemoteFileDialog. For difference from the absoluteDocumentTranslationURL
this parameter will not affect
the entire document, but only elements inserted through the RemoteFileDialog.
<PARAM NAME ="initialURL" VALUE="http://yourhost/anypage.htm">
- Specifies the initial
page opened inside the editor if needed. If this parameter is not specified
than blank page is created.
<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,Arial,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"> -
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">
- Specifies the background color
of the button
<PARAM NAME ="buttonFgColor" VALUE="0x000000">
- Specifies the background color
of the button
<PARAM NAME ="buttonText" VALUE="Start the Visual
Editor">
- Specifies
the text on the button
If the applet runs in the embedded
mode this parameters are simply ignored.
<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 comply 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">
- that means that all buttons on the page passed will be treated as
file entries and the value contains the URL of the image that should
be inserted or the target for hyperlink depending on which operation
we are executing - insert image, insert hyperlink or open file. You
can see the example page here.
You can find on-line demo demonstrating the remote file browsing in
action here: http://www.sferyx.com/htmleditorapplet.
If you encounter any difficulties to accomplish this task you can contact
support@sferyx.com for assistance.
<PARAM NAME ="remoteLinksBrowseLocation"
VALUE="http://yourhost.com/YourHyperlinkBrowserScript">
- Indicates the URL of the page that
should be loaded when using remote hyperlink browsing. If you want to
be able to insert hyperlinks through the remote file browser dialog, the output
from the server should comply 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">
- that means that all buttons on the page passed will be treated as
file entries and the value contains the URL of the image that should
be inserted or the target for hyperlink depending on which operation
we are executing - insert image, insert hyperlink or open file.
<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, Arial, Helvetica, sans-serif; text-decoration:
none }
td {color: #000; font-size: 10px; font-family: Verdana, Arial,
Helvetica, sans-serif; text-decoration: none }
p {color: #000; font-size: 10px; font-family: Verdana, Arial,
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;
fontStrikethroughButton - the strikethrough button on the
toolbar.
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
spellCheckerButton - the button for the spellchecker
spellCheckerAYTButton - the button for the As-You-Type
spellchecker
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
placed 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 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.
<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 preferred
paste operation will be used as a default paste operation 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 styles instead of the class names, resulting
in a more user friendly display 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">
- some SAKAI related features, allows
equation file naming rules to be allowed manually for each equation.
<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">
- indicates that pixels should be used
as units for font sizes inside the font combobox on the toolbar.
<PARAM NAME="maxFileUploadSize" VALUE="number
or 20M or 20Ke">
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.
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)
-inserts
html content inside the editor without erasing the rest of the document.
The new content is inserted at the current caret position
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() -
sends
the content of the HTMLEditor using method POST to the server script
specified in the applet parameter 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.
public 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 previosly 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
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">
- that means that all buttons on
the page passed will be treated as file entries and the value contains
the URL of the image that should be inserted or the target for hyperlink
depending on which operation we are executing - insert image, insert
hyperlink or open file. You can see the example page here.
You can find on-line demo demonstrating the remote file browsing in
action here: http://www.sferyx.com/htmleditorapplet.
If you encounter any difficulties to accomplish this task you can contact
support@sferyx.com for assistance.
displaylabel -
can
be used to display the text of the link to be visualized if different
from the link URL.
defaultlink -
can be used as a default
link URL for inserting into the editor.
<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">
- that means that all buttons on the page passed will be treated as
file entries and the value contains the URL of the image that should
be inserted or the target for hyperlink depending on which operation
we are executing - insert image, insert hyperlink or open file. You
can see the example page here.
You can find on-line demo demonstrating the remote file browsing in
action here: http://www.sferyx.com/htmleditorapplet.
If you encounter any difficulties to accomplish this task you can contact
support@sferyx.com for assistance.
displaylabel -
can
be used to display the text of the link to be visualized if different
from the link URL.
defaultlink -
can be used as a default
link URL for inserting into the editor.
<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. If you need to specify only resolving of images inserted
through the RemoteFileDialog, please consider for this the parameter
remoteFileDialogAbsoluteImageTranslationURL
which
has the same functionality, but applies only for the remote file dialog.
<PARAM NAME ="
remoteFileDialogAbsoluteImageTranslationURL
" VALUE="http://yourhost/your_htmlfiles/">
- Specifies the translation path
to be used to resolve the relative URLs of images, hyperlinks etc, inserted
through the RemoteFileDialog. For difference from the absoluteDocumentTranslationURL
this parameter will not affect
the entire document, but only elements inserted through the RemoteFileDialog.
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 hyperlinks 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.
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://www.sferyx.com/htmleditorapplet/demo/form_dump.php">
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 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>
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 .
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, Arial, Helvetica, sans-serif; text-decoration:
none }
td {color: #000; font-size: 10px; font-family: Verdana, Arial,
Helvetica, sans-serif; text-decoration: none }
p {color: #000; font-size: 10px; font-family: Verdana, Arial,
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.
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.