Text Formatting

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

Font family

fontFamily

The option fontFamily defines available fonts for a document.

Initialization JavaScript Code

function( pOptions ){
  pOptions.fontFamily = {
    'Arial,Helvetica,sans-serif': 'Font 1',
    'Impact,Charcoal,sans-serif': 'Font 2',
    'Tahoma,Geneva,sans-serif': 'Font 3'
  };
    
  return pOptions;
}

Preview

fontFamilySelection

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

Initialization JavaScript Code

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

Enabled

Disabled

fontFamilyDefaultSelection

The option fontFamilyDefaultSelection defines what text is displayed when the font family is unknown or nothing is selected.

Initialization JavaScript Code

function( pOptions ){
  pOptions.fontFamilyDefaultSelection = 'Font not specified';
  return pOptions;
}

Preview

Font size

fontSize

The option fontSize defines the font sizes that appear under the Font Size button from the rich text editor's toolbar.

Initialization JavaScript Code

function( pOptions ){
  pOptions.fontSize = ['12', '14', '18'];
  return pOptions;
}

Preview

fontSizeSelection

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

Initialization JavaScript Code

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

Enabled

Disabled

fontSizeDefaultSelection

The option fontSizeDefaultSelection defines what text is displayed when the font size is unknown or nothing is selected.

Initialization JavaScript Code

function( pOptions ){
  pOptions.fontSizeDefaultSelection = '?';
  return pOptions;
}

Preview

fontSizeUnit

The option fontSizeUnit defines the unit to be used for the font size.

Initialization JavaScript Code

function( pOptions ){
  pOptions.fontSizeUnit = 'px';
  return pOptions;
}

Styling text

inlineStyles

The option inlineStyles defines inline styles applicable to the currently selected text in a document. To remove inline style, the toolbar button clear formatting must be used.

For example, applying default style Big Red results in adding inline styles to currently selected text:

<span style="font-size: 20px; color: red;">United Codes Rich Text Editor Pro</span>

Initialization JavaScript Code

function( pOptions ){
  pOptions.inlineStyles = {
    "Big Red": "font-size: 20px; color: red;",
    "Small Blue":"font-size: 14px; color: blue;"
  };
    
  return pOptions;
}

Preview

inlineClasses

The option inlineClasses defines CSS class names applicable to the currently selected text in a document. To remove class, the toolbar button clear formatting must be used.

For example, applying default class Highlighted results in adding class fr-class-highlighted to currently selected text:

<span class="fr-class-highlighted">United Codes Rich Text Editor Pro</span>

Notice about inline classes

Inline classes are only visible when a document is displayed along with a custom CSS rules.

Initialization JavaScript Code

function( pOptions ){
  pOptions.inlineClasses = {
    "fr-class-code":"Code",
    "fr-class-highlighted":"Highlighted",
    "fr-class-transparency":"Transparent"
  };
    
  return pOptions;
}

Preview

Colors

colorsBackground

The option colorsBackground defines colors available in color popup for text background.

Initialization JavaScript Code

function( pOptions ){
  pOptions.colorsBackground = [
    '#000000', '#F37934', '#2C82C9', '#41A85F',
    'REMOVE'
  ];
  return pOptions;
}

Preview

colorsText

The option colorsText defines colors available in color popup for selected text.

Initialization JavaScript Code

function( pOptions ){
  pOptions.colorsText = [
    '#000000', '#F37934', '#2C82C9', '#41A85F',
    'REMOVE'
  ];
  return pOptions;
}

Preview

colorsStep

The option colorsStep defines how many colors are displayed in a row in popup for text and background.

Initialization JavaScript Code

function( pOptions ){
  pOptions.colorsStep = 10;
  return pOptions;
}

Text Colors

Background Colors

colorsHEXInput

The option colorsHEXInput allows applying custom HEX color through color popup input. When disabled, the color input is not available.

Initialization JavaScript Code

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

Text Colors

Background Colors