Full screen readonly

6 posts, 1 answers
  1. Khanh
    Khanh avatar
    39 posts
    Member since:
    Jun 2008

    Posted 02 Jan 2013 Link to this post

    Hello All,

    I need to have a radeditor set to readonly with a toggle for full screen.  Full screen should also be readonly.
    I have a radeditor set to height=100px and editmodes=Preview.  The following works but not in full screen.

    **Once I toggle from full screen back, the editor is no longer readonly.

    <telerik:RadEditor Skin="Default" ID="RadEditor1" EditModes="Preview" OnClientModeChange="OnClientModeChange" Enabled="true" runat="server" Width="100%" Height="150px" ToolsFile="~/includes/NoTools.xml">
    </telerik:RadEditor>

    function OnClientModeChange(editor, args) {
                    var mode = editor.get_mode();
                    switch (mode) {
                        case 1:
                            //alert( "We are in Design mode");
                            //do something
                            break;
                        case 2:
                            //alert("We are in HTML mode");
                            break;
                        case 4:
                            setTimeout(function () {
                                var tool = editor.getToolByName("ToggleScreenMode");
                                tool.setState(0);
                            }, 0);
                            //alert( "We are in Preview mode");
                            //do something
                            break;
                    }
                }

  2. Rumen
    Admin
    Rumen avatar
    14011 posts

    Posted 02 Jan 2013 Link to this post

    Hello,

    Here is the requested example:
    <telerik:RadEditor ID="RadEditor1" EditModes="Preview" OnClientModeChange="OnClientModeChange" OnClientCommandExecuting="OnClientCommandExecuting"
        Enabled="true" runat="server" Width="100%" Height="150px">
    </telerik:RadEditor>
    <script>
        function OnClientModeChange(editor, args) {
            var mode = editor.get_mode();
            switch (mode) {
                case 1:
                    //alert( "We are in Design mode");
                    //do something
                    break;
                case 2:
                    //alert("We are in HTML mode");
                    break;
                case 4:
                    setTimeout(function () {
                        var tool = editor.getToolByName("ToggleScreenMode");
                        tool.setState(0);
                    }, 0);
                    //alert( "We are in Preview mode");
                    //do something
                    break;
            }
     
     
        }
     
        function OnClientCommandExecuting(editor, args) {
            var commandName = args.get_commandName();
            if (commandName == "ToggleScreenMode") {
                if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode
                {
                    editor.set_editable(false);
                    editor.enableEditing(false);
                    var tool = editor.getToolByName("ToggleScreenMode");
                    tool.setState(0);
                }
            }
        }
    </script>


    Kind regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Khanh
    Khanh avatar
    39 posts
    Member since:
    Jun 2008

    Posted 02 Jan 2013 Link to this post

    Thank you so much, Rumen!!!  Your example worked perfectly.
  4. Khanh
    Khanh avatar
    39 posts
    Member since:
    Jun 2008

    Posted 03 Jan 2013 Link to this post

    Hi, Rumen,

    After more testing, I discovered that if the editor has content in full screen, I can't type anything.  But I am able to delete and backspace. Once I'm out of full screen, I still can't type anything but I still can delete and backspace.

    When the editor first load everything is fine.  Once I go to full screen I can delete and backspace.  Only happens on Chrome 23 and IE 10.  Firefox 17 works perfectly.

    Thanks,
    Khanh
  5. Answer
    Rumen
    Admin
    Rumen avatar
    14011 posts

    Posted 04 Jan 2013 Link to this post

    Hi,

    Here is how to handle the delete and backspace key events:
    <telerik:RadEditor ID="RadEditor1" EditModes="Preview" OnClientModeChange="OnClientModeChange" OnClientCommandExecuting="OnClientCommandExecuting"
        Enabled="true" runat="server" Width="100%" Height="150px">
            <Content>dasdas</Content>
    </telerik:RadEditor>
    <script>
    function OnClientModeChange(editor, args) {
        var mode = editor.get_mode();
        switch (mode) {
            case 1:
                //alert( "We are in Design mode");
                //do something
                break;
            case 2:
                //alert("We are in HTML mode");
                break;
            case 4:
                setTimeout(function () {
                    var tool = editor.getToolByName("ToggleScreenMode");
                    tool.setState(0);
                }, 0);
                //alert( "We are in Preview mode");
                //do something
                break;
        }
     
     
    }
     
    function OnClientCommandExecuting(editor, args) {
        var commandName = args.get_commandName();
        if (commandName == "ToggleScreenMode") {
            if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode
            {
                editor.set_editable(false);
                editor.enableEditing(false);
                editor.attachEventHandler("keydown", function (e) {
                    if (e.keyCode == "8" || e.keyCode == "46")
                    {
                        $telerik.cancelRawEvent(e);
                    }
                });
                var tool = editor.getToolByName("ToggleScreenMode");
                tool.setState(0);
            }
        }
    }
    </script>


    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Khanh
    Khanh avatar
    39 posts
    Member since:
    Jun 2008

    Posted 04 Jan 2013 Link to this post

    That's it, Rumen!  This was the key part I was missing:

    $telerik.cancelRawEvent(e);

    Much appreciative of your support.
    Khanh
Back to Top