All docs
V25.1
25.1
24.2
The page you are viewing does not exist in version 24.2.
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
Box
Map

JavaScript/jQuery HtmlEditor - toolbar.items.commands

An array of AI commands.

name

The command name.

options

Command options.

Type: any

Only the following commands include predefined options:

  • changeStyle:

    • "formal"
    • "informal"
    • "technical"
    • "business"
    • "creative"
    • "journalistic"
    • "academic"
    • "persuasive"
    • "narrative"
    • "expository"
    • "descriptive"
    • "conversational"
  • changeTone:

    • "professional"
    • "casual"
    • "straightforward"
    • "confident"
    • "friendly"
  • translate

    • "Arabic"
    • "Chinese"
    • "English"
    • "French"
    • "German"
    • "Japanese"
    • "Spanish"

If you use these commands without declaring the options array, all predefined options are available. You can assign only specific options or add custom options:

jQuery
index.js
$('.html-editor').dxHtmlEditor({
    aiIntegration,
    toolbar: {
        items: [
            {
                name: 'ai',
                commands: [
                    {
                        name: 'translate',
                        options: ['English', 'German', 'Chinese', 'Lithuanian'],
                    }
                ],
            }, 
        ],
    }
});
Angular
app.component.html
app.component.ts
<dx-html-editor
    [aiIntegration]="aiIntegration"
>
    <dxo-html-editor-toolbar>
        <dxi-html-editor-toolbar-item name="ai">
            <dxi-html-editor-command name="translate" [options]="translateOptions"></dxi-html-editor-command>
        </dxi-html-editor-toolbar-item>
    </dxo-html-editor-toolbar>
</dx-html-editor>
export class AppComponent {
    // ...
    translateOptions = ['English', 'German', 'Chinese', 'Lithuanian'];
}
Vue
App.vue
<template>
    <DxHtmlEditor
        :ai-integration="aiIntegration"
    >
        <DxToolbar>
            <DxItem name="ai">
                <DxCommand name="translate" :options="translateOptions" />
            </DxItem>
        </DxToolbar>
    </DxHtmlEditor>
</template>
<script setup lang="ts">
import { DxHtmlEditor, DxToolbar, DxItem, DxCommand } from 'devextreme-vue/html-editor';
// ...
const translateOptions = ['English', 'German', 'Chinese', 'Lithuanian'];
</script>
React
App.tsx
import React from 'react';
import HtmlEditor, { Toolbar, Item, Command } from 'devextreme-react/html-editor';

const translateOptions = ['English', 'German', 'Chinese', 'Lithuanian'];

export default function App() {
    return (
        <HtmlEditor
            aiIntegration={aiIntegration}
        >
            <Toolbar>
                <Item name="ai">
                    <Command name="translate" options={translateOptions}/>
                </Item>
            </Toolbar>
        </HtmlEditor>
    );
}

The "custom" command can also include custom options.

prompt

A custom prompt.

Type:

Function

Function parameters:
param:

String

Prompt parameters.

Return Value:

String

The prompt text.

text

The command title.

Type:

String