Disabling Content Removal Using Backspace when RadEditor is disabled

Environment

Product	RadEditor for ASP.NET AJAX
Version	all

Description

Even after setting enableEditing and set_editable to false, it's still possible to remove or modify the content in RadEditor using the backspace key. How can this behavior be disabled to prevent content removal?

This KB article also answers the following questions:

• How to make RadEditor content non-editable?
• How to disable the backspace key in RadEditor?
• How to prevent content modification in RadEditor?

Solution

To prevent users from removing content using the backspace key in RadEditor while keeping the editor non-editable, follow the steps below:

1. Disable Editing and Make Non-Editable:

   Set the editor to non-editable mode by using the enableEditing(false) and set_editable(false) methods.

2. Disable the Backspace Key:

   Add an event listener to the RadEditor content area to disable the backspace key functionality.

   ASPX

   <script>
   function OnClientLoad(editor, args) {
       editor.enableEditing(false);
       editor.set_editable(false);
   
       var contentArea = editor.get_contentArea();
       contentArea.addEventListener('keydown', function (e) {
           if (e.key === 'Backspace') {
               e.preventDefault();
           }
       });
   }
   </script>

3. Integrate the Event Listener with the RadEditor:

   Ensure the OnClientLoad event is properly configured in your RadEditor definition.

   aspx

   <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
       <Content>some content</Content>
   </telerik:RadEditor>

   This configuration disables the backspace key, preventing content removal and modification, while keeping the editor in a non-editable state.

Additionally, to disable other editing features such as copy, typing, enter, delete, and pasting content, you can use the OnClientCommandExecuting and OnClientPasteHtml events:

asp

<telerik:RadEditor runat="server" ID="RadEditor1" ContentAreaMode="iframe" OnClientLoad="OnClientLoad" OnClientCommandExecuting="OnClientCommandExecuting" OnClientPasteHtml="OnClientPasteHtml">
    <Content>test content</Content>
</telerik:RadEditor>

ASPX

<script>
function OnClientCommandExecuting(editor, args) {
    args.set_cancel(true);
}
function OnClientPasteHtml(editor, args) {
    args.set_cancel(true);
}
</script>

See Also

• RadEditor Overview
• RadEditor Client-Side Programming