CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Class

InlineAutoformatEditing (autoformat)

@ckeditor/ckeditor5-autoformat/src/inlineautoformatediting

class
See source

The inline autoformatting engine. It allows to format various inline patterns. For example, it can be configured to make "foo" bold when typed **foo** (the ** markers will be removed).

The autoformatting operation is integrated with the undo manager, so the autoformatting step can be undone if the user's intention was not to format the text.

See the constructors documentation to learn how to create custom inline autoformatters. You can also use the Autoformat feature which enables a set of default autoformatters (lists, headings, bold and italic).

Filtering

Properties

Static properties

  • pluginName

    static

Methods

  • constructor( editor, testRegexpOrCallback, attributeOrCallback )

    Enables autoformatting mechanism for a given Editor.

    See source

    It formats the matched text by applying the given model attribute or by running the provided formatting callback. On every change applied to the model the autoformatting engine checks the text on the left of the selection and executes the provided action if the text matches given criteria (regular expression or callback).

    Parameters

    editor : Editor

    The editor instance.

    testRegexpOrCallback : function | RegExp

    The regular expression or callback to execute on text. Provided regular expression must have three capture groups. The first and the third capture group should match opening and closing delimiters. The second capture group should match the text to format.

    // Matches the `**bold text**` pattern.
// There are three capturing groups:
// - The first to match the starting `**` delimiter.
// - The second to match the text to format.
// - The third to match the ending `**` delimiter.
new InlineAutoformatEditing( editor, /(\*\*)([^\*]+?)(\*\*)$/g, 'bold' );

    When a function is provided instead of the regular expression, it will be executed with the text to match as a parameter. The function should return proper "ranges" to delete and format.

    {
    remove: [
        [ 0, 1 ],    // Remove the first letter from the given text.
        [ 5, 6 ]    // Remove the 6th letter from the given text.
    ],
    format: [
        [ 1, 5 ]    // Format all letters from 2nd to 5th.
    ]
}
    attributeOrCallback : function | String

    The name of attribute to apply on matching text or a callback for manual formatting. If callback is passed it should return false if changes should not be applied (e.g. if a command is disabled).

    // Use attribute name:
new InlineAutoformatEditing( editor, /(\*\*)([^\*]+?)(\*\*)$/g, 'bold' );

// Use formatting callback:
new InlineAutoformatEditing( editor, /(\*\*)([^\*]+?)(\*\*)$/g, ( writer, rangesToFormat ) => {
    const command = editor.commands.get( 'bold' );

    if ( !command.isEnabled ) {
        return false;
    }

    const validRanges = editor.model.schema.getValidRanges( rangesToFormat, 'bold' );

    for ( let range of validRanges ) {
        writer.setAttribute( 'bold', true, range );
    }
} );