How to capture HTML when pasted in HTML mode of RadEditor

[Amy]

Hi!  I was wondering if someone knew of a way to capture the HTML when it is pasted into the HTML mode of the RadEditor?

I tried using 'OnClientPasteHtml' however that only fires off if you paste something into the Design mode of the RadEditor.  I need to capture whatever is pasted into the HTML mode of the RadEditor.

Thanks!

[Amy]

...Anybody?...

[Rumen]

Hi Amy,

The OnClientPasteHtml event works only for design mode, because all editor's tools are designed to work in Design mode only. The content area of RadEditor in HTML mode is a standard textarea and the built-in tools of the editor are designed to work in the editable iframe area in design mode.

If you would like you can get a reference to this textarea in HTML mode via the editor.get_textArea() method

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientModeChange="OnClientModeChange"></telerik:RadEditor>
<script type="text/javascript">
function OnClientModeChange(editor) {
        if(editor.get_mode() == 2) {
            var textArea = editor.get_textArea();
            alert(textArea);
//attach to the onpaste browser event and obtain the content from clipboard - this feature is browser specific and does not work in all browsers
        }
    }
</script>

and implement your own paste handling mechanism using the browser's API.


Greetings,
Rumen
the Telerik team

[Amy]

Rumen,

Thank you for your response.  I'll have to look into the solution you suggested.  Though it's likely we'll end up adding another radeditor, and have the user paste their text in the HTML tab of one radeditor and click a button to copy it into a second radeditor.  Thus basically allowing us to capture what they paste.

The challenge we're trying to overcome is only capturing the text when a user pastes it into the HTML tab of an editor, but not capturing the text if they switch back and forth between the Design and HTML tabs.  In the scenario I'm speaking of the user will always paste text into the HTML tab of the editor first before going to the Design tab to make any changes such as bolding the text.

Thank you again for your help, have a great day!

[Matt]

I have Q2 2015, using IE11 (because I have to) and it still doesn't work. It doesn't even fire.

[Matt]

I know this is old but anyone else who stumbles across this. It's 2018, I have Q2 2012 and the event won't fire in IE11.

[Rumen]

Hello Matt,

Here you are the requested example which works for the modern browsers in HTML mode of RadEditor, which is a textbox:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientModeChange="OnClientModeChange"></telerik:RadEditor>
<script type="text/javascript">
    function OnClientModeChange(editor) {
        if (editor.get_mode() == 2) {
            var htmlArea = editor.get_textArea();
            $telerik.$(htmlArea).bind('paste', function(e) {
                var data;
                if (Telerik.Web.Browser.ie) {
                    data = window.clipboardData.getData("Text");
                }
                else {
                    data = e.originalEvent.clipboardData.getData('Text');
                }
                console.log(data);
            });
        }
    }
</script>

More information is available in StackOverflow.


Best regards,
Rumen
Progress Telerik

[Matt]

Thanks but mine is in design mode and it stays that way.

[Rumen]

Hi Matt

The forum thread is about intercepting the pasted content in HTML mode of RadEditor and for this reason the solution was provided for it.

With regards to a potential problem in IE11 with version Q2 2012: my advice is to test the latest R2 2018 SP1 version of the control, since Q2 2012 has been released prior the official appearance of IE11 (launched on 17 October 2013) and it does not official support it.

I tested Q2 2012 and can confirm that OnClientPasteHtml event does not work in IE11. What you can do is:

• recommended approach: Upgrade to the latest version of the suite.
• switch the browser in IE10 mode using this meta tag: <meta http-equiv="X-UA-Compatible" content="IE=10" />

Best regards,
Rumen
Progress Telerik