JavaScript/jQuery HtmlEditor Types

AIChangeStyleCommand

Specifies a "change style" command for the "ai" toolbar item.

import { AIChangeStyleCommand } from "devextreme/ui/html_editor"
Type:

AICommandBase

Accepted Values: 'changeStyle'

To allow users to use this command, add its name to the commands array:

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

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

AIChangeStyleOption

Includes all predefined options for the "change style" command.

Type:

Literal Union

Accepted Values: 'formal' | 'informal' | 'technical' | 'business' | 'creative' | 'journalistic' | 'academic' | 'persuasive' | 'narrative' | 'expository' | 'descriptive' | 'conversational'

AIChangeToneCommand

Specifies a "change tone" command for the "ai" toolbar item.

import { AIChangeToneCommand } from "devextreme/ui/html_editor"
Type:

AICommandBase

Accepted Values: 'changeTone'

To allow users to use this command, add its name to the commands array:

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

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

AIChangeToneOption

Includes all predefined options for the "change tone" command.

Type:

Literal Union

Accepted Values: 'professional' | 'casual' | 'straightforward' | 'confident' | 'friendly'

AICommand

The union of all command types.

import { AICommand } from "devextreme/ui/html_editor"
Type:

AICommandBase

|

AIChangeStyleCommand

|

AIChangeToneCommand

|

AITranslateCommand

|

AICustomCommand

Accepted Values: 'summarize'

AICommandBase

Specifies basic options for the "ai" toolbar item commands.

import { AICommandBase } from "devextreme/ui/html_editor"

AICommandName

All predefined command names.

Type:

Literal Union

Accepted Values: 'summarize' | 'proofread' | 'expand' | 'shorten' | 'changeStyle' | 'changeTone' | 'translate' | 'askAI'

Used in:

AICommandNameExtended

An extended type for command names. Includes predefined and custom command names.

import { AICommandNameExtended } from "devextreme/ui/html_editor"
Type:

AICommandName

|

String

Accepted Values: 'custom'

AICustomCommand

Specifies a custom command for the "ai" toolbar item.

import { AICustomCommand } from "devextreme/ui/html_editor"

To define a custom command, do the following:

  • Set name to "custom".
  • Define text for the title in the command list.
  • Create a prompt.
jQuery
index.js
$('.html-editor').dxHtmlEditor({
    aiIntegration,
    toolbar: {
        items: [
            {
                name: 'ai',
                commands: [
                    {
                        name: 'custom',
                        text: 'Target Audience',
                        prompt: () => {
                            return 'Based on the text, who is the most likely target audience? Give a short explanation';
                        },
                    }
                ],
            }, 
        ],
    }
});
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="custom" 
                text="Target Audience"
                [prompt]="targetAudiencePrompt"
            ></dxi-html-editor-command>
        </dxi-html-editor-toolbar-item>
    </dxo-html-editor-toolbar>
</dx-html-editor>
export class AppComponent {
    // ...
    targetAudiencePrompt() {
        return 'Based on the text, who is the most likely target audience? Give a short explanation';
    }
}
Vue
App.vue
<template>
    <DxHtmlEditor
        :ai-integration="aiIntegration"
    >
        <DxToolbar>
            <DxItem name="ai">
                <DxCommand 
                    name="custom"
                    text="Target Audience"
                    :prompt="targetAudiencePrompt" 
                />
            </DxItem>
        </DxToolbar>
    </DxHtmlEditor>
</template>
<script setup lang="ts">
import { DxHtmlEditor, DxToolbar, DxItem, DxCommand } from 'devextreme-vue/html-editor';
// ...
const targetAudiencePrompt = () => {
    return 'Based on the text, who is the most likely target audience? Give a short explanation';
}
</script>
React
App.tsx
import React from 'react';
import HtmlEditor, { Toolbar, Item, Command } from 'devextreme-react/html-editor';

const targetAudiencePrompt = () => {
    return 'Based on the text, who is the most likely target audience? Give a short explanation';
}

export default function App() {
    return (
        <HtmlEditor
            aiIntegration={aiIntegration}
        >
            <Toolbar>
                <Item name="ai">
                    <Command 
                        name="custom" 
                        text="Target Audience"
                        prompt={targetAudiencePrompt}
                    />
                </Item>
            </Toolbar>
        </HtmlEditor>
    );
}

