Block Styles

Using the block_styles.min.js plugin it is possible to add custom style on the selected text block inside the WYSIWYG HTML editor.

You can define your own block styles using the blockStyles option. This option is an Object where the key represents the block tag name and its value is an Object defining the new styles like the one passed to the defaultBlockStyle option. The default block styles are used when no blockStyles are specified for a block tag. This options is an Object where the key is the name of the class and the value is the text from the block style dropdown. It is important for both Objects to have unique keys otherwise they will not work properly.

In the current example we have added new block styles only for p and h1 tags. For other tags the default block styles are available in the dropdown.

HTML

<div id="eg-block-styles" class="text-small">
          <p>Use the <strong>buttons</strong> option to add the blockStyle button in the rich text editor's toolbar.</p>
        </div>

JAVASCRIPT

<script>
  $(function() {
    $('div#eg-block-styles').editable({
      inlineMode: false,

      // Include the blockStyle button.
      buttons: ['bold', 'italic', 'formatBlock', 'sep', 'indent', 'outdent',
        'insertOrderedList', 'insertUnorderedList', 'sep',
        'createLink', 'insertImage', 'blockStyle', 'html'],

      // Define new block styles.
      blockStyles: {
        'p': {
          'class1': 'Class 1',
          'class2': 'Class 2'
        },
        'h1': {
          'class3': 'Class 3',
          'class4': 'Class 4'
        }
      }
    })
  });
</script>