The DevExtreme HTML Editor supports AI-powered text editing operations. Users can initiate AI requests and insert results directly into the editor. To activate this feature, you must:
"ai" toolbar item in the toolbar configuration.The default "ai" toolbar item includes the following predefined commands:
You can also specify predefined commands to include in the "ai" item and customize standard command default options (for example, by setting a custom list of target languages for translation). Additionally, you can add a new custom command to the "ai" item by specifying your prompt. In this demo, the custom command is "Extract Keywords". For additional information, check the prompt in code.
[note] This implementation works with selected text. If nothing is selected, the entire text is altered.
@section ExternalDependencies {
<script src="https://cdn.jsdelivr.net/npm/devextreme-quill@1.7.3/dist/dx-quill.min.js"></script>
<script type="module">
import { AzureOpenAI } from "https://esm.sh/openai@4.73.1";
window.AzureOpenAI = AzureOpenAI;
</script>
}
@(Html.DevExtreme().HtmlEditor()
.ID("html-editor")
.Height(530)
.Value(new JS("markup"))
.AiIntegration(new JS("aiIntegration"))
.Toolbar(toolbar => toolbar
.Items(items => {
items.Add().Name("ai").Commands(new object [] {
"summarize",
"proofread",
"expand",
"shorten",
"changeStyle",
"changeTone",
"translate",
"askAI",
new {
name = "custom",
text = "Extract Keywords",
prompt = new JS("() => { return 'Extract a list of keywords from the text and return it as a comma-separated string' }")
}
});
})
.Items(items => {
items.Add().Name(HtmlEditorToolbarItem.Separator);
items.Add().Name(HtmlEditorToolbarItem.Undo);
items.Add().Name(HtmlEditorToolbarItem.Redo);
})
)
)
<script>
let aiService;
const deployment = 'gpt-4o-mini';
const apiVersion = '2024-02-01';
const endpoint = 'https://public-api.devexpress.com/demo-openai';
const apiKey = 'DEMO';
async function getAIResponse(messages, signal) {
const params = {
messages,
model: deployment,
max_tokens: 1000,
temperature: 0.7,
};
return aiService.chat.completions.create(params, { signal });
}
const aiIntegration = new DevExpress.aiIntegration({
sendRequest({ prompt }) {
const controller = new AbortController();
const signal = controller.signal;
const aiPrompt = [
{ role: 'system', content: prompt.system, },
{ role: 'user', content: prompt.user, },
];
const promise = new Promise(async (resolve, reject) => {
try {
const response = await getAIResponse(aiPrompt, signal);
const result = response.choices[0].message?.content;
resolve(result);
} catch {
reject();
}
});
const result = {
promise,
abort: () => {
controller.abort();
},
};
return result;
},
});
$(() => {
aiService = new AzureOpenAI({
dangerouslyAllowBrowser: true,
deployment,
endpoint,
apiVersion,
apiKey,
});
});
const markup = `
<h2>
<img src="../../Content/images/widgets/HtmlEditor.svg" alt="HtmlEditor" />
Formatted Text Editor (HTML Editor)
</h2>
<br>
<p>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format textual and visual content and store it as HTML.</p>
<p>Supported features:</p>
<ul>
<li>Inline formats:
<ul>
<li>Bold, italic, strikethrough text formatting</li>
<li>Font, size, color changes (HTML only)</li>
</ul>
</li>
<li>Block formats:
<ul>
<li>Headers</li>
<li>Text alignment</li>
<li>Lists (ordered and unordered)</li>
<li>Code blocks</li>
<li>Quotes</li>
</ul>
</li>
<li>Custom formats</li>
<li>Mail-merge placeholders (for example, %username%)</li>
<li>Adaptive toolbar for working images, links, and color formats</li>
<li>Image upload: drag-and-drop images onto the form, select files from the file system, or specify a URL.</li>
<li>Copy-paste rich content (unsupported formats are removed)</li>
<li>Tables support</li>
</ul>
`;
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
namespace DevExtreme.MVC.Demos.Controllers {
public class HtmlEditorController : Controller {
public ActionResult AITextEditing() {
return View();
}
}
}.dx-htmleditor-content img {
vertical-align: middle;
padding-right: 10px;
}