Styling

Inline Classes

Using the inline_class.min.js plugin it is possible to add custom class on the selected text inside the WYSIWYG HTML editor.

Use the Inline Class dropdown to select the desired inline class for the selected text inside the rich text editor.


Make sure that the inlineClass button is included in the toolbarButtons list. By default the inlineClass button is already in the list, but if you changed the buttons list just make sure you don't omit the inlineClass button.

You can define your own inline styles using the inlineClasses option. This option is an Object where the key of each property represents the name of the new class and its value specifies the HTML class for it. It is important to have unique names for the classes or they will not work properly.

HTML

<div id="froala-editor">
  <p>Use the Inline Class dropdown to select the desired inline class for the selected text inside the rich text editor.</p>
</div>

CSS

<style>
  .fr-view .fr-class-highlighted {
    background-color: #ffff00;
  }

  .fr-view .fr-class-code {
    border-color: #cccccc;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: #f5f5f5;
    padding: 10px;
    font-family: "Courier New", Courier, monospace;
  }

  .fr-view .fr-class-transparency {
    opacity: 0.5;
  }
</style>

JAVASCRIPT

<script>
  $(function() {
    $('div#froala-editor').froalaEditor({
      toolbarButtons: ['inlineClass'],

      // Define new inline styles.
      inlineClasses: {
        'fr-class-code': 'Code',
        'fr-class-highlighted': 'Highlighted',
        'fr-class-transparency': 'Transparent'
      }
    })
  });
</script>