DevExpress JS & ASP.NET Core v25.1新版亮点 - 新增AI文本编辑功能

DevExtreme 拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序。从Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和响应式UI小部件集合，可在传统Web和下一代移动应用程序中使用。该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

DevExpress JS & ASP.NET Core v25.1已全新发布，新版本在HTML编辑器中新增了AI文本编辑功能等，欢迎下载最新版组件体验！

点击获取DevExtreme v25.1正式版下载

HTML编辑器 -AI驱动的文本编辑

在DevExtreme v25.1中，用户现在可以将预定义的和自定义的AI提示应用于选定的文本或整个内容。

通过点击HTML编辑器工具栏上的AI按钮访问AI命令。

"ai"工具栏项包括以下预定义命令：

总结
校对
扩大
缩短
改变样式
改变语气
翻译
问人工智能助手

一旦用户选择了一个命令，AI Assistant对话框就会出现在屏幕上。然后用户可以复制生成的文本，将其直接插入编辑器中，如果出现问题，可以重新运行生成，在不离开对话框窗口的情况下运行不同的命令，或者为命令选择另一个选项。

Ask AI助手命令允许用户运行自己的提示来更改HTML编辑器的内容。

在DevExtreme驱动的应用程序中设置AI驱动的文本编辑：

通过aiIntegration选项将HTML编辑器链接到AI服务。
在工具栏配置中指定"ai"工具栏项。

整套预定义的AI项目命令将在设置后可用。您还可以指定希望在"ai"项中包含哪些预定义命令，并自定义默认选项（例如，通过设置用于翻译的目标语言的自定义列表）。此外，还可以通过指定自己的提示符为AI项目添加新的自定义命令。

注意：如果使用Angular来实现这个功能，您必须在使用工具栏项时使用官方新的配置组件。

Angular

javascript 复制代码

app.component.html
<dx-html-editor [aiIntegration]="aiIntegration">
<dx-html-editor-toolbar>
<dx-html-editor-toolbar-item name="ai" [commands]="aiCommands"></dx-html-editor-toolbar-item>
</dx-html-editor-toolbar>
</dx-html-editor>

app.component.ts
import { AIIntegration } from 'devextreme-angular/common/ai-integration';
// ...
export class AppComponent {
aiIntegration = new AIIntegration(provider);
aiCommands = {
"summarize",
{
name: "translate",
text: "Translate",
options: ["Arabic", "Chinese", "English", "French", "German", "Japanese", "Spanish"]
}
};
}

React

javascript 复制代码

import { AIIntegration } from 'devextreme-react/common/ai-integration';
const aiIntegration = new AIIntegration(provider);
const aiCommands = {
"summarize",
{
name: "translate",
text: "Translate",
options: ["Arabic", "Chinese", "English", "French", "German", "Japanese", "Spanish"]
}
};

const App = () => {
return (
<HtmlEditor aiIntegration={aiIntegration}>
<Toolbar>
<Item name="ai" commands={aiCommands} />
</Toolbar>
</HtmlEditor>
);
}

Vue

html 复制代码

<template>
<DxHtmlEditor :ai-integration="aiIntegration">
<DxToolbar>
<DxItem name="ai" :commands="aiCommands" />
</DxToolbar>
</DxHtmlEditor>
</template>

<script setup lang="ts">
import { AIIntegration } from 'devextreme-vue/common/ai-integration';
const aiIntegration = new AIIntegration(provider);
const aiCommands = {
"summarize",
{
name: "translate",
text: "Translate",
options: ["Arabic", "Chinese", "English", "French", "German", "Japanese", "Spanish"]
}
};
</script>

jQuery

javascript 复制代码

const aiIntegration = new DevExpress.aiIntegration(provider);
$("#htmlEditor").dxHtmlEditor({
// ...
aiIntegration,
toolbar: {
name: "ai",
commands: {
"summarize",
{
name: "translate",
text: "Translate",
options: ["Arabic", "Chinese", "English", "French", "German", "Japanese", "Spanish"]
}
}
}
});