locked
Disable paste in HTML editor RRS feed

  • Question

  • User-389597101 posted

    Hi

    I want to disable cut, copy and paste in HTML editor. For HTML mode I have put this code

     //  For HTML mode
                $('#<%=editor.ClientID%>').find('textarea').bind("cut copy paste", function (e) {
                    e.preventDefault();
                });

    and this code works fine. But when I use the same code for design mode it doesn't work (See the code below)

      //  For design mode
                $('#<%=editor.ClientID%>').find('iframe').bind("cut copy paste", function (e) {
                    e.preventDefault();                
                });

     

    Is there any other way to do that

     

    Monday, February 17, 2014 2:48 AM

Answers

  • User-389597101 posted

    Hey

    this code worked

     $(document).ready(function () {
                //  For design mode            
                var isctrlKeyPressed = false;
                $('#<%=editor.ClientID%>').find('iframe').load(function () {
                    $('#<%=editor.ClientID%>').find('iframe').contents().bind("keydown keypress", function (e) {
                        
                        if (isctrlKeyPressed) 
                            return false;
                        
    
                        if (e.keyCode == 17) 
                            isctrlKeyPressed = true;                    
                        else 
                            isctrlKeyPressed = false;
                        
                    });
    
                    $('#<%=editor.ClientID%>').find('iframe').contents().bind("keyup", function (e) {
                        if (e.keyCode == 17)
                            isctrlKeyPressed = false;
                    });
                });
    
    
                //  For HTML mode
                $('#<%=editor.ClientID%>').find('textarea').bind("cut copy paste", function (e) {
                    e.preventDefault();
                });
    
            });

    Could you please check at your end as well

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 20, 2014 4:22 AM

