JavaScript/jQuery HtmlEditor Types
AIChangeStyleCommand
Specifies a "change style" command for the "ai" toolbar item.
import { AIChangeStyleCommand } from "devextreme/ui/html_editor"
Type:
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:
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:
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:
Accepted Values: 'professional' | 'casual' | 'straightforward' | 'confident' | 'friendly'
AICommand
The union of all command types.
import { AICommand } from "devextreme/ui/html_editor"
Type:
|
|
|
|
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:
Accepted Values: 'summarize' | 'proofread' | 'expand' | 'shorten' | 'changeStyle' | 'changeTone' | 'translate' | 'askAI'
AICommandNameExtended
An extended type for command names. Includes predefined and custom command names.
import { AICommandNameExtended } from "devextreme/ui/html_editor"
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
nameto "custom". - Define
textfor 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>
);
}AITranslateCommand
Specifies a "translate" command for the "ai" toolbar item.
import { AITranslateCommand } from "devextreme/ui/html_editor"
Type:
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:
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:
Used in:
Converter
An object that configures converter settings.
import { Converter } from "devextreme/ui/html_editor"
Type:
DisposingEvent
The type of the disposing event handler's argument.
import { DisposingEvent } from "devextreme/ui/html_editor"
Type:
Used in:
FocusInEvent
The type of the focusIn event handler's argument.
import { FocusInEvent } from "devextreme/ui/html_editor"
Type:
Used in:
FocusOutEvent
The type of the focusOut event handler's argument.
import { FocusOutEvent } from "devextreme/ui/html_editor"
Type:
Used in:
HtmlEditorFormat
Specifies a format of the selected content.
Type:
Accepted Values: 'background' | 'bold' | 'color' | 'font' | 'italic' | 'link' | 'size' | 'strike' | 'script' | 'underline' | 'blockquote' | 'header' | 'indent' | 'list' | 'align' | 'code-block'
HtmlEditorImageUploadMode
Specifies how the HTML Editor UI component uploads files.
Type:
Accepted Values: 'base64' | 'server' | 'both'
HtmlEditorPredefinedContextMenuItem
Configures context menu items.
Type:
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'
HtmlEditorPredefinedToolbarItem
Configures toolbar items.
Type:
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'
InitializedEvent
The type of the initialized event handler's argument.
import { InitializedEvent } from "devextreme/ui/html_editor"
Type:
Used in:
OptionChangedEvent
The type of the optionChanged event handler's argument.
import { OptionChangedEvent } from "devextreme/ui/html_editor"
Type:
Used in:
ValueChangedEvent
The type of the valueChanged event handler's argument.
import { ValueChangedEvent } from "devextreme/ui/html_editor"
Type:
Used in:
Feedback