Full screen readonly

[Khanh]

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;
                }
            }

[Rumen]

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

[Khanh]

Thank you so much, Rumen!!!  Your example worked perfectly.

[Khanh]

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

[Rumen]

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

[Khanh]

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

$telerik.cancelRawEvent(e);

Much appreciative of your support.
Khanh