It looks like you’re browsing an old version of Froala. Please go to the newer version of our docs for a more updated version.
Examples
Inline Styles
Using the inline_styles.min.js
plugin it is possible to add custom style on the selected text inside the WYSIWYG HTML editor.
Use the buttons option to add the inlineStyle button in the rich text editor's toolbar.
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="eg-inline-styles" class="text-small"> <p>Use the <strong>buttons</strong> option to add the inlineStyle button in the rich text editor's toolbar.</p> </div>
JAVASCRIPT
<!-- Include the plugin file. --> <script src="../js/plugins/inline_styles.min.js"></script> <script> $(function() { $('div#eg-inline-styles').editable({ inlineMode: false, // Include the inlineStyle button. buttons: ['bold', 'italic', 'sep', 'indent', 'outdent', 'insertOrderedList', 'insertUnorderedList', 'sep', 'createLink', 'insertImage', 'inlineStyle'], // Define new inline styles. inlineStyles: { 'Big Red': 'font-size: 20px; color: red;', 'Small Blue': 'font-size: 14px; color: blue;' } }) }); </script>