5 Answers, 1 is accepted
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:
And you can follow the guide-lines in this demo for more information.
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.
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.
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
EditorContentArea_RTL.css:
RadEditor_Dialogs_RTL.css:
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; |
} |