Documentation
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.