Textbox.io 2.x Documentation : Editor types - Classic vs Inline

Textbox.io is able to edit content in 2 distinct ways - "Classic" mode, where the editor appears in a self-contained box, and "Inline mode" (also known as in-context mode) where the editor literally takes an element and makes it editable. In inline mode, you edit content exactly as it appears within the context of the page it is being hosted upon.

Inline vs classic mode - a quick comparison

Inline	Classic
Inherits stylesheets from the host page the editor is invoked upon Provides a 'true' WYSIWYG editing experience within the context of the host page Doesn't work on mobile (...yet...) Does not provide a fullscreen editing mode or source code view Container grows as the content inside grows Toolbar grows and can be dragged around the page	Is self contained (within an iframe) Requires injection of outside CSS styles using the configuration API Works on mobile devices Editor toolbar is always visible (regardless of whether the editor is focused) Allows editing in fullscreen mode Editor container remains a fixed size

Inline editing does not currently work on Mobile devices. See: Developing editor experiences optimized for mixed platforms

Demo - Classic Editing

Demo - Inline Editing

Which type of Editor should I choose?

It really depends on the kinds of problems you're looking to solve through the use of an editor.

Classic Mode is useful for generating content that requires isolation- such as form fields, or email compose fields.

Inline Mode is useful for editing content such as real-time WYSIWYG editing of complete web pages

Inline-specific configuration options

Toolbar visibility

The toolbar can be made invisible at initialization via the configuration object. Such functionality is useful when developing visually lightweight "minimal" applications.

Toolbar draggability

By default, the user can drag the toolbar away from it's container object as if it were a floating window. This functionality may be disabled.

Toolbar offset

An offset may be set on the toolbar to provide visual separation between the toolbar and the content being edited.

Note: the editor assumes a "pinned" behavior when it is attached to the content (i.e. when it has no offset). This gives it special properties (such as attaching it to the top of the viewport) when large blocks of content are scrolled. This functionality is no-longer executed when the toolbar has an offset from the container window.

Features disabled for inline editing

The following features are disabled when inline editing is used (regardless of whether they are declared in configuration):

Source code view
Fullscreen editing