How to block the tab key in rad editor

[Uma]

I am using editor.

I need to restrict the user to modify the content of editor based on some condition

so, i block the editor by onkeydown event.

editor.attachEventHandler("onkeydown", function (e) {
               keepGoing = true;

               var keyCode = ('which' in e) ? e.which : e.keyCode;
               edittingKey = (keyCode == 8 /*backspace*/) || (keyCode == 46 /*delete*/) || (keyCode == 9 /*tab*/);
               if (edittingKey) {

                   keepGoing = false;


               }

               return keepGoing;
           });

i need to this in IE(. it works well for delete and back space. but not work in tab key.

it event is fired on pressing tab key, my code return false also.
but, editor shows the tab space between two letters, if the user press tab between two letters.

i need to avoid this.

Thanks,
Uma

[Rumen]

Hello,

To disable the insertion of four   entities when the Tab is pressed in the content area execute this method:

editor.removeShortCut("InsertTab"); 

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>
<script type="text/javascript">
    function OnClientLoad(editor) {
        editor.removeShortCut("InsertTab");
        editor.attachEventHandler("onkeydown", function (e) {
            keepGoing = true;
            var keyCode = ('which' in e) ? e.which : e.keyCode;
            edittingKey = (keyCode == 8 /*backspace*/) || (keyCode == 46 /*delete*/) || (keyCode == 9 /*tab*/);
            if (edittingKey) {
                alert(1);
                keepGoing = false;
            }
            return keepGoing;
        });
    }
</script>

You can also cancel the events using $telerik.cancelRawEvent(e);
Kind regards,
Rumen
the Telerik team

[Uma]

Hi Rumen,

Thanks for your quick reply.

But, i need to block the tab based on some condition.

for example , my content is like

<div style="border: 1px solid red;" contentEditable="true" unselectable="off" noneditable="true">
    Testing DIV Non Editable AREA
    <span style="border: 1px solid green;" contentEditable="true" unselectable="off" noneditable="false">
        <!--Content name="info" -->
          span  testing  Editable REGION...
        <!--/Content -->
    </span>
    Non Editable AREA
</div>

so, i need to allow the the user, if the slected tag has the attribute noneditable="false".

so, i check in the key event like

editor.attachEventHandler("onkeydown", function (e) {

               keepGoing = true;

 

               var keyCode = ('which' in e) ? e.which : e.keyCode;

               edittingKey = (keyCode == 8 /*backspace*/) || (keyCode == 46 /*delete*/) || (keyCode == 9 /*tab*/);

               if (edittingKey) {

                   var SelectedTag = editor.getSelectedElement();

                   keepGoing = !SelectedTag.getAttribute("noneditable");

                   //Uma(2-Feb-2012 : Block the tab key pressing for user

                      $telerik.cancelRawEvent(e);
                             return false; 


               }

 

               return keepGoing;

           });

so, using

editor.removeShortCut("InsertTab"); 

it blocks the tab for all elements.
i used the  cancelRawEvent(e) also, but still the tab is working. 

how to slove this?

Thanks ,
Uma

[Rumen]

Hello,

The default behavior of the Tab key in an editable iframe is to pass through it and goes to the next element of the page as you can see in the attached editableiframe HTML page. Since RadEditor does not offers out-of-the box the requested functionality my suggestion is to implement it with an editable div or iframe and provided the working code. We will replace the div / iframe with RadEditor and send you the updated solution.

Best regards,
Rumen
the Telerik team