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.

Try it yourself:

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

Copy

<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

Copy

<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

Copy

<script>
  new FroalaEditor('div#froala-editor', {
    toolbarButtons: ['inlineClass'],

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