Custom styles 2.0.0 Documentation

Introduction

Custom styles allow you to specify a custom set of tags and classes that can be used inside SnapEditor. A dropdown of styles automatically shows up which allows you to toggle through the specified styles.

This allows users to select predefined styles to change the look of their content.

SnapEditor allows for custom styles on the following tags.

"p", "div", "h1", "h2", "h3", "h4", "h5", "h6",
"table", "tr", "th", "td"

Declaring Style Buttons

Custom style buttons must be declared before they can be used.

SnapEditor.addStyleButton(selector, options);

selector

The selector argument is a string in the form of a CSS selector. It specifies a tag followed by one or more class names separated by '.'.

// Just a tag. Produces <h1>...</h1>
"h1"
// A tag with a single class name. Produces <h1 class="title">...</h1>
"h1.title"
// A tag with mutliple class names. Produces <h1 class="title special">...</h1>
"h1.title.special"

options

The options argument is an object that looks like the following.

{
  text: "Title"
  html: '<span class="title_button">Title</span>'
  newline: "h2"
}

The text attribute is mandatory. It specifies the text for the tooltip. It also specifies the text to display in the dropdown if html is not specified.

The html attribute is optional. It specifies the HTML to display in the dropdown. Only inline elements are allowed.

The newline attribute is optional. It specifies what to insert when you hit enter at the end of the current element. This can be any selector as defined above. If newline is not specified, the first block style will be used (usually a paragraph tag).

Example

SnapEditor.addStyleButton("h1.title", {
  text: "Title",
  html: '<span class="title_button">Title</span>'
});

Shortcut for Multiple Styles

A convenience method is provided for adding multiple styles at a time.

SnapEditor.addStyleButtons({
  "h1.title": { text: "Title" },
  "h2.subtitle": { text: "Subtitle" }
});

addStyleButtons takes a single object where the keys are the selectors and the values are the options.

Using Style Buttons

To use style buttons, specify which selectors you want in the styles config.

// Global config.
SnapEditor.config.styles = ["h1.title", "h2.subtitle"];
// Per instance config.
var editor = new SnapEditor.InPlace("editor", {
  styles: ["h1.title", "h2.subtitle"]
});

The default looks like the following.

SnapEditor.config.styles = ["p", "h1", "h2", "h3", "h4", "h5", "h6"];

Dropdowns

The specified style buttons to be used are placed in dropdowns so the user can select them.

The block styles are added to the styleBlock button. This includes the following tags.

"p", "h1", "h2", "h3", "h4", "h5", "h6"

The table styles are added to the table button. This includes the following tags.

"table", "tr", "th", "td"

Control

Custom styles allow you to specify tags and classes that are allowed inside SnapEditor. This means anything that is not specified is not allowed in SnapEditor.

The default styles config contains the usual block styles. However, if you change this list, it changes what is allowed inside SnapEditor.

For instance, if you decided to remove p as one of the styles, SnapEditor will not allow p tags. Instead, SnapEditor will change all disallowed block elements into the first style specified.

An example that would take advantage of this is if you were only allowing the user to edit a heading. You could simply only add h1 to the styles config and the user would be restricted to h1 only.

Custom styles 2.0.0 - Documentation