[Solved] Adding an editor tool that switches CSS files

[dror riov]

I created two new tool buttons to the RadEditor by using this code:

<telerik:EditorToolGroup>
             <telerik:EditorTool Name="RTL"  Text="RTL" ShowText="true" ShowIcon="false" Width="25px" />
               <telerik:EditorTool Name="LTR"  Text="LTR" ShowText="true" ShowIcon="false" Width="25px" />
</telerik:EditorToolGroup>

I am looking for these commands to change the editor style from a Left-To-Right style to Right-To-Left style.
The styles work fine when I change them from C# code behind.
But I am unable to attach code behind events to the new Editor Tools (As there a way to do so???) so I try using the following JavaScript code: (As seen in your samples).
<script type="text/javascript">
            Telerik.Web.UI.Editor.CommandList["RTL"] = function(commandName, editor, args) {
                editor.DialogsCssFile = "Styles/RadEditor_Dialogs_RTL.css";
                editor.ContentAreaCssFile = "Styles/EditorContentArea_RTL.css";
                alert('RTL');
            };

            Telerik.Web.UI.Editor.CommandList["LTR"] = function(commandName, editor, args) {
                editor.DialogsCssFile = "";
                editor.ContentAreaCssFile = "";
                alert('LTR');
            };
 </script>

The code gets called alright, but has no effect on the editor style.
(If I run similar code from the code behind the styles work, but I need the code to execute via the new tool buttons)

I'd appreciate any help you can provide.

[Tervel]

Hello Dror,

There is not and cannot be a 1-to-1 correspondence between editor server-side and client-side API. For once, javascript does not support the notion of properties (at least not in IE). Hence, the MS AJAX framework uses the get_method() and set_method() syntax to simulate client-size properties.

Furthermore, a single property on the server can abstract/hide complex client-side logic - which happens to be the case in this scenario. Hence, to achieve the result you need, you will need to write more client-side code.

What you need to do is set the CSS file path to a LINK object, and then add this LINK object to the editor's content area HEAD tag. In the other case, you will need to loop through the elements in the head and remove those files.

Here are some more pointers how to do it:

//Get the content area's HEAD tag
var head = editor.get_document().getElementsByTagName("HEAD")[0];

//Create a LINK tag pointing to a CSS file
var oLink = editor.get_document().createElement("LINK");
oLink.setAttribute("href", url); //Your URL here
oLink.setAttribute("type", "text/css");
oLink.setAttribute("rel", "stylesheet");

//Add the element to the HEAD
head.appendChild(oLink);

Greetings,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.