Page tree
Skip to end of metadata
Go to start of metadata

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 

You can declare your own stylesheets using the stylesheets property or inject CSS directly using the documentStyles property:

var configCSS = {
    css : {
        stylesheets : ['http://www.example.com/mycss.css', 'anotherfile.css'], // an array of CSS file URLs 
        documentStyles : 'body { background:red; }' // a string of CSS
    }
};

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:

var configCSS = {
    css : {
        stylesheets : ['customstyles.css'], // an array of CSS URLs (absolute or relative to the location of textboxio.js)
    	styles: [
    		{
    			rule: 'h1.green', // the transform to apply to the selection.
    							  // This will convert a selection's container 
    							  // to <h1 class="green">text</h1>
    							  // Note: for the transformation to be visible, a style declaration for 
    							  // h1.green must be made in customstyles.css (or one of the custom stylesheets)
    							  // eg: h1.green{ color: green; font-size: 2em;} 
    			text: 'Green heading', // Text to show in the dropdown
    		}
    	]
    }
};

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 h2.greenh3.green, or 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:

var configCSS = {
    css : {
        stylesheets : ['customstyles.css'], // an array of CSS URLs (absolute or relative to the location of textboxio.js)
    	styles: [
    		{
    			rule: '.green', // inline example. Will apply to just the selection:
    							  // eg. If i had the text: 
 								  // <p>The [sel]quick brown[/sel] fox jumped over the lazy dog</p>
 								  // With selection marked by [sel] and [/sel] respectively,
    							  // then the transformation after selecting this from the dropdown would be:
    							  // <p>The <span class="green">quick brown</span> fox jumped over the lazy dog</p>
    			text: 'Green heading', // Text to show in the dropdown
    		}
    	]
    }
};

For more details on how rule definitions affect selected HTML, see: styles.

Example

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

 

  • No labels