This example shows how to add style items in format popup. See the formatAdd setting description for more details.
Click on any text block and choose style from the Format dropdown on the toolbar.
<!DOCTYPE html>
<html>
<head>
<title>Article Editor</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />
</head>
<body>
<!-- element -->
<textarea id="entry">...</textarea>
<!-- js -->
<script src="/your-article-dist-path/article-editor.min.js"></script>
<!-- call -->
<script>
ArticleEditor('#entry', {
css: '/your-article-dist-path/',
custom: {
css: ['/your-article-dist-path/my-custom.css']
},
formatAdd: {
"lead": {
title: '<span style="font-size: 20px; color: #666">Lead</span>',
type: 'paragraph',
params: {
tag: 'p',
classname: 'lead'
}
},
"small": {
title: '<span style="font-size: 14px;">Small</span>',
type: 'paragraph',
params: {
tag: 'p',
classname: 'small'
}
},
"note": {
title: '<span style="padding: 6px 8px; background-color: #FEF2C3; color: #645F4A;">Note</span>',
type: 'paragraph',
params: {
tag: 'p',
classname: 'my-note'
}
},
"redheading": {
title: '<span style="color: #F93943; font-weight: bold; font-size: 16px;">Red Heading</span>',
type: 'heading',
params: {
tag: 'h2',
classname: 'red-heading'
}
}
}
});
</script>
</body>
</html>