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

Right-to-left Support

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
  • 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