RadEditor Delete and Backspace Key question

[Adam Lane]

We are writing a document management system and have encountered some odd behavior when a user hits the 'delete' key and an element is selected (such as a textbox).  What we'd like to do is do a standard confirmation when someone tries to delete a checkbox, textbox, listbox, etc...  We have code on a test page that looks like this:

function

 

OnClientLoad(editor, args)

 

{

editor.attachEventHandler(

"onkeydown", function(e)

 

{

// show the key code for now, later on we'll implement a confirmation
alert(e.keyCode);

e.returnValue =

false;

 

e.cancelBubble =

true;

 

 

return false;

 

});

}

This code is just test code to simply dismiss the keydown event and not do anything.  With this code in place however, if the users selects a textbox, and then presses the delete or backspace key, they element is still deleted.  If I select an element and press another key like 'k' or whatever, then the element is not replaced so I'm not sure what to do.

We also put this code in to trap the enter command and call the 'set_cancel' method to cancel out of an enter keypress

function

 

OnClientCommandExecuting(editor, args)

 

{

alert(args.get_commandName());

 

if (args.get_commandName() == "Enter" || args.get_commandName() == "InsertTab")

 

{

alert(

'cancelling event');

 

args.set_cancel(

true);

 

}

 

}

 
but no command appears to fire when the delete key is pressed so the OnClientCommandExecuting event handler is not hit :(

Any thoughts?

[Tervel]

Hi Adam,

Please excuse the late reply.
The editor attaches to a number of events in its content area - and one of those is, of course, onkeydown.
Because of certain browser quirks, the editor needs to execute some code when BACK or DELETE is pressed.

When you register your own handler in OnClientLoad, your code executes after the editor's own event handler.

Unfortunately there is no "standard" way to override this behavior. Yet - the following code is a fairly simple approach that should do the trick - all you need to do is add this script after your editor declaration.
Essentially, as you can see, the code overrides the editor's private _onKeyDown method and lets you execute your own code there.

<script>
           Telerik.Web.UI.RadEditor.prototype.old_onKeyDown = Telerik.Web.UI.RadEditor.prototype._onKeyDown;
           Telerik.Web.UI.RadEditor.prototype._onKeyDown = function (e)
           {
             //Write your own here
             if (e.keyCode == 8) //BACK was pressed
             {
                //if you do not want the editor to execute its own code cancel event
                return $telerik.cancelRawEvent(e);
             }
             //Call original code
             this.old_onKeyDown(e);
           }
           </script>

Please note that this is a bit of a hack. While we do not expect to change this method's name in the foreseeable future, it is still not a public method, so there are no guarantees.


Best regards,
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.

[Todd Bannar]

Do you have a working sample for this?  I need to capture when someone presses the F2 key while in the RadEditor field.  Pressing F2 will insert a date/time stamp in the field.  I tried using the javascript provided, but it doesn't work for me.  I get an error on the first line: 
Telerik.Web.UI.RadEditor.prototype.old_onKeyDown = Telerik.Web.UI.RadEditor.prototype._onKeyDown;

Thanks

[Dobromir]

Hi Todd,

RadEditor offers the possibility to assign a shortcut to a tool. In order to achieve the requested feature I suggest you to create a custom tool to insert Date/Time stamp and just assign F2 as a shortcut, e.g.:

<telerik:RadEditor ID="RadEditor1" runat="server">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Custom1" ShortCut="F2" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>

<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["Custom1"] = function(commandName, editor, args)
    {
        var date = new Date();

        editor.pasteHtml(date+"<br />");
    }
</script>

I hope this helps

All the best,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Todd Bannar]

Too easy!  Thanks for the code.

[Todd Bannar]

One more question about this.  Is there a way to determine if the editor control is enabled or not prior to this executing?  I am developing a form that has a 'read' and 'edit' mode.  When the form is being displayed 'read' mode, this script errors out because the editor control isn't rendered.

Thanks

[Rumen]

Hi Todd,

When the editor is not rendered on the page then you should wrap the content filter code in the following check

if (typeof(Telerik) != "undefined")  { }

You can download a sample example from here.

Best regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.