New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    Right-to-left Support

    • Demo Configurator
    Select Language for the Content

    >Note: Since Q2 2013 the RadEditor control can be set to Right-to-Left mode by using the dir DOM attribute or the direction CSS property set to ltr value, targeting the HTML, BODY or the wrapper element.

    The RadEditor supports right-to-left (RTL) language locales. In order to configure the RadEditor in RTL mode you should go through the following steps:

    1. RTL support for RadEditor:

    - register the Editor_RTL.css file in the <head></head> section of your webpage, i.e:

    - <link rel="stylesheet" type="text/css" href="./RTL/Editor_RTL.css" />

    2. RTL for RadEditor dialogs:

    - Use the DialogsCssFile property to include the RadEditor_Dialogs_RTL.css file in the dialogs of RadEditor:

    - <telerik:RadEditor DialogsCssFile="./RTL/RadEditor_Dialogs_RTL.css"></telerik:RadEditor>

    3. RTL for the content area of RadEditor:

    - Use the ContentAreaCssFile property of RadEditor to include the EditorContentArea_RTL.css file:

    - <telerik:RadEditor runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools" Height="350px" DialogsCssFile="./RTL/RadEditor_Dialogs_RTL.css" ContentAreaCssFile="./RTL/EditorContentArea_RTL.css"></telerik:RadEditor>


    You are able to download the needed CSS files using the following links:

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    • Languages.xml
    <%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Editor.RightToLeft.DefaultCS"Language="C#"  %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
    <link href="../Common/styles.css" rel="stylesheet" type="text/css" />
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-container">
            <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" Height="350px" DialogsCssFile="./RTL/RadEditor_Dialogs_RTL.css"
                ContentAreaCssFile="./RTL/EditorContentArea_RTL.css">
                <ImageManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations" />
                <FlashManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations" />
                <MediaManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations" />
                <DocumentManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations" />
                <TemplateManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    SearchPatterns="*.html,*.html" />
                <Modules>
                    <telerik:EditorModule Visible="false" />
                </Modules>
            </telerik:RadEditor>
        </div>
     
        <telerik:RadAjaxManager runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadioButtonList1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadEditor1" LoadingPanelID="LoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadioButtonList1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
     
        <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1"></telerik:RadAjaxLoadingPanel>
     
        <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
            <Views>
                <qsf:View runat="server">
                    <qsf:ConfiguratorColumn runat="server" Title="Select Language for the Content">
                        <qsf:RadioButtonList ID="RadioButtonList1" runat="server" Orientation="Horizontal"
                            AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                            <asp:ListItem Text="Latin" Value="Latin" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Arabic" Value="Arabic"></asp:ListItem>
                            <asp:ListItem Text="Farsi" Value="Farsi"></asp:ListItem>
                            <asp:ListItem Text="Hebrew" Value="Hebrew"></asp:ListItem>
                        </qsf:RadioButtonList>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance