🔗 Extending Autolinks

    The functionality is available in TOAST UI Editor (henceforth referred to as ‘Editor’) without any configuration, because the Editor follows the CommonMark specification.

    image

    More examples related with the Extended Autolinks can be found .

    The Extended Autolinks on Editor can be used by configuring the extendedAutolinks option. If the extendedAutolinks option is not otherwise defined, Editor will automatically configure the false value to make the Extended Autolinks be not worked internally.

    Editor enables users to define their own Extended Autolinks by providing the callback function option. This option can be useful when you want to support the specific link format.

    To customize the Extended Autolinks, extendedAutolinks option should be function. The following is a simple example snippet for configuring the option.

    1. const reToastuiEditorRepo = /tui\.editor/g;
    3. const editor = new Editor({
    4.   extendedAutolinks: (content) => {
    5.     const matched = content.match(reToastuiEditorRepo);
    6.     if (matched) {
    7.       return matched.map(m =>
    8.         ({
    9.           text: 'toastui-editor',
    10.           url: 'https://github.com/nhn/tui.editor',
    11.           range: [0, 1]
    13.     }
    14.     return null;
    15.   }
    16. });

    As the code above demonstrates, the content parameter which has the editing content is passed to the extendedAutolinks callback function. If the desired link formats are found in the content, the result should be the array, and each element has text, url and range properties for the information of link.

    • text: The link label
    • url: The link destination
    • : The link range for calculating source position internally