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.

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>