Format

format

Type: Array

Default: array

By default, the following array is set in the formatting popup for blocks tags:

['p', 'h1', 'h2', 'h3', 'ul', 'ol']

You can specify additional tags for popup from the next set:

• h4
• h5
• h6
• dl
• address
• div (for text blocks)

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    format: ['p', 'h1', 'h2', 'h3', 'h4', 'ul', 'ol', 'address']
});

Or take out what's unnecessary and add what's needed:

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    format: ['p', 'h3', 'h4', 'address']
});

Of course you can change the order of popup items like this:

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    format: ['p', 'ul', 'ol', 'h1', 'h2', 'h3']
});

formatAdd

Type: Object

Default: false

You can add your own styles for some blocks in the Format dropdown. To do this, you need to specify an object in the setting, like this:

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    custom: {
        css: ['/your-article-dist-path/my-custom.css']
    },
    formatAdd: {
       "mystyle": {
            title: 'My Style',
            type: 'paragraph',
            params: {
                tag: 'p',
                classname: 'mystyle'
            }
        }
    }
});

The example above will add a paragraph style item to the Format dropdown that will set the "p" tag with "mystyle" class.

Article gets the styles for formatAdd from the my-custom.css file, this is how it might look like:

// my-custom.css
.mystyle {
    color: red;
    font-weight: bold;
}

You can specify more than one class:

classname: 'mystyle1 mystyle2'

Inside the "title" you can specify a style for the item that shows visually what the style looks like:

title: '<span style="color: red; font-weight: bold;">My Style</span>'

Styles work for the following types of blocks in the editor:

• paragraph
• heading
• list
• address

And for tags like these:

• p
• h1-h6
• ul/ol
• address

Here's an example for the heading style:

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    custom: {
        css: ['/your-article-dist-path/my-custom.css']
    },
    formatAdd: {
       "mystyle": {
            title: 'My Style',
            type: 'paragraph',
            params: {
                tag: 'p',
                classname: 'mystyle'
            }
        },
        "myheading": {
            title: 'My Heading',
            type: 'heading',
            params: {
                tag: 'h2',
                classname: 'myheading'
            }
        }
    }
});

See the work example for more details.