Paragraphs

Options listed below can must be set using the plug-in page item attribute Initialization JavaScript Code, see an example below.

function( pOptions ){
  pOptions.optionName = optionValue;
  return pOptions;
}

Paragraph

paragraphFormat

The option paragraphFormat defines available paragraph for rich text document.

function( pOptions ){
  pOptions.enter = FroalaEditor.ENTER_P;
  pOptions.paragraphFormat = {
    N: 'Normal',
    H1: 'Heading 1',
    H2: 'Heading 2',
    H3: 'Heading 3',
    H4: 'Heading 4',
    PRE: 'Code'
};

  return pOptions;
}

The N represents default paragraph HTML tag. When froala option enter

• is set to FroalaEditor.ENTER_P then, N represents tag <p>
• is set to FroalaEditor.ENTER_DIV then, N represents tag <div>

paragraphFormatSelection

The option paragraphFormatSelection is a boolean flag enabling or disabling preview of the current paragraph style in the toolbar for the currently focused paragraph.

function( pOptions ){
  pOptions.paragraphFormatSelection = true;
  return pOptions;
}

lineHeights

The option lineHeights defines available line-height properties for currently focused paragraph.

function( pOptions ){
  pOptions.lineHeights = {
    "Default":"",
    "Single":"1",
    "1.15":"1.15",
    "1.5":"1.5",
    "Double":"2"
  };

  return pOptions;
}

Styles

paragraphStyles

The option paragraphStyles defines CSS classes applicable to the currently focused paragraph. When option paragraphMultipleStyles is enabled, then multiple paragraph styles can be used.

:::danger NOTICE ABOUT IMAGE STYLES

Paragraph styles are only visible when a document is displayed along with a custom CSS rules.

:::

function( pOptions ){
  pOptions.imageMultipleStyles = true;
  pOptions.imageStyles = {
    'fr-text-gray': 'Gray',
    'fr-text-bordered': 'Bordered',
    'fr-text-spaced': 'Spaced',
    'fr-text-uppercase': 'Uppercase'
  };

  return pOptions;
}

paragraphMultipleStyles

The option paragraphMultipleStyles is a boolean flag enabling or disabling possibility to set multiple paragragph styles to the currently focused paragraph.

function( pOptions ){
  pOptions.imageMultipleStyles = true;
  return pOptions;
}