CapeSoft File Explorer feHtmlEditor
Documentation

• The feEditor Class
  • Getting Started (important)
  • Distribution and required files (important)
  • Customizing the editor and toolbar
  • Examples (recommended)
  • Class Methods
  • Class New Methods
  • Class Properties
• The Templates
  • Overview
• Quick Guides
  • Loading a file when the editor starts
  • Saving the HTML to disk
  • Retrieving the HTML from the editor as a string (and retrieving the text version)
• Useful References
  • Callbacks and Event Handling
  • Editor Use and Accessibility
  • Using the HTML editor in Windows Vista

Getting Started (Important)

Distribution

Important: The FeEditor requires that you ship the various Editor files with your application. Place these in the Data directory of your application by default. these files can be found in one of the following locations;

\Examples\FileExplorer\Editor Files
\Clarion9\Accessory\Libsrc\Win\FileExplorer Editor Files
\Clarion8\Accessory\Libsrc\Win\FileExplorer Editor Files
\Clarion7\Accessory\Libsrc\Win\FileExplorer Editor Files
\Clarion6\3rdparty\Libsrc\FileExplorer Editor Files

By default File Explorer will look for these files in the "current folder" when your application runs.
you can also set a specific location for the files by using the  feEditor.editorPath property. If you set this before the call to  feEditor.Init() then it will use the path you specify.

Be sure to copy both the feeditor.html file and the feeditor subfolder. Both are required for the HTML editor to work properly.

File Explorer ships with a "complete" editor, including all the functionality and languages offered by the CKEditor product. Advanced users may prefer to build their own set of files using the CK Builder online tool. This is especially true if you want to reduce the plugins, or languages being used. If you do create your own download then the following items will be of interest;

The feeditor.html file contains the name of the skin being used. If your download includes different skins then make sure the feeditor.html file contains a valid skin name.

The feeditor\plugins\image\dialogs\image.js file has been customized in File Explorer, and it should be used in place of the one you download.

the feeditor\open.gif file is added by File Explorer. It won't be in your download, but don't delete the existing file.

The editor provides a great deal of flexibility, and is simple to customize.

How to Change the order (or hide) buttons in the toolbar

This is done in the feeditor.html file.
Open the feeditor.html file in a text (or html) editor. The section that you're after is this one:

