Interacting With Ajax Editor Via Telerik Silverlight Controls

[Steve]

Hi

I am trying to use your AJAX Editor control in combination with your Silverlight Ribbon & RADDock controls (see attached screenshot).  However Im struggling however to see how I would call commands in the (AJAX) Editor from the (Silverlight) Ribbon Bar.  For instance one of the things I want to do is have a button in my Ribbon which when clicked will disable/enabled the Editor(s) on my HTML page.

So far in my Ribbon bar button click I have the following C# code which will call a Javascript method on my HTML page which contains my Editor :

        private void DisabledEditor_Click(object sender, RoutedEventArgs e)
        {
            // Get the IFrame from the HtmlPresenter
            HtmlElement iframe = (HtmlElement)App.Current.mainAEWindow.BrowseAndEdit.HtmlPresenter.Children[0];

            // Set an ID to the IFrame so that can be used later when calling the javascript
            iframe.SetAttribute("id", "myIFrame");

            // Code to be executed
            string code = "document.getElementById('myIFrame').contentWindow.SetEditorState();";
            HtmlPage.Window.Eval(code);
        }

This call gets to my HTML page fine, my issue is with the Javascript method and how I should use it to interact with my Editor :

    <script type="text/javascript">
    function SetEditorState() {
        var editor = $find("<%=RadEditor1.ClientID%>"); //return a reference to RadEditor
        editor.enabled = false; // this property does not exist !
    }
    </script>

As there isnt a client side "enabled" property on the Editor control I tried making an Asynchronous call from the Javascript to my C# code to disable the editor but as the calling code is not covered by one of the form controls listed in the <asp:AsyncPostBackTrigger> block in my <asp:UpdatePanel> (as in your online demo).  The call made it to my codebehind and changed the ".Enabled" property of my editor but the editor was not refreshed on screen :

        [System.Web.Services.WebMethod()]
        [System.Web.Script.Services.ScriptMethod()]
        public static void SetEditorState()
        {
            foreach (RadEditor re in editors)
            {
                re.Enabled = !re.Enabled;
                if (re.Enabled)
                    re.Style.Remove("overflow");
                else
                    re.Style.Add("overflow", "auto");
            }
        }

Can you suggest some way of achieving this ?

Thanks in advance

Steve

[Rumen]

Hi Steve,

You can use the enableEditing and set_editable client-side methods of RadEditor to enable or disable the editor's content area and toolbars:

<telerik:RadEditor runat="server" ID="RadEditor1">

    <Content>some test content</Content>

</telerik:RadEditor>

<input type="button" onclick="toggleEditing();return false;" value="Toggle editing" />

<script type="text/javascript">

var toggle = true;

function toggleEditing()

{

    var editor = $find("<%=RadEditor1.ClientID%>");

    toggle = !toggle;

    editor.enableEditing(toggle); 

    editor.set_editable(toggle); 

    if (toggle == false)

    {

        editor.get_document().body.style.backgroundColor = "gray";

    }

    else

    {

        editor.get_document().body.style.backgroundColor = "";

      


    }

}

</script>

All the best,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.