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 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
The toolbar can be made invisible at initialization via the configuration object. Such functionality is useful when developing visually lightweight "minimal" applications.
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.
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
- API Basics - Learn the basics of using the editor API, such as Getting and setting content in the editor.
- Toolbar configuration object
- Customizing the Editor - Learn how to configure and customize Textbox.io for your applications.
- Spell Checking - Find out more about how to enhance the editing experience with spell checking, image upload and other web services from Ephox.
- API reference