This is a migrated thread and some comments may be shown as answers.

Set Editor to rlt mode?

5 Answers 148 Views
Editor
This is a migrated thread and some comments may be shown as answers.
woaksie
Top achievements
Rank 2
woaksie asked on 02 Nov 2009, 11:57 PM

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


5 Answers, 1 is accepted

Sort by
0
Schlurk
Top achievements
Rank 2
answered on 03 Nov 2009, 08:28 PM
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.
0
woaksie
Top achievements
Rank 2
answered on 04 Nov 2009, 12:24 AM
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.




0
woaksie
Top achievements
Rank 2
answered on 04 Nov 2009, 12:43 AM
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.



0
mehr mehr
Top achievements
Rank 1
answered on 28 Apr 2010, 06:14 PM
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

0
Schlurk
Top achievements
Rank 2
answered on 29 Apr 2010, 03:24 PM
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 
    visibilityhidden
 
.reToolZone 
    background-colortransparent !important; 
 
.reResizeCell div 
    visibilityhidden !important; 
 
.reToolbar 
    floatrightright !important; 
 
.reDropDownBody .reTlbVertical .reToolbar 
    floatleft !important; 
.reDropDownBody .reTlbVertical .reToolbar .reTool_text 
    padding-right5px
* + html .reDropDownBody .reTlbVertical .reToolbar .reTool_text 
    width198px
    padding-right: 0; 
* + html .reDropDownBody .reTlbVertical .reToolbar li 
    floatrightright !important; 
.reDropDownBody .reTlbVertical .reToolbar .reTool_text:hover 
    background#e7f1ff
 
 
.reDropDownBody span 
    floatrightright !important; 
    margin-right4px
 
.reDropDownBody .reButton_text 
    floatrightright !important; 
    text-alignrightright !important; 
    width100px !important; 
    margin-right: 0; 
 
.reDropDownBody .reTool_text 
    background-imagenone !important; 
 
.reDropdown 
    background-positionleft -92px !important; 
    padding-left3px !important; 
    padding-right1px !important; 
 
.reSplitButton span 
    floatrightright !important; 
    margin-right2px !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-coloryellow
.RadEDomMouseOver 
    background-color:#ffffcc;    
 
body 
    padding:3px
    background-imagenone
    margin0px;     
    word-wrap: break-word; 
    directionrtl
    overflowauto
 
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 
    directionrtl
 
.reBottomcell table 
    floatleft !important; 
    margin4px 0 0 10px
 
.rightAlignedInputLabel, .reToolbar 
    floatrightright
 
.reBottomcell table td 
    padding-right4px
 
.UploadPanel 
    padding-right12px
 
.filesize 
    width70px
 
.filemanagergrid td 
    text-alignrightright
 
.reBottomcell 
    text-alignleft
 
.reBottomcell .radfdSkinnedFormButton, .reBottomcell .radfdSkinnedFormButton 
    margin-left12px
 
.ImageProperties .radfd_skipme, .TableWizard .radfd_skipme 
    border-width1px !important; 
    border-left: 0 !important; 
 
.ConstrainProportions button 
    background-position: 0 -732px
 
.ConstrainProportions.toggle button 
    background-position: -20px -732px
 
.propertyLabel 
    text-alignleft !important; 
 
.AboutDialog 
    directionltr
 
.imagePreviewer .RadTabStrip_Default_rtl, .ManagerDialog .RadTabStrip_Default_rtl, .LinkManager .rtsLevel.rtsLevel1 
    directionltr !important; 
 
.imagePreviewer .RadTabStrip_Default_rtl .rtsUL, .ManagerDialog .RadTabStrip_Default_rtl .rtsUL, .LinkManager .RadTabStrip_Default_rtl .rtsUL 
    positionrelative !important; 
    left: -10px !important; 
 
.LinkManager .reDropdown 
    positionrelative
    left130px
 
.reControlsLayout 
    /*width: 200px;*/ 
    directionrtl !important; 
    padding4px
 
.reControlsLayout * 
    directionrtl
.reSplitButton span 
    floatrightright !important; 
    margin-right2px !important; 
.reToolWrapper .reDropdown 
    background-position: -24px -360px !important; 
.reToolWrapper .reDropdown:hover 
    background-position: -1988px 0 !important; 
.reToolWrapper .reDropdown span 
    margin-left15px
    text-alignrightright
.reDropDownBody .reTlbVertical ul.reToolbar 
    floatleft !important; 
 
 
/*fixing right to left radeditor windows */ 
x:-moz-any-link, fieldset table 
    directionltr !important; 
x:-moz-any-link, fieldset table td 
    directionrtl !important; 
x:-moz-any-link, fieldset legend 
    margin-right5px
x:-moz-any-link, .reTableWizardSpinBox a span, x:-moz-any-link, .reSpinBox a 
    text-indent99999px
 
* + html fieldset table 
    directionrtl
* + html fieldset table td 
    directionltr
* + html fieldset legend 
    margin-right5px
* + html .reTableWizardSpinBox a span, * + html .reSpinBox a 
    text-indent: -99999px
 
 



Tags
Editor
Asked by
woaksie
Top achievements
Rank 2
Answers by
Schlurk
Top achievements
Rank 2
woaksie
Top achievements
Rank 2
mehr mehr
Top achievements
Rank 1
Share this question
or