toolbar :
[
['Open','Save','NewPage','Source', 'Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print'],
['Undo','Redo','-','Find','Replace','-','Link','Unlink','Anchor'],
'/',
['Italic','Bold','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','Flash','Table','HorizontalRule','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['SelectAll','RemoveFormat', 'ShowBlocks']
],

This displays as:



You will notice that each button is encapsulated in single quotes, so the Open button is first with 'Open'. To remove the NewPage button, simply remove it from the list as follows:

['Open','Save','Source', 'Preview','-','Templates'],

Now our toolbar will be missing the NewPage button:

To split the toolbar into an additional row, simply add the '/' in the correct place:

['Italic','Bold','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
'/',
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','Flash','Table','HorizontalRule','SpecialChar','PageBreak'],

To use the full toolbar, change:

toolbar :

To:

other_toolbar :

And change:

full_toolbar :

To:

toolbar :

You will then be able to use all the toolbar buttons available in the CKEditor:

How to change the menu

The Editor menu is included in your application, and can be edited like a normal Clarion menu:

through the window formatter.

Similarly, to change the file | Save As file types, you can change this in the filedialog in the source code. So if you want to remove the EML and MHT options, simply do so as follows:

 if FileDialog('Save File As..', fileName, 'Web Page (HTML)|*.htm;*.html|Text Only|*.txt', File:Save + File:LongName + 080H)
    HtmlEditor.SaveAs(fileName)
end

Additional ways to change the Initial Editor Settings

All the settings for the editor are defined in the feeditor.html file (this is found in the examples\FileExplorer\Editor Files folder). This makes customizing the editor, adding plugins, modifying the toolbar and so on as simple and self contained as possible.

In CKEDITOR.replace() all the settings are defined, and can be modified as needed. In the example below we are going to add a setting to cause the toolbar to display as collapsed rather than expanded when the editor starts up.

Each setting is made up of the setting name, a colon, and the value for the setting, such as:

extraPlugins: 'Open',

Where extraPlugin is the name of the setting and the value is "Open". For strings the setting is enclosed in single or double quotes, for booleans and number values no quotation marks are needed. For settings that take an array of values, the values are separated by commas, and the array is started and ended with a square bracket (see the contentCss option below).

In our example below, we add the toolbarStartupExpanded option to the existing options:
customConfig : '', // Ensure no external config file is load. All customization is done here
extraPlugins: 'Open', // Add all custom plugins to this list (comma separated string)
skin: 'moono',
uiColor:'#DDDDDF',
toolbarStartupExpanded: false // Add this option to change the toolbar initial state

Just add the comma after the last setting, and then add your own settings. You can add as many as you like, they are just comma separated. NOTE: Make sure you don't use a space though, just a comma when using multiple plugins.

Useful editor settings and customization options

Directly below the currently used setting there is a section that is commented out that contains a variety of other useful settings that you can enabled:

baseHref: './',
contentsCss: ['/css/mysitestyles.css', '/css/anotherfile.css'],
fullPage: true, // Whether a full page is being edited, or an HTML snippet
newpage_html: '<p>Type your text here.</p>', // initial HTML
shiftEnterMode: CKEDITOR.ENTER_P, // CKEDITOR.ENTER_BR or CKEDITOR.ENTER_DIV
enterMode: CKEDITOR.ENTER_BR, // CKEDITOR.ENTER_BR or CKEDITOR.ENTER_DIV
startupMode: 'source',
startupOutlineBlocks = true,
tabIndex = 1,
tabSpaces = 4,
templates = 'my_templates',
templates_files =
[
 '/editor_templates/site_default.js',
 'http://www.example.com/user_templates.js'
],
theme: 'default',
templates_replaceContent: false, // or true
toolbarCanCollapse: false, // or true
toolbarStartupExpanded: true, // or false
toolbarLocation: 'top', // or 'bottom' 'left' 'right'
undoStackSize: 50, //number of undos

Toolbars and toolbar customization

The feeditor.html file contains three toolbars, which are named:

toolbar
full_toolbar
min_toolbar
 
Any toolbar named "toolbar" will be used as the default, and the others will be ignored. You can add as many toolbars as you like, as simply renamed the one that you wish to enable, "toolbar", and name the others anything that you prefer.

For example you can switch between the standard toolbar and one of the others simply by renaming the toolbar that you want to use to "toolbar", and the changing the one that was previously used to "_toolbar", or anything else for that matter. You can fully customize these toolbars as you need. The format for the toolbars is very simple:

1. Each button name is wrapped in single quotes
2. Buttons are separated by commas
3. Each set of buttons is an array, wrapped by squared brackets. Each array has a comma before the next one
4. You can add a divider between buttons using '-' as an entry in the button list.
5. You can split rows on the toolbar by adding '/' between the array entries.

The main toolbar is a good example:

    toolbar :
    [
     ['Open','Save','NewPage','Source', 'Preview','-','Templates'],
     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print'],
     ['Undo','Redo','-','Find','Replace','-','Link','Unlink','Anchor'],
     '/',
     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
     ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
     ['Image','Flash','Table','HorizontalRule','SpecialChar','PageBreak'],
     '/',
     ['Styles','Format','Font','FontSize'],
     ['TextColor','BGColor'],
     ['SelectAll','RemoveFormat', 'ShowBlocks']
    ],

You can move and arrange buttons as needed, for example the minimal toolbar has most buttons removed, and the rest merged into a four groups on one line:

    min_toolbar :
    [
     ['Undo','Redo', '-', 'Bold','Italic','Underline'],
     ['NumberedList','BulletedList','-','Link','Unlink','Anchor'],
     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
     ['Format','Font','FontSize', '-', 'TextColor','BGColor'],
    ],

The toolbars themselves are actually part of a comma separated list of options, hence they end with a comma before the next setting.

The "Open" button is an example of how simple it is to add you own buttons and "plugins":

1. Add a new button to the toolbar
2. In the extraPlugins setting just below the toolbar add the name of your button (again, this is just a comma separated list of plugins, no spaces). So Open would become: Open,MyPlugin,SpecialButton, and so on.
3. Find the Custom Plugins section further down in the file. This is where we add the logic for the plugin.
4. There are two sections:
   • The call to CKEDITOR.plugins.add(), which adds the plugin and;
   • The callback (event handler) function (open_onclick(e) in the case of the Open button, which can be named anything that you prefer).
5. By default you don't need to add any code to the callback (event handler) at all. FileExplorer will automatically call the TakeEvent method with the name of the button that was pressed (the PreTakeEvent method will also be called before the JS code executes). To test for your new plugin event, test the evt string with the name of the plugin - and in that case statement, call your clarion procedure (or perform the function you require).
6. You can call your button/plugin simply by passing the feEditor.CallCommand() method the name of your plugin.

For example, let's add a plugin called "Widget".

Add Our toolbar button by adding

// Custom Widget button
CKEDITOR.plugins.add('Widget',{
  init:function(a)
  {
    var cmd = a.addCommand('Widget', {exec:widget_onclick})
    cmd.modes = {wysiwyg:1, source:1}
    cmd.canUndo = false
    a.ui.addButton('Open',{ label:'Run a Widget...',command:'Widget',icon:'Widget.gif' }) 
})

function widget_onclick(e){
    // No code is needed here for the default functionality
}

Demo

The main Demo example demonstrates the bulk of the functionality provided by FileExplorer, including the HTML editor provided by the feEditor class. See the feHtmlEditor_MainExample procedure.

MailMerge (recommended)

A new example application that demonstrates the editor, as well as a variety of techniques for using the editor, and creating simple mail merge style functionality:

• Using the new FeEditor class for HTML editing.
• Loading from memory or disk directly after the editor has finished initialising.
• Retreiving the HTML contents from the editor, setting the content of the editor, and dynamically allocating memory for retrieving the contents of the editor.
• Inserting text into existing HTML documents.
• Dynamically populating a list with fields from any table using Who() and What().
• Dynamically locating fields in a table by name, and retrieving the values of field in a table.
• Replacing the inserted place holders with the actual fields values.
• Writing a modified HTML document back to disk as a new file.
• Using the feFile generic file handling class.
• Displaying HTML documents on a new thread using the feBrowser class.

NetTalk

A simple HTML editor for creating and sending emails using CapeSoft NetTalk.

Quick Reference
Method	Description	Beta Notes
Edit	The Edit command, allows Copy, Paste, Cut etc. to be performed	Not fully backward compatible
GetHtmlGraphicsInfo	Retrieves the list of images used in the document (use EmbedImages instead of this method).	Supported, and enhanced by the new EmbedImagesmethod
GetInfo	Retreives properties of the document and control	Supported, some properties may be deprecated or unsupported
HideControl	Hides the control
Init	Intialises the object and control
InsertHtml	Inserts HTML into the control	Supported
InsertTable	Inserts a table into the HTML	In progress
InsertText	Inserts text into the control	Needs testing
KeyPressed	Detects a key press	Not tested
Kill	Cleans up and destroys the control
Load	Loads a document
NewDocument	Creates a new (blank document)	In progress (can be done simply by blanking the HTML)
PrintMe	Prints the document	Needs testing and possibly additional support
Reload	Reloads the document
Save	Saves the document
SetFocus	Sets the focus to the control	In progress, this is vastly improved in the new version
Settings	Allowed the background color to be set in the old editor, provides access to all document properties in the new editor.	In progress
UnhideControl	Unhides the control and refreshes the display
Update	Updates the properties of the document and control. The new editor will provide methods for doing this directly for each property.	Supported, some properties still need to be added.
New Methods
BeforeEditorInit	Called when the control and editor have both loaded, but before the editor is initialised.
BeforeEditorLoad	Called when the control has loaded,but before the editor has loaded.
CallCommand	Provides the ability to call any of the commands available to the underlying editor, including any of the toolbar buttons, plugins etc.
CollapseToolbar	Collapses the editor toolbar
Debugging	Enables or disabled debug logging and error messages displayed
Log	Outputs a string to the debug log
ErrorTrap	Called class methods to indicate an error or warning
GetHtml	Returns the HTML of the edited page
GetText	Returns the plain text version of the document being edited
GetPageTitle	Returns the title of the edited page	Not implemented
EditorReady	Called by the object to indicate that the editor has loaded and is ready to be used
EmbedImages	Embeds the images and returns a string containing a comma seperate list. Replaces and enhances the GetHtmlGraphicsInfo method.	Updated
ExpandToolbar	Expands the editor toolbar
IsReady	Returns whether the editor is fully loaded and ready to be used
Load	Loads document
PreTakeEvent	Identical to TakeEvent, but called with the event before it is actually processed
Revert	Reverts the document to the version of disk
SetHtml	Sets the HTML content of the current document
SetPageTitle	Sets the title of the page	Not Implemented
ReplaceInString	Replaces one or all occurances of a substring with the specified string
SetFileName	Sets the filename used by the editor, typically not called manually.
SetSkin	Sets the skin for the editor, must be called from BeforeEditorLoad. Cannot be done once the editor has loaded.	Not implmented in the class in 5.20 Beta -  this is provided in the feeditor.html file itself.
TakeEvent	Event handling, allows all events provided by the editor to be trapped

Debugging

Log

ErrorTrap

GetText

GetHtml

GetPageTitle - coming soon

EmbedImages

Load

Revert

SetHtml

SetPageTitle - coming soon

ReplaceInString

IsReady

SetFileName

SetSkin

CallCommand

CollapseToolbar

ExpandToolbar

_EventCallback

EditorReady

BeforeEditorInit

BeforeEditorLoad

Edit

GetHtmlGraphicsInfo

GetInfo

HideControl

Init

InsertHtml

InsertTable

InsertText

KeyPressed

Kill

NewDocument

PrintMe

Reload

Save

SetFocus

Settings

UnhideControlontrol

Update

active byte	This property is deprecated and should not be used. Use the EditorReady() callback method to determine when the editor is ready for use, or check the .editorReady property, which is set when EditorReady() is called and the editor has completed initialisation and is ready for use. The .editorReady property can be checked directly, or by calling IsReady().
browser byte	No longer supported.
currentPath string	The full path (including filename) of the file currently loaded. If no file has been loaded, or a new document is being edited that has not been saved, then this is blank. This property should not be set directly, typically this property will be set automatically by the Load and Save filenames, however it can be overridden by calling SetFileName, which sets all the path properties of the object based on the passed file name.
debugging long	Enables or disables debug output. See the ErrorTrap(), Log() and Debugging() methods.
editorPath string	The path to load the editor from. By default this is the current application directory. Setting the .editorPath property overrides the default location that the feEditor.html file is loaded from an allows the editor to loaded from any location. The editorPath string should be set to the full path that contains the feEditor files. This value must be set before the call to the feEditor.Init() method in order to have any effect. Examples: htmlEditor.editorPath = 'C:\ProgramData\Company\MyApp' htmlEditor.Init()
fileName string	The file name only, excluding the path
filePath string	The path to the document (without the file name), if a document is loaded by specifying a file name without a path then the current application path is used. This property has URL style forward slashs (/) for Windows style slashes use the pagePath property
pagePath string	The document path, but with normal Windows style backslashes (\)
docInnerText cstring	Same as the InnerText property, but this property holds the InnerText component for the whole document, not just the currently selected portion. Use this property if you're wanting the "text" from an entire html page. Refreshed using the GetInfo method.
initialDocument string	The intial document to load into the editor when the EditorReady method fires. This can be set directly at any point before of after calling the Init() method (but before EditorReady is called), or the Load() method can be called, and if the editor is not ready, it will set the initialDocument property to the requested file, and load it when the editor has intialised and is ready. Examples: htmlEditor.initialDocument = 'C:\ProgramData\Company\MyApp\start.html' htmlEditor.Init()
innerHtml cstring	Holds the HTML for the selected object, between the start and end tags. See the GetInfo and Update methods.
innerText cstring	Holds the text for the selected object, between the start and end tags. See the GetInfo and Update methods.
editorReady long	Whether the editor is ready for use or not. Can also be retrieved by calling the IsReady() method When the editor intialises it does so in two stages.First the actual control is intialised, and then the editor is loaded. Once the control has loaded it calls the BeforeEditorLoad() method. Once the editor is loaded, but before it intialises, the BeforeEditorInit() method is called and finally the EditorReady() method is called to indicate that the loading is complete. This allows code to be added in each stage of the loading process. The editor is then loaded and once complete the .editorReady property is set to 1 and the EditorReady() callback method is called. Methods that interact with the editor cannot be called before the EditorReady() callback is called and the isReady property is set to 1.
outerHtml cstring	Use the GetHtml() method to retrieve the HTML source. Holds the selected (html) object's html content See the GetInfo and Update methods.
outerText cstring	Holds the selected (html) object's text content See the GetInfo and Update methods.
pageTitle cstring	Not supported in the current version, will be replaced by the GetPageTitle() method. Holds the title of the page being displayed. See the GetInfo method.
picAlign cstring	Not supported in the current version Holds the "Alignment" setting for the currently selected image in an html document. Use the GetInfo and Update methods.
picBorder byte	Not supported in the current version Holds the "Border" width for the currently selected image in an html file. Use the GetInfo and Update methods. (Setting the border to 0 will result in the image having no border).
picHSpacing byte	Not supported in the current version Holds the "Horizontal Spacing" setting for the currently selected image in an html file. Use the GetInfo and Update methods.
picVSpacing byte	Not supported in the current version Holds the "Vertical Spacing" setting for the currently selected image in an html file. Use the GetInfo and Update methods.
picSource string	Not supported in the current version Holds the source (web url or filename) for the currently selected image in an html file. Use the GetInfo and Update methods.
picText string	Not supported in the current version Holds the "Alternate Text" (the text that displays when you point at the image, and/or if the image fails to load) for the currently selected image in an html file. Use the GetInfo and Update methods.
rootFolder string	This has been deprecated as the GetHtmlGraphicsInfo method has been replaced by the enhanced EmbedImages() method. See EmbedImages().
source cstring	Use the GetHtml() method to retrieve the source rather than this property. Holds the html component (source / text) of the loaded page. See the GetInfo and Update methods.
tagName string	Not supported in the current version Holds the Tag Name of the selected object (e.g. "STRONG", "FONT", "A").  See the GetInfo method.
url string	Replaces by the filePath property.

At this time there is quite an overlap in terms of multiple File Explorer classes being implemented by the same templates. In the future we may revisit this, but for now all templates are covered in the main (FileExplorer.htm) help document, please click here.

1. Loading a document at startup or creating a blank document

Use the EditorReady callback method for any code that needs to be called as soon as the editor is ready for use. Note that you cannot call any of the editor methods until EditorReady has been called (the editor initialization happens in the background when the Init method is called - it is asynchronous).

In the Editor.EditorReady() method:

if Exists(myFileName)
    Editor.Load(myFileName)
else
    Editor.NewDocument()
end

 

2. Saving to an HTML file

fileName     string(FILE:MAXFILENAME)
  code
    fileName = 'mypage.html'  ! Can include the full path
    Editor.SaveAs(fileName)

3. Retrieving the HTML (and text) from the editor

htmlData           string(04000h)
textData           string(01000h)
  code
    Editor.GetHtml(htmlData)
    Editor.GetText(textData)

Note that you can also get a plain text version (if you're sending email that contains HTML then sending both the plain text and HTML parts is recommended)

The above example declared two strings of fixed length for retrieving the data, however this limits the amount of HTML that can be retrieved. The GetHtml method returns the size required if the string is not long enough, allowing the string to be dynamically resized:

htmlSource         &string
reqSize            long
  code
    htmlSource &= new string(4096)
    reqSize = HtmlEditor.GetHtml(htmlSource)
    if reqSize > 0
        Dispose(htmlSource)
        htmlSource &= new string(reqSize)
        HtmlEditor.GetHtml(htmlSource)
    end
    Dispose(htmlSource)                        ! Dispose the string when done

FileExplorer 5.20 introduces entirely new event handling for the editor, providing comprehensive handling of the events generated by the editor. FileExplorer provides embeds for each of these callbacks methods to allow you to add code when an event occurs.

BeforeEditorInit()

Called before the editor initialises during the loading process. Can be used to modify settings or file just before the editor uses them.

See the full BeforeEditorInit() document.

EditorReadyrReady()

Called when the editor has completed loading. Used to execute any code that needs to run as soon as the editor is available.

See the full EditorReady() documentation.

TakeEvent(string evt)

Called for all event handling. Allows any events to be trapped and responded to - such as the user pressing toolbar buttons. Receives the name of the event, such as "save", "print", "bold" and so on, including:

'Open', 'Save', 'NewPage', 'Source', 'Preview', Templates'

'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', 'Print', 'Undo', 'Redo', 'Find', 'Replace', 'SelectAll', 'RemoveFormat'

'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'

'Bold', 'Italic', 'Underline',' Strike', 'Subscript', 'Superscript'

'NumberedList', 'BulletedList', 'Outdent', 'Indent', 'Blockquote'

'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'

'Link', 'Unlink', 'Anchor'

'Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'

'Styles', 'Format', 'Font', 'FontSize'

'TextColor', 'BGColor'

'ShowBlocks'

PreTakeEvent(string evt)g evt)

Identical to TakeEvent(), but is called before the JavaScript code actually executes in response to the event. Like TakeEvent(), the string contains the event name.

CKEditor 3 is designed with people who have disabilities in mind. In addition to be usable with a mouse, a keyboard and a monitor; CKEditor is usable with a keyboard and a screenreader as well. JAWS with IE7 and JAWS with Firefox 3 are currently supported.

• 1 Basic Navigation
• 2 Navigating Toolbar
• 3 Navigating Dialogs
• 4 Navigating Context Menus
• 5 Navigating Style Combo Boxes
• 6 Navigating Color Selection Boxes
• 7 Editor Hotkeys
• 8 JAWS

Basic Navigation

• Tab and Shift+Tab
  To move into and out of the editor among other form elements, press tab and shift+tab. On supported browser and screenreader combinations, the editor should behave just like any other form elements in respect to tab and shift+tab key presses.
  One exception to this rule is when config.tabSpaces is set to a non-zero value. In this case, if the user presses tab from inside the editor, spaces will be added to the editing area, and the focus will not be moved out of the editing area. Shift-tab would still work as expected when config.tabSpaces is set to a non-zero value.
• Alt+F10
  Pressing Alt+F10 when the editing area is focused will move the focus to the editor toolbar.
• Shift+F10
  Pressing Shift+F10 will open the context menu inside the editing area.
• Alt+F11
  Pressing Alt+F11 will put focus to the element path bar, usually at the bottom of the editor. While the element path bar is being focused, pressing tab and shift+tab will select HTML elements that are parents of the current element. Pressing Esc will move the focus back to the editing area without changing selection; while pressing Enter will select the element in the editing area.

Navigating Toolbar

• Tab, Shift+Tab, Left Arrow and Right Arrow
  Once the toolbar is focused by Alt+F10 from the editing area, Tab and Shift+tab will move focus forward and backward among toolbar items. Toolbar item focus is cyclic so going backwards from the first item will put focus to the last item, and vice versa.
  Left Arrow and Right Arrow works in the same manner as Tab and Shift+Tab.
• Enter and Esc
  Pressing Esc will put the focus back to the editing area without executing any commands. Pressing Enter will activiate the selected toolbar item.

Navigating Dialogs

• Tab and Shift+Tab
  Pressing Tab and Shift+Tab when dialog tabs are not focused will move the focus among input element in the dialog; when a dialog tab is focused, Tab and Shift+Tab will cycle through tab pages in the dialog.
  Focus order in dialogs is cyclic so when the first tab or first input elements is focused and Shift+Tab is pressed, then the last tab or last input element will get the focus. Dialog buttons count as input elements as well.
• Left Arrow and Right Arrow
  When a dialog tab is focused, Left Arrow and Rigth Arrow can also be used to cycle between tabs like Tab and Shift+Tab.
• Alt+F10
  Pressing Alt+F10 in a dialog will put focus to the currently active tab.
• Enter and Esc
  Pressing Esc in a dialog is equivalent to pressing the Cancel button or the Close button.
  Pressing Enter in a dialog when a single-line text input is at focus is equivalent to pressing the OK button.
  Pressing Enter in a dialog when a dialog tab is focused puts focus back to the first input element inside that tab page.

Navigating Context Menus

• Tab, Shift+Tab, Down Arrow and Up Arrow
  When a context menu is opened, press Tab to cycle through menu items forward, Shift+Tab to cycle backwards.
  Down Arrow and Up Arrow work in the same manner as Tab and Shift+Tab respectively.
• Enter and Esc
  Press Enter to activate a menu item or open a sub-menu.
  Press close a context menu without executing any command.

Navigating Style Combo Boxes

• Tab, Shift+Tab, Down Arrow and Up Arrow
  Press Tab and Shift+Tab to cycle through items in a combo box forward and backwards, respectively.
  Down Arrow and Up Arrow work in the same manner as Tab and Shift+Tab.
• Enter and Esc
  Press Enter to activate the selected item in a combo box and put the focus back to the editing area.
  Press Esc to close the combo box without executing any command, and put the focus back to the toolbar.

Navigating Color Selection Boxes

• Tab, Shift+Tab, Left Arrow and Right Arrow
  Press Tab and Shift+Tab to cycle through colors forward and backwards, respectively.
  Down Arrow and Up Arrow work in the same manner as Tab and Shift+Tab.
• Enter and Esc
  Press Enter to apply the selected color to the current selection in the editing area. Enter puts the focus back to the editing area as well.
  Press Esc to close the color selection box and put focus back to the toolbar.

Editor Hotkeys

Here is a list of hotkeys that you can use inside the editing area in addition to the more common text editing keyboard commands (i.e. arrow keys to move the caret, end to move to the end of line, etc.).

• Ctrl+Z
  Undo command.
• Ctrl+Y and Ctrl+Shift+Z
  Redo command.
• Ctrl+L
  Open link dialog.
• Ctrl+B
  Bold command.
• Ctrl+I
  Italics command.
• Ctrl+U
  Underline command.
• Ctrl+C or Ctrl+Insert
  Copy.
• Ctrl+V or Shift+Insert
  Paste.
• Ctrl+X or Shift+Delete
  Cut.
• Ctrl+Left or Ctrl+Right
  Move to the previous or next word.
• Ctrl+Backspace
  Remove the previous word.
• Ctrl+Delete
  Remove the current word.
• Shift+Enter
  Create a new line in the same paragraph or list item.
  
• Alt+-
  Toggle collapse toolbar.

JAWS

• Editing Mode vs. Non-editing Mode
  JAWS has the distinction between editing mode and non-editing mode for text boxes and rich text areas. When JAWS is entering editing mode, a high pitched 'pop' sound is played to notify the user of the mode switch. Similarly, when JAWS is entering non-editing mode, a lower pitched 'pop' sound is played.
  It is up to JAWS to decide whether to put a text box or a rich text area to editing mode on the initial focus. When it happens that JAWS has put the initial focus to CKEditor in non-editing mode, the user will find that he/she cannot type into the editor, and no 'pop' sound is played when focus was put into the editing area. To fix that, simply press Enter to switch JAWS to editing mode, and a high pitched 'pop' sound should be played.
  Pressing Esc inside CKEditor will switch JAWS to non-editing mode, along with a lower pitched 'pop' sound to indicate the mode switch.
• Refreshing the Virtual Cursor
  JAWS keeps an internal model of the browser's view, and along with it, a virtual cursor, to facilitate reading of the contents in a web browser. The internal model kept by JAWS, however, is not always in sync with the displayed contents in the browser window. This is especially true for dynamically generated web contents written in JavaScript, which CKEditor depends on.
  When JAWS's virtual cursor is out-of-sync with the browser's displayed contents, the user will be unable to move correctly among the web page's contents. The user will also find that JAWS's voice reading out unpredictable garbage from the web browser - e.g. it may be reading out the raw HTML code in the web page, or it may be reading out the same element over and over despite the user's actions to move the virtual cursor away from that element.
  To refresh JAWS's internal model and to keep the virtual cursor back in sync with the browser, the user will need to press Insert+Esc. In cases where even Insert+Esc fails to refresh JAWS's virtual cursor correctly, the user can press Insert+Z twice, slowly, to disable and re-enable the virtual cursor.
  There are a few points in CKEditor usage in which JAWS will get out-of-sync with the browser window contents:

1. When an editor is newly created in the middle of a browsing session.
2. When a dialog is opened.
3. When a dialog is closed.
4. When a context menu is opened.
5. When a combo box menu is opened.

In all of the above events, it is recommended that the user press Insert+Esc to keep JAWS's virtual cursor in sync with the browser display.

• Arrow Keys
  Arrow keys have special meaning in JAWS when virtual cursor is mode is on. Arrow hotkeys (like left arrow and right arrow for cycling through toolbar items) will stop working when JAWS is opened and in virtual cursor mode. Equivalent hotkeys like Tab and Shift+Tab should be used instead.

The new feEditor class that ships with FileExplorer 5 and later is fully compatible with Vista, Windows 7, Windows 8, Windows Server 2008 and does not have any dependencies other than requiring Internet Explorer.

If you chose to use the old feHtmlEditor (which is not recommended) under Windows Vista and later, you need to ship the DhtmlEd.msi that FileExplorer will place in your Clarion\3rdparty\bin\ directory when it is installed. This should be run to install the MS DHTML control on the users machine when your application is installed. We recommend not using the old control, but rather using the new feEditor, which is the default with FileExplorer 5 and higher. Not only is it faster, but it is more feature rich and stable.