JavaScript/jQuery Html Editor - AI-powered Text Editing

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:

Link the HTML Editor to an AI service through the aiIntegration option.
Specify the "ai" toolbar item in the toolbar configuration.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { const aiService = new AzureOpenAI({ dangerouslyAllowBrowser: true, deployment, endpoint, apiVersion, apiKey, }); async function getAIResponse(messages, signal) { const params = { messages, model: deployment, max_tokens: 1000, temperature: 0.7, }; const response = await aiService.chat.completions.create(params, { signal }); const result = response.choices[0].message?.content; return result; } 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 = getAIResponse(aiPrompt, signal); const result = { promise, abort: () => { controller.abort(); }, }; return result; }, }); $('.html-editor').dxHtmlEditor({ height: 530, value: markup, aiIntegration, toolbar: { items: [ { name: 'ai', commands: [ 'summarize', 'proofread', 'expand', 'shorten', 'changeStyle', 'changeTone', 'translate', 'askAI', { name: 'custom', text: 'Extract Keywords', prompt: () => { return 'Extract a list of keywords from the text and return it as a comma-separated string'; }, }, ], }, 'separator', 'undo', 'redo' ], } }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx.light.css" /> <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> <script src="js/dx.all.js"></script> <script src="js/dx.ai-integration.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="html-editor"></div> </div> </body> </html>

.dx-htmleditor-content img { vertical-align: middle; padding-right: 10px; }

const deployment = 'gpt-4o-mini'; const apiVersion = '2024-02-01'; const endpoint = 'https://public-api.devexpress.com/demo-openai'; const apiKey = 'DEMO'; const markup = ` <h2> <img src="../../../../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> `;

The default "ai" toolbar item includes the following predefined commands:

Summarize
Proofread
Expand
Shorten
Change style
Change tone
Translate
Ask AI assistant (allows users to run their own prompts to alter HTML Editor content)

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.