All replies

  • User-837620913 posted

    Try setting the properties on the asp:TextBox, like this:

    <asp:TextBox ID="TextBox1" runat="server" oncopy="return false" onpaste="return false" oncut="return false"></asp:TextBox> 

    Monday, February 17, 2014 5:53 AM
  • User-389597101 posted

    Hi DarrellNorton

     

    Thanks for the reply. I am using Ajax HTMLEditor. How can I do that in HTML editor in design mode

    Monday, February 17, 2014 6:39 AM
  • User-389597101 posted

    Hi Chetan

    I have already gone through the threads. But if the editor doesn't have the paste button still user can paste the content by ctrl + V. I have disabled cut copy and paste in case of HTML mode, but in case of design mode I am not sure how we can do that.

    Please let me know if you have any concerns.

     

    Tuesday, February 18, 2014 2:10 AM
  • User-417640953 posted

    Hi karang,

    Thanks for your post.

    I have already gone through the threads. But if the editor doesn't have the paste button still user can paste the content by ctrl + V. I have disabled cut copy and paste in case of HTML mode, but in case of design mode I am not sure how we can do that.

    We can doesn't have the paste button in the ajax htmleditor however we can not avoid the crt +v and right click paste.

    So we what should do is using the javascript to avoid the crt +v and right click event.

    There are similar issue, please check them.

    http://stackoverflow.com/questions/4385688/prevent-ctrl-v-in-html-editor-ajax-control-ms

    http://forums.asp.net/t/1924025.aspx?Ajax+toolkit+HTML+Editor

    Hope this helps, thanks.

    Best Regards!

     

    Tuesday, February 18, 2014 2:47 AM
  • User-389597101 posted

    Hi Fuxiang Zhang

    I am using this code for capturing the keypress, keydown and keyup  events

    $('#<%=editor.ClientID%>').find('iframe').bind("keyup keydown keypress", function (e) {
                    alert("hi");
                });

    But I am not able to do that
     

    Tuesday, February 18, 2014 6:11 AM
  • User-1205895928 posted

    Hi Karang

    This post might help you! Check it out.

    http://stackoverflow.com/questions/6123569/how-to-get-rid-of-copy-paste-text-styling-in-ajax-html-editor

    Tuesday, February 18, 2014 6:22 AM
  • User-389597101 posted

    Hi NareshP

    I have checked the thread and according to the suggestion I have used this code

     win = $('#<%=editor.ClientID%>').find('iframe').contentWindow;
                alert(win);

    but I am getting alert as undefined.
     

    Tuesday, February 18, 2014 6:55 AM
  • User-417640953 posted

    Hi Fuxiang Zhang

    I am using this code for capturing the keypress, keydown and keyup  events

    $('#<%=editor.ClientID%>').find('iframe').bind("keyup keydown keypress", function (e) {
                    alert("hi");
                });

    But I am not able to do that
     

    Hi karang,

    I'm glad to see your back.

    For this issue, please wrap a div tag to the editor and disable the paste feature on the div like below.

    <head runat="server">
        <title></title>
        <script src="../../../Scripts/jquery-1.9.1.min.js"></script>
        <script>
            $(function () {
    
                    $("#myDiv").bind('paste', function (e) {
                    e.preventDefault();
                    alert('do not allow paste!');
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="myDiv">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="500" Height="400" CssClass="MyText"></asp:TextBox>
            <asp:HtmlEditorExtender ID="HtmlEditorExtender1" runat="server" TargetControlID="TextBox1"></asp:HtmlEditorExtender> 
        </div>
        </form>
    </body>

    It works fine in my side, please check it. Thanks.

    Best Regards!

    Tuesday, February 18, 2014 8:52 PM
  • User-389597101 posted

    Hi Fuxiang Zhang

    Thanks for the reply. It was not working as well. I found solution

     <script type="text/javascript">
            $(document).ready(function () {
                //  For design mode            
                var isctrlKeyPressed = false;
                $('#<%=editor.ClientID%>').find('iframe').load(function () {
                    $('#<%=editor.ClientID%>').find('iframe').contents().bind("keyup keydown keypress", function (e) {
                        
                        if (isctrlKeyPressed && e.keyCode == 86) {                        
                            return false;
                        }
    
                        if (e.keyCode == 17)
                            isctrlKeyPressed = true;
                        else
                            isctrlKeyPressed = false;
                    });
                });
    
    
                //  For HTML mode
                $('#<%=editor.ClientID%>').find('textarea').bind("cut copy paste", function (e) {
                    e.preventDefault();
                });
    
            });
        </script>


    But in this approach there is one loop hole. When the user presses 'V' button after CTRL + V then it is not allowing the user to do that, so the user has to press any other key and then can press 'V'. If you have solution for this please help me out. Please test this code snippet.

     

    Thursday, February 20, 2014 1:00 AM
  • User-417640953 posted

    But in this approach there is one loop hole. When the user presses 'V' button after CTRL + V then it is not allowing the user to do that, so the user has to press any other key and then can press 'V'. If you have solution for this please help me out. Please test this code snippet.

    Hi karang,

    Have you test my previous demo above? Is it not work in your side and what happened?

    If you prefer catch the presskey event using javascript please check below code.

      <script src="../../../Scripts/jquery-1.9.1.min.js"></script>
        <script>
            $(function () {
    
                var ctrlDown = false;
                var ctrlKey = 17, vKey = 86, cKey = 67;
                //ctr+v............................
                $("#myDiv").keydown(function (e)
                {
                    if (e.keyCode == ctrlKey) ctrlDown = true;
                    if (ctrlDown && e.keyCode == vKey)
                    {
                        //prevent paste
                         e.preventDefault();
                    }
                }).keyup(function(e)
                {
                    if (e.keyCode == ctrlKey) ctrlDown = false;
                });
    
                //$("#myDiv").bind('paste', function (e) {
                   // e.preventDefault();
                   // alert('do not allow paste!');
                //});
            })
        </script>
     <div id="myDiv">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="500" Height="400" CssClass="MyText"></asp:TextBox>
            <asp:HtmlEditorExtender ID="HtmlEditorExtender1" runat="server" TargetControlID="TextBox1"></asp:HtmlEditorExtender> 
        </div>

    Hope this helps, thanks.

    Best Regards!

    Thursday, February 20, 2014 2:41 AM
  • User-389597101 posted

    Hi

    I can still paste text

    Thursday, February 20, 2014 3:50 AM
  • User-389597101 posted

    This is the code which I am using as per your instructions

     <script type="text/javascript">
             $(document).ready(function () {
                 var ctrlDown = false;
                 var ctrlKey = 17, vKey = 86, cKey = 67;
                 //ctr+v............................
                 $("#myDiv").keydown(function (e) {
                     if (e.keyCode == ctrlKey) ctrlDown = true;
                     if (ctrlDown && e.keyCode == vKey) {
                         //prevent paste
                         e.preventDefault();
                     }
                 }).keyup(function (e) {
                     if (e.keyCode == ctrlKey) ctrlDown = false;
                 });
             });
        </script>

    Thursday, February 20, 2014 3:52 AM
  • User-389597101 posted

    Hey

    this code worked

     $(document).ready(function () {
                //  For design mode            
                var isctrlKeyPressed = false;
                $('#<%=editor.ClientID%>').find('iframe').load(function () {
                    $('#<%=editor.ClientID%>').find('iframe').contents().bind("keydown keypress", function (e) {
                        
                        if (isctrlKeyPressed) 
                            return false;
                        
    
                        if (e.keyCode == 17) 
                            isctrlKeyPressed = true;                    
                        else 
                            isctrlKeyPressed = false;
                        
                    });
    
                    $('#<%=editor.ClientID%>').find('iframe').contents().bind("keyup", function (e) {
                        if (e.keyCode == 17)
                            isctrlKeyPressed = false;
                    });
                });
    
    
                //  For HTML mode
                $('#<%=editor.ClientID%>').find('textarea').bind("cut copy paste", function (e) {
                    e.preventDefault();
                });
    
            });

    Could you please check at your end as well

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 20, 2014 4:22 AM