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.

Edit in JSFiddle

HTML

Copy

<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

Copy

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