Search results

Working with Paragraph Formatting

Document editor supports various paragraph formatting options such as text alignment, indentation, paragraph spacing, and more.

Indentation

You can modify the left or right indentation of selected paragraphs using the following sample code.

documenteditor.selection.paragraphFormat.leftIndent= 24;
documenteditor.selection.paragraphFormat.rightIndent= 24;

Special indentation

You can define special indent for first line of the paragraph using the following sample code.

documenteditor.selection.paragraphFormat.firstLineIndent= 24;

Increase indent

You can increase the left indent of selected paragraphs by a factor of 36 points using the following sample code.

documenteditor.editor.increaseIndent()

Decrease indent

You can decrease the left indent of selected paragraphs by a factor of 36 points using the following sample code.

documenteditor.editor.decreaseIndent()

Text alignment

You can get or set the text alignment of selected paragraphs using the following sample code.

documenteditor.selection.paragraphFormat.textAlignment= 'Center' | 'Left' | 'Right' | 'Justify';

You can toggle the text alignment of selected paragraphs by specifying a value using the following sample code.

documenteditor.editor.toggleTextAlignment('Center' | 'Left' | 'Right' | 'Justify');

Line spacing and its type

You can define the line spacing and its type for selected paragraphs using the following sample code.

documenteditor.selection.paragraphFormat.lineSpacingType='AtLeast';
documenteditor.selection.paragraphFormat.lineSpacing= 6;

Paragraph spacing

You can define the spacing before or after the paragraph by using the following sample code.

documenteditor.selection.paragraphFormat.beforeSpacing= 24;
documenteditor.selection.paragraphFormat.afterSpacing= 24;

Toolbar with paragraph formatting options

The following sample demonstrates the paragraph formatting options using a toolbar.

razor
<div id="toolbar"></div>
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableContextMenu(true).EnableEditorHistory(true).Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {

        documenteditor = document.getElementById("container").ej2_instances[0];
        documenteditor.resize();
        updateContainerSize();

        function toolbarButtonClick(arg) {
            switch (arg.item.id) {
                case 'AlignLeft':
                    //Toggle the Left alignment for selected or current paragraph
                    documenteditor.editor.toggleTextAlignment('Left');
                    break;
                case 'AlignRight':
                    //Toggle the Right alignment for selected or current paragraph
                    documenteditor.editor.toggleTextAlignment('Right');
                    break;
                case 'AlignCenter':
                    //Toggle the Center alignment for selected or current paragraph
                    documenteditor.editor.toggleTextAlignment('Center');
                    break;
                case 'Justify':
                    //Toggle the Justify alignment for selected or current paragraph
                    documenteditor.editor.toggleTextAlignment('Justify');
                    break;
                case 'IncreaseIndent':
                    //Increase the left indent of selected or current paragraph
                    documenteditor.editor.increaseIndent();
                    break;
                case 'DecreaseIndent':
                    //Decrease the left indent of selected or current paragraph
                    documenteditor.editor.decreaseIndent();
                    break;
                case 'ClearFormat':
                    documenteditor.editor.clearFormatting();
                    break;
            }
        }
        //Change the line spacing of selected or current paragraph
        function lineSpacingAction(args) {
            var text = args.item.text;
            switch (text) {
                case 'Single':
                    documenteditor.selection.paragraphFormat.lineSpacing = 1;
                    break;
                case '1.15':
                    documenteditor.selection.paragraphFormat.lineSpacing = 1.15;
                    break;
                case '1.5':
                    documenteditor.selection.paragraphFormat.lineSpacing = 1.5;
                    break;
                case 'Double':
                    documenteditor.selection.paragraphFormat.lineSpacing = 2;
                    break;
            }
            setTimeout(function () {
                documenteditor.focusIn();
            }, 30);
        }
        documenteditor.selectionChange = function () {
            setTimeout(function () {
                onSelectionChange();
            }, 20);
        };
        // Selection change to retrieve formatting
        function onSelectionChange() {
            if (documenteditor.selection) {
                var paragraphFormat = documenteditor.selection.paragraphFormat;
                var toggleBtnId = ['AlignLeft', 'AlignCenter', 'AlignRight', 'Justify'];
                for (var i = 0; i < toggleBtnId.length; i++) {
                    var toggleBtn = document.getElementById(
                        toggleBtnId[i]
                    );
                    toggleBtn.classList.remove('e-btn-toggle');
                }
                if (paragraphFormat.textAlignment === 'Left') {
                    document.getElementById('AlignLeft').classList.add('e-btn-toggle');
                } else if (paragraphFormat.textAlignment === 'Right') {
                    document.getElementById('AlignRight').classList.add('e-btn-toggle');
                } else if (paragraphFormat.textAlignment === 'Center') {
                    document
                        .getElementById('AlignCenter')
                        .classList.add('e-btn-toggle');
                } else {
                    document.getElementById('Justify').classList.add('e-btn-toggle');
                }
                // #endregion
            }
        }
        //Toolbar configuration to add paragraph formatting options
        var toolBar = new ej.navigations.Toolbar({
            clicked: toolbarButtonClick,
            items: [
                {
                    prefixIcon: 'e-de-icon-AlignLeft',
                    tooltipText: 'Align Left',
                    id: 'AlignLeft',
                },
                {
                    prefixIcon: 'e-de-icon-AlignCenter',
                    tooltipText: 'Align Center',
                    id: 'AlignCenter',
                },
                {
                    prefixIcon: 'e-de-icon-AlignRight',
                    tooltipText: 'Align Right',
                    id: 'AlignRight',
                },
                {
                    prefixIcon: 'e-de-icon-Justify',
                    tooltipText: 'Justify',
                    id: 'Justify',
                },
                {
                    prefixIcon: 'e-de-icon-IncreaseIndent',
                    tooltipText: 'Increase Indent',
                    id: 'IncreaseIndent',
                },
                {
                    prefixIcon: 'e-de-icon-DecreaseIndent',
                    tooltipText: 'Decrease Indent',
                    id: 'DecreaseIndent',
                },
                { type: 'Seperator' },
                {
                    id: 'lineSpacing',
                }, {
                    prefixIcon: 'e-de-icon-ClearAll',
                    tooltipText: 'ClearFormatting',
                    id: 'ClearFormat',
                }
            ],
        });
        toolBar.appendTo('#toolbar');
        var items = [
            {
                text: 'Single',
            },
            {
                text: '1.15',
            },
            {
                text: '1.5',
            },
            {
                text: 'Double',
            },
        ];
        var dropdown = new ejs.splitbuttons.DropDownButton({
            items: items,
            iconCss: 'e-de-icon-LineSpacing',
            select: lineSpacingAction,
        });
        dropdown.appendTo('#lineSpacing');

    });
</script>

<style>
    #container {
        width: 100%;
        height: 100%
    }
</style>

See Also