customizeModules.md

id	dxHtmlEditor.Options.customizeModules
type	function(config)

---

shortDescription

Allows you to customize the DevExtreme Quill and 3rd-party modules.

param(config): Object

Module configurations.

---

The DevExtreme Quill modules and the API you can use to customize them are described in the Modules documentation section. For example, the History module, which handles the undo and redo operations, can be customized as follows:

---

jQuery

<!-- tab: index.js -->
$("#html-editor").dxHtmlEditor({
    customizeModules(config) {
        config.history = {
            delay: 0,
            maxStack: 5000
        };
    }
});

Angular

<!-- tab: app.component.html -->
<dx-html-editor
    [customizeModules]="customizeQuillModules">
</dx-html-editor>

<!-- tab: app.component.ts -->
import { Component } from '@angular/core';
import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

// ...
export class AppComponent {
    customizeQuillModules(config) {
        config.history = {
            delay: 0,
            maxStack: 5000,
        }; 
    }
}

Vue

<!-- tab: App.vue -->
<template>
    <DxHtmlEditor
        :customize-modules="customizeQuillModules"
    />
</template>

<script>
import { DxHtmlEditor } from 'devextreme-vue/html-editor';

function customizeQuillModules(config) {
    config.history = {
        delay: 0,
        maxStack: 5000,
    }; 
}
</script>

React

<!-- tab: App.tsx -->
import React from 'react';
import { HtmlEditor } from 'devextreme-react/html-editor';

export default function App() {
    const customizeQuillModules = useCallback((config) => {
        config.history = {
            delay: 0,
            maxStack: 5000,
        };
    }, []);

    return (
        <HtmlEditor
            customizeModules={customizeQuillModules}
        />
    );
}

---

You can configure customizeModules to modify the keyboard navigation behavior of HtmlEditor using keyboard.inlineTabInsertion:

---

jQuery

<!-- tab: index.js -->
$("#html-editor").dxHtmlEditor({
    customizeModules(config) {
        config.keyboard.inlineTabInsertion = false;
    }
});

Angular

<!-- tab: app.component.html -->
<dx-html-editor
    [customizeModules]="customizeQuillModules">
</dx-html-editor>

<!-- tab: app.component.ts -->
import { Component } from '@angular/core';
import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

// ...
export class AppComponent {
    customizeQuillModules(config) {
        config.keyboard.inlineTabInsertion = false;
    }
}

Vue

<!-- tab: App.vue -->
<template>
    <DxHtmlEditor
        :customize-modules="customizeQuillModules"
    />
</template>

<script>
import { DxHtmlEditor } from 'devextreme-vue/html-editor';

function customizeQuillModules(config) {
    config.keyboard.inlineTabInsertion = false;
}
</script>

React

<!-- tab: App.tsx -->
import React from 'react';
import { HtmlEditor } from 'devextreme-react/html-editor';

export default function App() {
    const customizeQuillModules = useCallback((config) => {
        config.keyboard.inlineTabInsertion = false;
    }, []);

    return (
        <HtmlEditor
            customizeModules={customizeQuillModules}
        />
    );
}

---

If 3rd-party modules are used in the HTML Editor, refer to their documentation for information on the API.

#####See Also#####

• get(componentPath)
• register(components)