Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

TranslateAIToolbarItem Class

A toolbar item that translates editor text into the specified language.

Namespace: DevExpress.AIIntegration.Blazor.HtmlEditor

Assembly: DevExpress.AIIntegration.Blazor.HtmlEditor.v24.2.dll

NuGet Package: DevExpress.AIIntegration.Blazor.HtmlEditor

#Declaration

C#
public class TranslateAIToolbarItem :
    BaseAIToolbarItem

#Remarks

Populate the DxHtmlEditor.AdditionalItems collection with the TranslateAIToolbarItem object to add the Translate item to the editor toolbar. This item translates the editor text into the specified language.

Use the Languages property to specify a list of available languages.

Read Tutorial: Get Started with AI-powered Extension for Blazor HTML Editor

View Example: Rich Text Editor and HTML Editor for Blazor - How to integrate AI-powered extensions

Razor
@using DevExpress.AIIntegration.Blazor.HtmlEditor
@using DevExpress.Blazor.HtmlEditor

<DxHtmlEditor>
    <AdditionalItems>
        <SummarizeAIToolbarItem />
        <ExpandAIToolbarItem />
        <ProofreadAIToolbarItem/>
        <ExpandAIToolbarItem />
        <ShortenAIToolbarItem />
        <AskAssistantAIToolbarItem />
        <ChangeStyleAIToolbarItem />
        <ChangeToneAIToolbarItem />
        <TranslateAIToolbarItem Languages="@("English, German, French, Chinese")" />
    </AdditionalItems>
</DxHtmlEditor>

AI-powered Extensions for HtmlEditor

If you assign an array of objects to the Languages property, use the ValueFieldName and TextFieldName properties to specify fields that contain language key values and display texts.

razor
<DxHtmlEditor>
    <AdditionalItems>
        ...
        <TranslateAIToolbarItem Languages="@languages" ValueFieldName="id" TextFieldName="text" />
    </AdditionalItems>
</DxHtmlEditor>

@code {
    public class Language {
        public string id { get; set; }
        public string text { get; set; }
    }
    Language[] languages = {
        new() { id = "English", text = "English"},
        new() { id = "German", text = "Deutsch"},
        new() { id = "Chinese", text = "中國人"},
        new() { id = "Greek", text = "Ελληνικά"}
    };
}

HtmlEditor Translate Toolbar Item

#Inheritance

Object
ComponentBase
DevExpress.AIIntegration.Blazor.Internal.BasePopupItem
BaseAIToolbarItem
TranslateAIToolbarItem
See Also