As a developer, Textbox.io enables you to take fine-grained control over the way content is presented, as well as the styles that users are able to select from the styles dropdown menu.
Injecting your own CSS files
In Classic Editing Mode, the textbox.io editor document is contained within an
iframe element. This means that any styles or stylesheets declared on your host page are not inherited by the editor. These need to be explicitly declared as references in the editor configuration.
CSS and styles are configured per-instance as part of the Textbox.io configuration object
Example: custom CSS
The example below shows the editor using a highly customized CSS file:
Customizing the styles drop-down menu
The items shown in Textbox.io's styles drop-down menu can be customized to suit the requirements of your application. Built-in styles may be added or removed, and custom styles may be defined per-editor using the the editor configuration object.
The Textbox.io styles drop-down menu
Overview: Block vs. Inline styles
Before attempting to create your own custom styles, it is worthwhile understanding the difference between block style transformations, and inline transformations.
- When a block transformation is applied to a selection, the entire block encasing the selection (such as a paragraph or heading) is transformed:
- When an inline transformation is applied, to a selection, only the selection itself (and no surrounding content) is transformed:
In its stock configuration, the drop-down styles menu contains only block style transformations - inline style changes can be made via the font drop-down menu:
Styles drop-down configuration
The styles shown in an editor can be specified in the editor configuration object:
Specifying custom inline styles
In the configuration example shown above, we specified a rule for
h1.green .This is an example of a custom block style. Similarly, if we'd have defined
p.green, this transformation would take place at a block level. If we want to make green an inline style, we simply remove the prefixing element from the definition:
For more details on how rule definitions affect selected HTML, see: styles.
The following is an example of custom styles:
- "distinguished" is an example of an inline style
- "fancy title" is an example of a block style
Note the differences in the presentation of these styles in the drop-down menu declaration compared to the CSS declaration file.
Special cases: Table cells & List Items
The list of items shown on the styles drop-down menu are dependent on the current editor selection. Custom block styles declared for table cells or list items will only become visible when the editor selection exists on those elements as these styles are only valid CSS within a table or list structure. In this way Textbox.io prevents users from creating invalid HTML.
Custom styles for table cells will only appear when the selection is on a table