This is a migrated thread and some comments may be shown as answers.

Full screen readonly

5 Answers 95 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Khanh
Top achievements
Rank 1
Khanh asked on 02 Jan 2013, 01:51 PM
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;
                }
            }

5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 02 Jan 2013, 03:35 PM
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.
0
Khanh
Top achievements
Rank 1
answered on 02 Jan 2013, 03:45 PM
Thank you so much, Rumen!!!  Your example worked perfectly.
0
Khanh
Top achievements
Rank 1
answered on 03 Jan 2013, 04:53 PM
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
0
Accepted
Rumen
Telerik team
answered on 04 Jan 2013, 11:30 AM
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.
0
Khanh
Top achievements
Rank 1
answered on 04 Jan 2013, 01:45 PM
That's it, Rumen!  This was the key part I was missing:

$telerik.cancelRawEvent(e);

Much appreciative of your support.
Khanh
Tags
Editor
Asked by
Khanh
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Khanh
Top achievements
Rank 1
Share this question
or