Introduction

Editor2 Widget in dojo provides a WYSIWYG editor for HTML content. The core is compact and lightweight, while a plugin framework ensures that any functionality can be achieved by plugins.

Basic html editing capacity is implemented in the core, which is the RichText widget. Currently keyboard shortcuts are also hardcoded in this widget (TODO: generalize this, or use KeyRouter instead?).

Editor2 is a subclass of RichText Widget which adds a toolbar (Editor2Toolbar Widget) to the top of the editing area.

Basic Principles of Editor2

In order to have an extensible structure, the new Editor2 introduced several new concepts.

Command (dojo.widget.Editor2Command)

The first and most fundamental one is call Command, which executes a specific function on the editing area. It also provides the API to retrieve the current state of the command. The base class for Command is dojo.widget.Editor2Command (defined in Editor2.js).

Each command should have a unique name and each command is a singleton object per page: no matter how many Editor2 instances there are in one page, they share the same command objects.

Toolbar Item (dojo.widget.Editor2ToolbarButton)

The toolbar (defined in Editor2Toolbar.js) for the editor2 contains serveral toolbar items. The basic class for toolbar item is dojo.widget.Editor2ToolbarButton (defined in Editor2Toolbar.js), which essentially is a simplified version of dojo widget.

Toolbar item can be of any type, besides buttons, you can have more complex items, such as a dojo combobox like item with a dropdown (see dojo.widget.Editor2ToolbarFormatBlockSelect in Editor2Toolbar.js).

Available Plugins

All the builtin plugins are located under src/widget/Editor2Plugin directory. Those files ending with Dialog are the actual popups. The table below lists all the other plugins:

Name	Description	Features
ContextMenu	Command	ToolbarItem
ContextMenu	Context Menu Core, with menu items for builtin commands	Cut/Copy/Paste, Link/Unlink, Image properties	-	-
FindReplace	Implement find and replace functionalities	-	Find/Replace	Find/Replace
TableOperation	Support for table related operation	Insert/Delete Table	Insert/Delete Table	Insert Table
AlwaysShowToolbar	Ensure the toolbar is visible when scrolling the page	-	-	-
ToolbarDndSupport	Toolbar Set/Item drag and drop support	-	-	-
SimpleSignalCommands	Add simple signals to Editor2, such as save() and createLink()	-	-	-

Misc

SetupCopyPasteForFirefox - Copy, Cut and Paste are disabled by default in Mozilla/Firefox, this tip is how to enable it for your trusted websites.