How to block the tab key in rad editor

4 posts, 0 answers
  1. Uma
    Uma avatar
    18 posts
    Member since:
    Jan 2012

    Posted 02 Feb 2012 Link to this post

    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
  2. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 02 Feb 2012 Link to this post

    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
    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
  3. Uma
    Uma avatar
    18 posts
    Member since:
    Jan 2012

    Posted 02 Feb 2012 Link to this post

    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
  4. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 03 Feb 2012 Link to this post

    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
    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
Back to Top