Textbox.io 2.x Documentation : styles

configuration

    ↳ css

        ↳ styles

            ↳ [ style ]

Textbox.io enables fine-grained configuration of the styles shown on the styles drop-down menu.

styles is an array of style definitions. A style is an item that appears on the styles drop-down. When clicked, the editor selection is transformed to the rule defined in the style definition.

style definitions

Property Type Value

rule

String

The transformation to be made to the selection

text

String

(Optional) The text to appear in the dropdown list item.

eg: "My Custom Style"

Example

In the example below a configuration is created that specifies a custom css styles array with 4 style definitions.

var config = {
    css : {
        styles : [
            { rule : 'p' },			// Change selected elements to paragraph elements
            { rule : 'h1.blue', text: 'Blue heading' },	// Change selected elements to heading1 elements, apply blue class. Shown in the styles dropdown as 'Blue heading'
            { rule : 'a.red' },		// Apply a red class to selected anchor elements
            { rule : '.green' }		// Apply green class to selected elements
        ]
    }
};

This configuration would result in 4 options added to the block-styles drop-down:

Paragraph
Blue Heading
a.red
.green

Styling Transformation Rules

The following intended styling actions are available, based on the syntax used when defining css styles array items.

Rule Syntax	Transformation
`.clazz`	Wrap selected text in `<span class="clazz">`
`el`	Convert the block containing the selection to type `el`
`el.clazz`	Convert the block containing the selection to type `el` with css class `clazz`

Transformations are subject to some limitation, based on styling transformation rules.

Invalid Style Transformation Rules

Styling transformations that are dependent on the CSS cascade, attempt to apply multiple classes, or affect element IDs are not supported.

Unsupported selectors

Rule Syntax	Description
`.clazz p`	Complex selectors are not supported.
`p.clazz.clazz`	Cannot add multiple classes to selected elements.
`#id`	Cannot add IDs to elements.

Unsupported elements

a, embed, hr, img, object, table, tr, ul, span are unsupported blocks for the styles dropdown menu

For more detail on setting available classes/transformations (configuring the block-styles drop-down) see: Using Your Own Document Styles.

Example Transformation Behaviors

Element transformations follow the following behaviors. Note that elements are separated into the following types: block, object, and inline.

Block type elements can be freely transformed into any other type of block element, while object and inline type elements may never be transformed.

When a user selects one of these options, selected elements are then evaluated against the styling transformation rules, if applicable. The results of applying a block-style choice to selected HTML content are as follows.

Selected Content	Block-Style Rule Chosen	Resulting HTML	Description
`<p>..</p>`	`{ rule : 'p' }`	`<p>..</p>`	No change.
`<h1>...</h1>`	`{ rule : 'p' }`	`<p>..</p>`	Heading1 transformed to paragraph.
`<td><a>...</a></td>`	`{ rule : 'p' }`	`<td><a>...</a></td>`	Can't transform a table cell or link (object type). No change.
`<p><span>...</span></p>`	`{ rule : 'p' }`	`<p><span>...</span></p>`	Can't transform span (inline type). No change.
`<p><a>...</a></p>`	`{ rule : 'p' }`	`<p><a>...</a></p>`	Can't transform anchor (object type). No change.
`<p>..</p>`	`{ rule : 'h1.blue' }`	`<h1 class="blue">...</h1>`	Paragraph transformed to heading1, blue class applied.
`<h1>...</h1>`	`{ rule : 'h1.blue' }`	`<h1 class="blue">...</h1>`	Blue class applied to existing heading1.
`<td><a>...</a></td>`	`{ rule : 'h1.blue' }`	`<td><a>...</a></td>`	Can't transform a table cell or link (object type). No change.
`<p><span>...</span></p>`	`{ rule : 'h1.blue' }`	`<h1 class="blue"><span>...</span></h1>`	Paragraph transformed to heading1, blue class applied. Can't transform span (inline type).
`<p><a>...</a></p>`	`{ rule : 'h1.blue' }`	`<h1 class="blue"><a>...</a></h1>`	Paragraph transformed to heading1, blue class applied. Can't transform anchor (object type).
`<p>..</p>`	`{ rule : 'a.red' }`	`<p>..</p>`	Can't transform paragraph (block type). No change.
`<h1>...</h1>`	`{ rule : 'a.red' }`	`<h1>...</h1>`	Can't transform heading1 (block type). No change.
`<td><a>...</a></td>`	`{ rule : 'a.red' }`	`<td><a class="red">...</a></td>`	Can't transform table cell (object type). Red class applied to existing anchor.
`<p><span>...</span></p>`	`{ rule : 'a.red' }`	`<p><span>...</span></p>`	Can't transform paragraph (block type). Can't transform span (inline type). No change.
`<p><a>...</a></p>`	`{ rule : 'a.red' }`	`<p><a class="red">...</a></p>`	Can't transform paragraph (block type). Red class applied to existing anchor.
`<p>..</p>`	`{ rule : '.green' }`	`<p><span class="green">...</span></p>`	Can't transform paragraph (block type). New span created. Green class applied to new span.
`<h1>...</h1>`	`{ rule : '.green' }`	`<h1><span class="green">...</span></h1>`	Can't transform heading1 (block type). New span created. Green class applied to new span.
`<td><a>...</a></td>`	`{ rule : '.green' }`	`<td><a><span class="green">...</span></a></td>`	Can't transform table cell and anchor (object type). New span created. Green class applied to new span.
`<p><span>...</span></p>`	`{ rule : '.green' }`	`<p><span class="green">...</span></p>`	Can't transform paragraph (block type). Green class applied to existing span.
`<p><a>...</a></p>`	`{ rule : '.green' }`	`<p><a><span class="green">...</span></a></p>`	Can't transform paragraph and anchor. New span created. Green class applied to new span.