Textbox.io 2.x Documentation : css

configuration

    ↳ css

The configuration css property defines options related to editor rendering CSS and CSS classes/elements available in the styles menu.

Example Configuration

In this example, a simple configuration object is created that adds a rendering stylesheet to the editor, inline rendering CSS, and configures the styles available to apply.

var config = {
	css : {
		documentStyles : 'body { background: red; }',
		styles : [
			{ rule : 'p' },
			{ rule : 'h1.blue', text: 'Blue Heading 1' },
			{ rule : '.green', text: 'Green Inline Style' }
		],
		stylesheets : ['test.css'],
		showDocumentStyles : true
	}
};
 
var editor = textboxio.replace('#targetId', config);

Properties

Property	Type	Value
`documentStyles`	String	String of CSS for rendering editor content. Note This parameter is ignored when using inline editing (i.e. invoking the editor with `texboxio.inline()`)
`showDocumentStyles`	Boolean	Whether to show content style rules in the styles drop-down menu by default. Defaults to `false`. Full details on defining styles in content CSS is covered in the Using Your Own Document Styles article. Note This parameter is ignored when using inline editing (i.e. invoking the editor with `texboxio.inline()`) This API was introduced in Textbox.io release 2.4.1
`styles`	Array	An array of available styles definitions.
`stylesheets`	Array	An array of string paths to editor rendering stylesheets. Note: this parameter is ignored when using inline editing (i.e. invoking the editor with `texboxio.inline()`)