AIToolbarItem

The 'ai' toolbar item.

import { AIToolbarItem } from "devextreme/ui/html_editor"

AITranslateCommand

Specifies a "translate" command for the "ai" toolbar item.

import { AITranslateCommand } from "devextreme/ui/html_editor"
Type:

AICommandBase

Accepted Values: 'translate'

To allow users to use this command, add its name to the commands array:

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

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

AITranslateOption

Includes all predefined options for the "translate" command.

Type:

Literal Union

Accepted Values: 'arabic' | 'chinese' | 'english' | 'french' | 'german' | 'japanese' | 'spanish'

ContentReadyEvent

The type of the contentReady event handler's argument.

import { ContentReadyEvent } from "devextreme/ui/html_editor"
Type:

Object

Used in:

Converter

An object that configures converter settings.

import { Converter } from "devextreme/ui/html_editor"
Type:

Object

DisposingEvent

The type of the disposing event handler's argument.

import { DisposingEvent } from "devextreme/ui/html_editor"
Type:

Object

Used in:

FocusInEvent

The type of the focusIn event handler's argument.

import { FocusInEvent } from "devextreme/ui/html_editor"
Type:

Object

Used in:

FocusOutEvent

The type of the focusOut event handler's argument.

import { FocusOutEvent } from "devextreme/ui/html_editor"
Type:

Object

Used in:

HtmlEditorFormat

Specifies a format of the selected content.

Type:

Literal Union

Accepted Values: 'background' | 'bold' | 'color' | 'font' | 'italic' | 'link' | 'size' | 'strike' | 'script' | 'underline' | 'blockquote' | 'header' | 'indent' | 'list' | 'align' | 'code-block'

Used in:

HtmlEditorImageUploadMode

Specifies how the HTML Editor UI component uploads files.

Type:

Literal Union

Accepted Values: 'base64' | 'server' | 'both'

Used in:

HtmlEditorImageUploadTab

Specifies the tab's name.

Type:

Literal Union

Accepted Values: 'url' | 'file'

Used in:

HtmlEditorPredefinedContextMenuItem

Configures context menu items.

Type:

Literal Union

Accepted Values: 'background' | 'bold' | 'color' | 'font' | 'italic' | 'link' | 'image' | 'strike' | 'subscript' | 'superscript' | 'underline' | 'blockquote' | 'increaseIndent' | 'decreaseIndent' | 'orderedList' | 'bulletList' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'codeBlock' | 'variable' | 'undo' | 'redo' | 'clear' | 'insertTable' | 'insertHeaderRow' | 'insertRowAbove' | 'insertRowBelow' | 'insertColumnLeft' | 'insertColumnRight' | 'deleteColumn' | 'deleteRow' | 'deleteTable' | 'cellProperties' | 'tableProperties'

Used in:

HtmlEditorPredefinedToolbarItem

Configures toolbar items.

Type:

Literal Union

Accepted Values: 'background' | 'bold' | 'color' | 'font' | 'italic' | 'link' | 'image' | 'size' | 'strike' | 'subscript' | 'superscript' | 'underline' | 'blockquote' | 'header' | 'increaseIndent' | 'decreaseIndent' | 'orderedList' | 'bulletList' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'codeBlock' | 'variable' | 'separator' | 'undo' | 'redo' | 'clear' | 'cellProperties' | 'tableProperties' | 'insertTable' | 'insertHeaderRow' | 'insertRowAbove' | 'insertRowBelow' | 'insertColumnLeft' | 'insertColumnRight' | 'deleteColumn' | 'deleteRow' | 'deleteTable' | 'ai'

Used in:

InitializedEvent

The type of the initialized event handler's argument.

import { InitializedEvent } from "devextreme/ui/html_editor"
Type:

Object

Used in:

OptionChangedEvent

The type of the optionChanged event handler's argument.

import { OptionChangedEvent } from "devextreme/ui/html_editor"
Type:

Object

Used in:

ValueChangedEvent

The type of the valueChanged event handler's argument.

import { ValueChangedEvent } from "devextreme/ui/html_editor"
Type:

Object

Used in: