Angular HtmlEditor - toolbar.items.commands

An array of AI commands.

Selector: dxi-command

Type:

Array<AICommandName | AICommand>

name

The command name.

Selector: dxo-name

Type:

AICommandNameExtended

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.