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