Disable Context Menu for C1Editor Control

Posted by: roger.porter on 11 March 2020, 1:25 am EST

  • Posted 11 March 2020, 1:25 am EST

    Hi,

    Is it possible to disable the context menu for C1 Editor Controls. My problem is my clients are pasting content in from Word which has hundreds of unwanted HTML tags that is causing mayhem with my reports.

    Thanks for any help,

    Roge
  • Replied 11 March 2020, 9:55 pm EST

    Is there a onPaste event for the C1Editor control? I want to check the content being paste into the C1Editor control.

    Many thanks,

    Roger
  • Replied 11 March 2020, 10:06 pm EST

    Hi Roger,
    If you would like to disable the custom context menu displayed by C1Editor which has three options cut, copy, paste. It can be disabled by setting the CustomContextMenu to false. Please refer to the following code snippet:
    <wijmo:C1Editor ID="C1Editor1" runat="server" CustomContextMenu="False">
    </wijmo:C1Editor>


    The following code snippet can be used to prevent the default browser contextmenu for Source View. But the Design View's contextmenu can't be prevented.
    <script>
    $(function () {
    var editor = "#C1Editor1";
    $(editor).contextmenu(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    e.stopPropagation();
    });
    })
    </script>


    Regards,
    Manish Gupta
  • Replied 11 March 2020, 10:29 pm EST

    Thank you very much Manish. The C1Editor context menu no longer shows but now I get the browser popup.
    Basically I want to trap for content being paste into a C1Editor control, where it be from the toolstrip paste button, Control V and the browser context menu.
    My client is pasting content from Word and other application and when looking at the context it is full of HTML tags like FontFace, Span, etc. Ideally I want the C1Editor control to paste just basic text like Notepad does.

    Thanks again

    Roger
  • Replied 11 March 2020, 10:36 pm EST

    Hi Manish,

    I forgot to mention, is there a way to trap for Ctrl V in the C1Editor Control?

    Thanks,
  • Replied 11 March 2020, 11:54 pm EST

    Found a JQuery example but this does not work: -
    $("#ctl00_ContentPlaceHolder1_C1AccordionPane2_cnt_TabMain_SpecialPrecautions").bind('paste', function () {
    alert('Paste Detected.');
    });
  • Replied 12 March 2020, 1:52 am EST

    Just another idea if above is not possible, is there a onblur event I could use?
  • Replied 12 March 2020, 7:15 pm EST

    Hi Roger,
    Please use the following script to prevent the paste in the C1Editor either using the contextmenu or Ctrl+V key combination.

     <script>
    $(function () {
    var editor = "#C1Editor1";
    $(editor).contextmenu(function (e) {
    e.preventDefault();
    });
    document.addEventListener("paste", function (e) {
    if(e.target== $(editor).find("textarea")[0])
    e.preventDefault();
    }, true);
    setTimeout(function () {
    $(editor).find("iframe").contents()[0].oncontextmenu = function () { return false; }
    $(editor).find("iframe").contents()[0].onpaste = function () { return false; }
    });
    })
    </script>


    Hope it helps!

    Regards,
    Manish Gupta
  • Replied 12 March 2020, 8:21 pm EST

    Hi Manish,

    Thank you for your reply. I don't want to prevent pasting because my client can paste plain text. I need to identify when paste is being executed and check the content for certain tags. If something like onpaste does not exist then is there a onblur event so I can check when my client loses focus.

    Many thanks for your help,

    Roger
  • Replied 12 March 2020, 8:54 pm EST

    Hi Manish,

    I've used your code and it works great for removing the context menu's. In Google Chrome Ctrl+V still works which is fine but is it possible on the Ctrl+V to check the content for certain tags like <font face or </font> which indicates the content has probably come from Word?
    I have noticed when testing in Internet Explorer 11 the document.addEventListener does not seem to be firing.

    Thanks again for all your help, if I can get this sorted it will be a massive improvement to my application. The problem is we have over 1000 clients using the system and even though they are told not to paste from Microsoft Word, they still do. The issue is on screen in the editor control it looks fine but I have to send the content to Crystal Reports which is limited to certain HTML tags and it simply won't print.
  • Replied 16 March 2020, 5:50 pm EST

    Hi Roger,
    We are handling paste events to prevent the pasting from Ctrl+V. In this event, we can also fetch the data to be pasted and prevent pasting based on some condition. '
    Please refer to the following code snippet:
    <script>
    $(function () {
    var editor = "#C1Editor1";
    setTimeout(function () {
    $(editor).find("iframe").contents()[0].oncontextmenu = function () { return false; }
    $(editor).find("iframe").contents()[0].addEventListener("paste", function (e) {
    var _clipboard = e.clipboardData ;
    var pasteData = _clipboard.getData("text/html");
    if (pasteData.length > 0) {
    e.preventDefault();
    }
    }, true)
    });
    })
    </script>


    PS: The above code works fine in Chrome and Firefox.

    Regards,
    Manish Gupta
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels