Formatting
These options control the formatting capabilities of the editor, including custom formats, font selection, color pickers, and indentation.
Custom formats
| Option | Type | Default | Description |
|---|---|---|---|
formats | object | — | Custom format definitions. Each key is a format name and the value defines the element, styles, attributes, or classes to apply. |
format_empty_lines | boolean | false | Apply block formats to empty lines in a selection. |
format_noneditable_selector | string | '' | CSS selector for elements that should be treated as non-editable during format operations. |
preview_styles | string/false | — | CSS properties used to generate a live preview in the Formats dropdown. Set to false to disable previews. |
Style formats dropdown
| Option | Type | Default | Description |
|---|---|---|---|
style_formats | object[] | — | Custom entries for the Formats/Styles dropdown. Each entry can define title, format, block, inline, selector, classes, styles, and attributes. |
style_formats_merge | boolean | false | Merge custom style_formats with the default list instead of replacing it. |
style_formats_autohide | boolean | false | Hide formats in the dropdown that cannot be applied to the current selection. |
Fonts
| Option | Type | Default | Description |
|---|---|---|---|
font_family_formats | string | — | Semicolon-delimited list of font families for the Font Family dropdown. Format: 'Label=font-family-value;...'. |
font_size_formats | string | '8pt 10pt 12pt 14pt 18pt 24pt 36pt' | Space-separated list of font sizes for the Font Size dropdown. |
font_size_input_default_unit | string | 'pt' | Default unit appended to numeric values entered in the font size input field. |
font_size_style_values | string | — | Mapping from CSS font size values to legacy numeric sizes used by the fontSize command. |
font_size_legacy_values | string | — | Mapping of legacy font size keyword values. |
font_size_classes | string | — | Space-separated CSS class names applied for each font size level instead of inline styles. |
default_font_stack | string | — | Default font stack applied to content when no explicit font is set. |
Block and line formatting
| Option | Type | Default | Description |
|---|---|---|---|
block_formats | string | — | Entries for the Blocks dropdown. Format: 'Paragraph=p;Header 1=h1;...'. |
line_height_formats | string | '1 1.1 1.2 1.3 1.4 1.5 2' | Space-separated list of line height values for the Line Height control. |
content_langs | object[] | — | Available content languages for the Lang formatting command. Each entry has title and code properties, and optionally customCode. |
Colors
| Option | Type | Default | Description |
|---|---|---|---|
color_map | string[] | — | Array of hex color values and labels used in both foreground and background color pickers. Alternating entries: ['#hex', 'Label', ...]. |
color_map_foreground | string[] | — | Color map used only for the foreground (text) color picker. Overrides color_map for text color. |
color_map_background | string[] | — | Color map used only for the background (highlight) color picker. Overrides color_map for background color. |
color_cols | number | — | Number of columns in both color picker grids. |
color_cols_foreground | number | — | Number of columns in the foreground color picker. Overrides color_cols. |
color_cols_background | number | — | Number of columns in the background color picker. Overrides color_cols. |
custom_colors | boolean | true | Allow users to enter custom color values in addition to the predefined palette. |
color_default_foreground | string | — | Default foreground color applied by the text color button when no color is selected. |
color_default_background | string | — | Default background color applied by the highlight button when no color is selected. |
Indentation
| Option | Type | Default | Description |
|---|---|---|---|
indentation | string | '40px' | Amount of indentation applied by the Indent/Outdent commands. |
indent_use_margin | boolean | false | Use margin-left instead of padding-left for indentation. |
Example
editor42.init({
selector: 'textarea',
font_family_formats: 'Arial=arial,helvetica,sans-serif; Courier=courier new,monospace; Georgia=georgia,serif',
font_size_formats: '10px 12px 14px 16px 18px 24px 36px',
line_height_formats: '1 1.2 1.5 2 2.5',
color_map: [
'#000000', 'Black',
'#FF0000', 'Red',
'#00FF00', 'Green',
'#0000FF', 'Blue'
],
custom_colors: true,
indentation: '30px',
style_formats: [
{ title: 'Note', block: 'p', classes: 'note' },
{ title: 'Code', inline: 'code' }
],
style_formats_merge: true
});