setplus Documentation

Toolbar buttons

The following table lists the toolbar commands supported by setplus with a brief discussion of implementation issues. Whenever the text refers to the browser implementation, the action is executed using the document.execCommand with the appropriate command identifier. For a list of command identifiers, see MSDN or MDN.

Undo

Undo the most recent action. The undo stack is cleared when you switch to full screen, or switch from document mode to source mode or vice versa and edit the text. Internet Explorer also clears the undo stack whenever any changes to the document are made, not limited to changing the text in the editor.

This operation uses the browser undo implementation.

Redo

Redo the most recently undone action. The same restrictions apply as to undo.

This operation uses the browser redo implementation.

Paste as plain text

Paste as plain text. A dialog box appears with a textbox where you can paste text. The text will lose any formatting. When you click OK, the text will replace the current selection or be inserted at the caret position.

This operation uses the browser insert HTML implementation (if available) or the IE range object (otherwise).

Paste from word processor

Paste text from a word processing application. A dialog box appears with a textbox where you can paste formatted text. The text will keep formatting. When you click OK, proprietary style rules (e.g. Microsoft Word mso rules from the style attribute), stylesheet classes (from the class attribute) and XML manifests (usually embedded in comments) will be stripped from the text, which will then replace the current selection or be inserted at the caret position.

This operation uses the browser insert HTML implementation (if available) or the IE range object (otherwise).

Bold

Format selection as bold or set current font to bold.

This operation uses the browser bold implementation.

Italic

Format selection as italic or set current font to italic.

This operation uses the browser italic implementation.

Subscript

Format selection as subscript text.

This operation uses the browser subscript implementation.

Superscript

Format selection as superscript text.

This operation uses the browser superscript implementation.

Text color

Apply color to text. A dialog box lists all named colors in CSS, as well as lets you specify a color with red, green and blue components or use the color picker. The picker has two variants.

Color picker

This variant consists of a hue selection bar and a saturation vs. lightness color picker plane. The plane shows saturation along the horizontal direction and lightness along the vertical direction. Clicking the hue bar updates the color plane where the plane will have the selected hue. Clicking the plane selects the color.

 
Color picker

This variant consists of a lightness color picker bar and a hue vs. saturation selection plane. The plane shows hue along the horizontal direction and saturation along the vertical direction. Clicking the plane updates the range of colors shown in the lightness bar. Clicking the bar selects the color with the chosen brightness.

This operation uses the browser forecolor implementation.

Remove formatting

Remove all formatting including bold, italic, monospaced font, subscript, superscript, etc. from the selected text.

This operation uses the browser remove format implementation.

Insert symbol

Insert a Unicode symbol. A dialog box will be displayed where you can click a symbol to insert or locate a symbol by typing a few words of its description into the search box, e.g. typing Greek will display Greek characters only. The selected symbol will replace the current selection or be inserted at the caret position.

This operation uses the browser insert HTML implementation (if available) or the IE range object (otherwise).

Insert or edit link

Transform the current selection into a hyperlink. A dialog will be displayed that lets you specify the most common anchor properties such as URL (href attribute), link target (target attribute), tooltip (title attribute) and link relationship (rel attribute).

This operation uses the browser unlink implementation to clear link(s) in the current selection and then either the create link implementation if only a URL is specified, or the insert HTML implementation (or the IE range object) otherwise.

Remove link

Remove the hyperlink from the current selection.

This operation uses the browser unlink implementation.

Insert or edit image

Insert an image. A dialog box will be displayed where you can set the most important image properties such as URL, alternate text, width, height and image tooltip (title attribute). The Preview button displays the image in a 100x100 area.

This operation uses either the browser insert image implementation if only a URL is specified, or the insert HTML implementation (or the IE range object) otherwise.

Align text left

Flush text to the left in the selected paragraph.

This operation uses the browser justify left implementation (with styleWithCSS enabled).

Align text center

Center text in the selected paragraph.

This operation uses the browser justify center implementation (with styleWithCSS enabled).

Align text right

Flush text to the right in the selected paragraph.

This operation uses the browser justify right implementation (with styleWithCSS enabled).

Full justify text

Full justify text in the selected paragraph.

This operation uses the browser justify full implementation (with styleWithCSS enabled).

Add indent

Add indent to text in the selected paragraph.

This action is implemented by wrapping the paragraph in a blockquote element. The operation uses the browser indent implementation (with styleWithCSS disabled)..

Remove indent

Remove indent from text in the selected paragraph.

This action is implemented by unwrapping the paragraph from a blockquote element it was previously wrapped into. The operation uses the browser outdent implementation (with styleWithCSS disabled)..

Ordered list

Transform the paragraph into a numbered list.

This operation uses the browser insert ordered list implementation.

Unordered list

Transform the paragraph into a bulleted list.

This operation uses the browser insert unordered list implementation.

Select all

Select all text in the editor.

Insert table

Insert a table. Additional buttons let you insert a row above or below, a column above or below the current table cell or delete the row or column the current cell is part of.

This operation uses the browser insert HTML implementation (if available) or the IE range object (otherwise). When you insert or delete a row or column, the entire table is selected and replaced with a copy that has the row or column inserted or deleted, in order to maintain the undo stack.

Zoom in

Increase the zoom level of the editor. This will switch to a higher zoom level as configured in the editor. Typical zoom levels are 250%, 200%, 175%, 150%, 125%, 100%, 75%, 50%, 25%.

Zoom changes the default font size both for the document mode iframe and the source mode textarea.

Zoom out

Decrease the zoom level of the editor. This will switch to a lower zoom level as configured in the editor.

Toggle full screen

Toggle full screen (maximized) mode. Switching to full screen might clear the undo stack.

Toggle block markers

Toggle block markers for paragraphs (p, h1 to h6, pre, div, blockquote and address blocks). This is especialy useful in identifying nested div and blockquote blocks.

This operation is implemented by inserting a special stylesheet in the iframe document head.

View document

Switch to document (what-you-see-is-what-you-get, WYSIWYG) mode.

Document mode is implemented using an iframe with contentEditable set to true (in IE) or in designMode (in other browsers). The implementation imports the MooTools framework to be available inside the iframe.

View source

Switch to source mode. This shows the document as HTML source, with HTML elements, attributes and entities highlighted in blue, red and green. Syntax highlighting is supported in all popular modern browsers.

Source mode is implemented using a textarea element with invisible text (or the chroma filter in IE) and an automatically scrolled and updated pre element stacked behind it. The cursor is moved and animated from code and is not the browser's default textarea cursor.

Status bar

In document mode, the status bar shows the element the caret is inside and all of its ancestor elements up the DOM hierarchy, not including the root element html.

In source mode, the status bar shows the line and column number, both of them starting from 1. The line and column number reflect the internal structure of the text (i.e. linefeeds in the original text) and not the apparent line and column number, which may be different as long lines wrap.