[Solved] Set Editor to rlt mode?

[woaksie]

Is there a way to set the editor for right-to-left languages programmatically?

[Schlurk]

You could always define the properties in charge of the content/dialogue CSS using the following code-behind:

RadEditor1.ContentAreaCssFile = "~/Path/ContentCSS.css'"
RadEditor1.DialogsCssFile = "~/Path/DialogsCSS.css";

And you can follow the guide-lines in this demo for more information.

[woaksie]

Thanks for that pointer. The names of the css files in your code are different than the example code. I found the css files mentioned in the demo in C:\Program Files\Telerik\RadControls for ASP.NET AJAX Q2 2009\Live Demos\Editor\Examples\RightToLeft\RTL on my machine. I followed those instructions and it is not fully working. It has messed up the format of the rest of the page for a start with text appearing right justified and jumbled outside the editor.

In the actual editor when I type text it enters right to left (good) but when I press space the cursor jumps to the far right. When I type more characters the cursor jumps back to the left (where it should have been) and text enters correctly. 

Also in the editor the cursor starts on the left side when it should start on the right side. Text entered does appear correctly right to left but it is left justified instead of right justified.

The demo on the telerik site does not exhibit this behaviour.

P.S. I have Farsi installed on my machine so can test properly.

[woaksie]

Ok, I got it working and fixed my issues.

First I incorrectly specified my css file paths as

/css/RadEditor_Dialogs_RTL.css and /css/EditorContentArea_RTL.css

for the two editor css files. I fixed this by changing them to

~/css/RadEditor_Dialogs_RTL.css and ~/css/EditorContentArea_RTL.css 

Adding the ~ solved the problem.

I also removed the line

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

completely and that removed all the messed up layout on the page the editor was on.

[mehr mehr]

i have an old version of teleric controls and it  does not have right to left  example to use it's css  where can i download  EditorContentArea_RTL.css  &  RadEditor_Dialogs_RTL.css

[Schlurk]

I'm not sure if this will work with the older controls, but here are the three files associated with the RTL stuff from the current demos:

Editor_RTL.css

.reWrapper_center, .reRightVerticalSide, .reLeftVerticalSide, .reWrapper_corner
{
    visibility: hidden;
}

.reToolZone
{
    background-color: transparent !important;
}

.reResizeCell div
{
    visibility: hidden !important;
}

.reToolbar
{
    float: rightright !important;
}

.reDropDownBody .reTlbVertical .reToolbar
{
    float: left !important;
}
.reDropDownBody .reTlbVertical .reToolbar .reTool_text
{
    padding-right: 5px;
}
* + html .reDropDownBody .reTlbVertical .reToolbar .reTool_text
{
    width: 198px;
    padding-right: 0;
}
* + html .reDropDownBody .reTlbVertical .reToolbar li
{
    float: rightright !important;
}
.reDropDownBody .reTlbVertical .reToolbar .reTool_text:hover
{
    background: #e7f1ff;
}


.reDropDownBody span
{
    float: rightright !important;
    margin-right: 4px;
}

.reDropDownBody .reButton_text
{
    float: rightright !important;
    text-align: rightright !important;
    width: 100px !important;
    margin-right: 0;
}

.reDropDownBody .reTool_text
{
    background-image: none !important;
}

.reDropdown
{
    background-position: left -92px !important;
    padding-left: 3px !important;
    padding-right: 1px !important;
}

.reSplitButton span
{
    float: rightright !important;
    margin-right: 2px !important;
}

.reToolbar .reDropdown, .reToolbar .reTool_disabled.reDropdown:hover, .reToolbarWrapper .reToolbar .reDropdown:hover
{
    background-position: -24px -360px !important;
}
.reToolbarWrapper .reToolbar .reDropdown:hover
{
    background-position: -1988px 0 !important;
}

EditorContentArea_RTL.css:

.RadEWrongWord
{
    background-color: yellow;
}
.RadEDomMouseOver
{
    background-color:#ffffcc;
}

body
{
    padding:3px;
    background-image: none;
    margin: 0px;
    word-wrap: break-word;
    direction: rtl;
    overflow: auto;
}

form
{
    background-color:#efefef;
    border:1px dashed #555555;
}

table
{
    BORDER-RIGHT: #999999 1px dashed;
    BORDER-BOTTOM: #999999 1px dashed;
}

table td
{
    PADDING: 1px;
    BORDER-TOP: #999999 1px dashed;
    BORDER-LEFT: #999999 1px dashed;
}

table th
{
    PADDING: 1px;
    BORDER-TOP: #000000 1px dashed;
    BORDER-LEFT: #000000 1px dashed;
}

RadEditor_Dialogs_RTL.css:

html, body, form
{
    direction: rtl;
}

.reBottomcell table
{
    float: left !important;
    margin: 4px 0 0 10px;
}

.rightAlignedInputLabel, .reToolbar
{
    float: rightright;
}

.reBottomcell table td
{
    padding-right: 4px;
}

.UploadPanel
{
    padding-right: 12px;
}

.filesize
{
    width: 70px;
}

.filemanagergrid td
{
    text-align: rightright;
}

.reBottomcell
{
    text-align: left;
}

.reBottomcell .radfdSkinnedFormButton, .reBottomcell .radfdSkinnedFormButton
{
    margin-left: 12px;
}

.ImageProperties .radfd_skipme, .TableWizard .radfd_skipme
{
    border-width: 1px !important;
    border-left: 0 !important;
}

.ConstrainProportions button
{
    background-position: 0 -732px;
}

.ConstrainProportions.toggle button
{
    background-position: -20px -732px;
}

.propertyLabel
{
    text-align: left !important;
}

.AboutDialog
{
    direction: ltr;
}

.imagePreviewer .RadTabStrip_Default_rtl, .ManagerDialog .RadTabStrip_Default_rtl, .LinkManager .rtsLevel.rtsLevel1
{
    direction: ltr !important;
}

.imagePreviewer .RadTabStrip_Default_rtl .rtsUL, .ManagerDialog .RadTabStrip_Default_rtl .rtsUL, .LinkManager .RadTabStrip_Default_rtl .rtsUL
{
    position: relative !important;
    left: -10px !important;
}

.LinkManager .reDropdown
{
    position: relative;
    left: 130px;
}

.reControlsLayout
{
    /*width: 200px;*/
    direction: rtl !important;
    padding: 4px;
}

.reControlsLayout *
{
    direction: rtl;
}
.reSplitButton span
{
    float: rightright !important;
    margin-right: 2px !important;
}
.reToolWrapper .reDropdown
{
    background-position: -24px -360px !important;
}
.reToolWrapper .reDropdown:hover
{
    background-position: -1988px 0 !important;
}
.reToolWrapper .reDropdown span
{
    margin-left: 15px;
    text-align: rightright;
}
.reDropDownBody .reTlbVertical ul.reToolbar
{
    float: left !important;
}


/*fixing right to left radeditor windows */
x:-moz-any-link, fieldset table
{
    direction: ltr !important;
}
x:-moz-any-link, fieldset table td
{
    direction: rtl !important;
}
x:-moz-any-link, fieldset legend
{
    margin-right: 5px;
}
x:-moz-any-link, .reTableWizardSpinBox a span, x:-moz-any-link, .reSpinBox a
{
    text-indent: 99999px;
}

* + html fieldset table
{
    direction: rtl;
}
* + html fieldset table td
{
    direction: ltr;
}
* + html fieldset legend
{
    margin-right: 5px;
}
* + html .reTableWizardSpinBox a span, * + html .reSpinBox a
{
    text-indent: -99999px;
}