Page tree
Skip to end of metadata
Go to start of metadata
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

PropertyTypeValue
rule
String

The transformation to be made to the selection

 

textString(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 SyntaxTransformation
.clazzWrap 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 SyntaxDescription
.clazz pComplex selectors are not supported.
p.clazz.clazzCannot add multiple classes to selected elements.
#idCannot add IDs to elements.

 

Unsupported elements

a, embed, hr, img, object, table, trul, 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 ContentBlock-Style Rule ChosenResulting HTMLDescription
<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.

 

See Also:

 


  • No labels