Paragraphs

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

Initialization JavaScript Code

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

Paragraph

paragraphFormat

The option paragraphFormat defines available paragraph for rich text document.

Initialization JavaScript Code

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>

Preview

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.

Initialization JavaScript Code

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

Enabled

Disabled

lineHeights

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

Initialization JavaScript Code

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

Preview

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.

NOTICE ABOUT IMAGE STYLES

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

Initialization JavaScript Code

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;
}

Example

paragraphMultipleStyles

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

Initialization JavaScript Code

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