- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
Styling
Inline Styles
Using the inline_style.min.js
plugin it is possible to add custom style on the selected text inside the WYSIWYG HTML editor.
Try it yourself:
Make sure that the inlineStyle
button is included in the toolbarButtons list. By default the inlineStyle button is already in the list, but if you changed the buttons list just make sure you don't omit the inlineStyle button.
You can define your own inline styles using the inlineStyles
option. This option is an Object where the key of each property represents the name of the new style and its value specifies the CSS properties for it. It is important to have unique names for the styles or they will not work properly.
HTML
<div id="froala-editor">
<p>Use the Inline Style dropdown to select the desired inline style for the selected text inside the rich text editor.</p>
</div>
JAVASCRIPT
<script>
new FroalaEditor('div#froala-editor', {
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', '|', 'inlineStyle', 'paragraphFormat', 'align', 'undo', 'redo', 'html'],
// Define new inline styles.
inlineStyles: {
'Big Red': 'font-size: 20px; color: red;',
'Small Blue': 'font-size: 14px; color: blue;'
}
})
</script>
Related Plugin: Inline Style