JavaScript/jQuery HtmlEditor - 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>
);
}options
Command options.
Type:
any
Only the following commands include predefined options:
-
- "formal"
- "informal"
- "technical"
- "business"
- "creative"
- "journalistic"
- "academic"
- "persuasive"
- "narrative"
- "expository"
- "descriptive"
- "conversational"
-
- "professional"
- "casual"
- "straightforward"
- "confident"
- "friendly"
-
- "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 parameters:
param:
Prompt parameters.
Return Value:
The prompt text.
Feedback