DevExpress官网

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正式版下载

DevExpress技术交流群12：1028386091      欢迎一起进群讨论

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

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

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

<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

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"]
}
}
}
});

更多DevExpress线上公开课、中文教程资讯请上中文网获取

关于慧都科技

慧都是⼀家⾏业数字化解决⽅案公司，专注于软件、⽯油与⼯业领域，以深⼊的业务理解和⾏业经验，帮助企业实现智能化转型与持续竞争优势。

慧都是DevExpress的中国区的合作伙伴，DevExpress作为用户界面领域的优秀产品，帮助企业高效构建权限管理、数据可视化（如网格/图表/仪表板）、跨平台系统（WinForms/ASP.NET/.NET MAUI）及行业定制解决方案，加速开发并强化交互体验。

相关产品： DevExpress Universal Subscription, DevExtreme跨平台开发框架,