Justify Plugin

Provides text alignment functionality for the Jodit editor. This plugin adds an align button with dropdown options to align text left, center, right, or justify within block elements.

FeaturesFeatures

• Align button with dropdown menu
• Left, center, right, and justify alignment
• Dynamic button icon/text based on current alignment
• Automatic block wrapping when needed
• Multiple selection support
• Preserves selection across operations
• Visual indication of current alignment

Configuration OptionsConfiguration Options

No additional configuration options. The plugin uses the built-in control configurations for alignment buttons.

(Main Control)align (Main Control)

Dropdown button showing current alignment with options for all alignment types.

Default list: ['center', 'left', 'right', 'justify']

Individual Alignment ControlsIndividual Alignment Controls

• left: Align left (command: justifyLeft)
• center: Align center (command: justifyCenter)
• right: Align right (command: justifyRight)
• justify: Justify text (command: justifyFull)

Basic UsageBasic Usage

const editor = Jodit.make('#editor');
// Use align button in toolbar

Programmatic AlignmentProgrammatic Alignment

const editor = Jodit.make('#editor');

// Align left
editor.execCommand('justifyLeft');

// Align center
editor.execCommand('justifyCenter');

// Align right
editor.execCommand('justifyRight');

// Justify
editor.execCommand('justifyFull');

Custom Align ButtonCustom Align Button

Jodit.make('#editor', {
    controls: {
        align: {
            list: ['left', 'center', 'right']  // Exclude justify
        }
    }
});

justifyLeftjustifyLeft

Aligns text to the left.

justifyCenterjustifyCenter

Centers text.

justifyRightjustifyRight

Aligns text to the right.

justifyFulljustifyFull

Justifies text (distributes evenly).

How It WorksHow It Works

1. Selection Processing: Finds block element(s) containing cursor/selection
2. Block Wrapping: Creates block wrapper if needed (using enterBlock config)
3. Alignment Application: Sets text-align CSS property on block element
4. Button Update: Updates button icon/text to reflect current alignment
5. Active State: Shows button as active when alignment differs from default

Default ValuesDefault Values

The align control treats these values as "default" (not aligned):

• left
• start
• inherit

When current alignment matches default, button appears inactive.

Edge CasesEdge Cases

1. No Block: Wraps inline content in block before applying alignment
2. Multiple Selections: Applies alignment to all selected blocks
3. Default Alignment: Considers left, start, and inherit as default states
4. Button Display: Shows current alignment in button icon or text (if textIcons enabled)

NotesNotes

• Alignment is applied via text-align CSS property
• The plugin automatically wraps inline content in blocks when needed
• Button appears in the indent toolbar group
• Current alignment is detected from computed styles
• Multiple blocks can be aligned simultaneously
• Selection is preserved across alignment operations

justifyjustify

justify(editor): void

Process commands: justifyfull, justifyleft, justifyright, justifycenter

ParametersParameters

ReturnsReturns

void

Defined inDefined in

jodit/src/plugins/justify/justify.ts:130