Adding custom text format

In addition to normal text styles like headings, fixed width, quote and paragraph, custom text formats can be added in Voog by pushing texteditorStyles option to window.edy configuration object.

<script>
  window.edy = window.edy || [];
  var options = {
    name: 'H4',
    tagname:'h4'
  };
  edy.push(['texteditorStyles', options]);
  
</script>

Options

name - (string) defines the name of the format in text formats menu.
tagname - (string) name of tag generated (as default is used 'div')
toggle - (boolean) if set as true, click on format, when format is already selected, remove the format.
classname - (string) sets class name for generated tag
classRegExp - (regular expression) for detecting similar classes as active state, a regular expression can be provided matching similar classes. These classes are switched instead of adding to class list, meaning other similar classes are removed before applying new one. If toggle is used applying format with the same classname removes format while applying similar classname replaces class with new one. Useful for example in adding text alignment classes:

<script>

  window.edy = window.edy || [];

  var optionsLeft = {
    name: 'Align left',
    classname: 'text-align-left',
    classRegExp: /wysiwyg-text-align-[0-9a-z]+/g,
    toggle: true
  };
  
  edy.push(['texteditorStyles', optionsLeft]);
  
  var optionsRight = {
    name: 'Align right',
    classname: 'text-align-right',
    classRegExp: /wysiwyg-text-align-[0-9a-z]+/g,
    toggle: true
  };
  
  edy.push(['texteditorStyles', optionsRight]);
  
</script>

styleProperty , styleValue - (string) used together to define an inline style property for formatting text:

<script>
  window.edy = window.edy || [];

  var options = {
    name: "Justify with style",
    styleProperty: "textAlign",
    styleValue: "justify",
    toggle: true
  };
  edy.push(['texteditorStyles', options]);
  
</script>