Adding paste and blur events

[reethish]

Hello,

 I'm using RadEditor (Prometheus) in my page, and during the editor's "OnClientLoad" event I'm trying to attach the code for the events like paste, blur with the help of "Telerik.Web.DomElement.addExternalHandler". But I'm getting the following javascript error : "Telerik.Web.DomElement is null or not an object", when I try to run my page . Can anyone help me out in resolving this issue?.

Thanks & Regards,
Reethish

[Rumen]

Hi Reethish,

The Prometheus Q3 SP2 features a significant optimization of the Prometheus core scripts - their size was reduced by over 100K, and the Prometheus controls now load even faster.
One of the optimizations was to group all Prometheus core functionality into a single javascript class/object.
This is now referred to as $telerik.

So, the correct way (which is final and will not be changed from now on) to refer to a "system" method is:

$telerik.addExternalHandler

We will update the documentation soon.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[reethish]

Hello Rumen,
    
    I tried using the specified $telerik.addExternalHandler my application and its getting executed fine, but still i'm not able to attach the events like blur, paste. The sample code what i have tried is as follows. 

        $telerik.addExternalHandler(editor.get_document().body, "blur",
        function(e)
        {
                alert(messageText);
        });

Can you help me in resolving this.

Thanks & Regards,
Reethish

[reethish]

Hello Rumen,
    
    I tried using the specified $telerik.addExternalHandler in my application and its getting executed fine, but still i'm not able to attach the events like blur, paste. The sample code what i have tried is as follows. 

        $telerik.addExternalHandler(editor.get_document().body, "blur",
        function(e)
        {
                alert(messageText);
        });

Can you help me in resolving this.

Thanks & Regards,
Reethish

[Rumen]

Hi Reethish,

I attached the blur and beforepaste events like this

<script type="text/javascript">
function OnClientLoad(editor, args)
{
    $telerik.addExternalHandler(editor.get_document().body, "blur", function(e)
    {
        alert('the Blur event occurred');
    });
    $telerik.addExternalHandler(editor.get_document().body, "beforepaste", function(e)
    {
        alert('the Paste event occurred');
    });
}
</script>
<telerik:radeditor runat="server" OnClientLoad="OnClientLoad" ID="RadEditor1"></telerik:radeditor>

and they were fired properly when pasting content or when clicking outside of the editor.

You can test the attached project for more information. Let me know if I am missing something and your scenario is other. Please, open a support ticket and send a sample runnable project.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Chris]

Hi,

I am trying to capture the event of onpaste, however, there is no event from IE7.  And I tried "beforepaste", it did alert me from javascript.  Please let me know if there is any event I can capture the event of onpaste or afterpaste something like that?

Chris

[Rumen]

Hello Chris,

You can fire the paste event with the following code:

<script type="text/javascript">
function OnClientLoad(editor, args)
{
   var element = document.all ? editor.get_document().body : editor.get_document();
   $telerik.addExternalHandler(element, "paste", function(e)
   {
       alert('Paste is fired');
   });
}
</script>
<telerik:radeditor runat="server" ID="RadEditor1" StripFormattingOptions="NonesupressCleanMessage"
    OnClientLoad="OnClientLoad">
</telerik:radeditor>

Please, note that the StripFormattingOptions should be set to NonesupressCleanMessage.

All the best,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Chris]

Hi Rumen,

I can get it fire with StripFormattingOptions should be set to NonesupressCleanMessage.  However, I would also like to set StripFormattingOptions with EditorStripFormattingOptions.Css | EditorStripFormattingOptions.Font | EditorStripFormattingOptions.Span

How can I achieve this?

Also while I am trying to do the following

var oSelElem = editor.get_html(); //get the editor content as plain text
alert(oSelElem);

It fails to show me any content.  Any reason?

Chris

[Rumen]

Hello Chris,

The StripFormattingOptions enum property of the editor captures the paste event and when it is set it is not possible to attach to the paste event of the browser. What you can do is to strip the undesired CSS, FONT and SPAN when submitting the content:

<script type="text/javascript">
function OnClientLoad(editor, args)
{
  editor.add_submit(function ()
  {
     editor.fire("SelectAll");
     editor.fire("FormatStripper", {value : "CSS"});
     editor.fire("FormatStripper", {value : "FONT"});
     editor.fire("FormatStripper", {value : "SPAN"});
     alert(editor.get_html());
});
}
</script>
<telerik:radeditor runat="server" OnClientLoad="OnClientLoad" ID="RadEditor1">
  <Content>
      
      <p><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">  </p>
      <p class=MsoNormal><b style="mso-bidi-font-weight: normal"><span style="FONT-SIZE: 10pt; BACKGROUND: red; COLOR: #ff9900; mso-bidi-font-family: Arial; mso-highlight: red">Sampe MS Word content</span></b><b style="mso-bidi-font-weight: normal"><span style="FONT-SIZE: 10pt; COLOR: #ff9900; mso-bidi-font-family: Arial"><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p></span></b></p></span></span>
      
  </Content>
</telerik:radeditor>
<asp:Button ID="Button1" runat="server" Text="Submit" />

In regards to the second problem:

I tested the following code and I was able to obtain the editor's content as HTML (the get_html method returns the content with its HTML markup)

<script type="text/javascript">
function OnClientLoad(editor, args)
{
   var element = document.all ? editor.get_document().body : editor.get_document();
   $telerik.addExternalHandler(element, "paste", function(e)
   {
       window.setTimeout(function()
       {
        var oSelElem = editor.get_html();
        alert(oSelElem);
       }, 300);
   });
}
</script>
<telerik:radeditor runat="server" ID="RadEditor1"  ExternalDialogsPath="" StripFormattingOptions="NonesupressCleanMessage"
    OnClientLoad="OnClientLoad">
</telerik:radeditor>

You can see my test in the attached video.


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Chris]

Hi,

Thanks for your suggestion.  However, are there any workaround which would allow me to capture the paste event but also removing FONT, CSS, SPAN while pasting?  I can't remove those on submit but it has to be on paste because my user is pretty picky on this.  Any solution would be appreicated.

Chris

[Rumen]

Hi Chris,

Here is how to achieve your scenario:

<script type="text/javascript">
function OnClientLoad(editor, args)
{
   var element = document.all ? editor.get_document().body : editor.get_document();
   $telerik.addExternalHandler(element, "paste", function(e)
   {
       window.setTimeout(function()
       {
             //write here your code which you want to execute when the paste event is fired
             //after that execute the editor's clean filters
             var oSelElem = editor.get_html();
             alert(oSelElem);
             editor.fire("SelectAll");
             editor.fire("FormatStripper", {value : "CSS"});
             editor.fire("FormatStripper", {value : "FONT"});
             editor.fire("FormatStripper", {value : "SPAN"});
             alert(editor.get_html());
             alert(oSelElem);
       }, 300);
   });
}
</script>
<telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"  StripFormattingOptions="NonesupressCleanMessage">
</telerik:radeditor>

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Chris]

Hi Rumen,

After pasting your code into my project, it looks like it does remove the column header but it doesn't remove style from any td cell in IE7 browser (works in FF3).

<table cellspacing="0" cellpadding="0" width="412" border="0">
    <colgroup><col width="63" /><col width="63" /><col width="69" /><col width="59" /><col width="158" /></colgroup>
    <tbody>
        <tr height="45">
            <td style="border-right: #e0dfe3; border-top: #e0dfe3; border-left: #e0dfe3; width: 47pt; border-bottom: #e0dfe3; height: 33.75pt; background-color: transparent" width="63" height="45">Wipro</td>
            <td style="border-right: #e0dfe3; border-top: #e0dfe3; border-left: #e0dfe3; width: 47pt; border-bottom: #e0dfe3; background-color: transparent" width="63">4690</td>

After javascript run the code you provided, as you see td tag still contains style.  However, col tag removes all style.  Please advise.

Chris

[Rumen]

Hi Chris,

Please, put the editor.fire("FormatStripper", {value : "CSS"}); line after these ones:

editor.fire("FormatStripper", {value : "FONT"});
editor.fire("FormatStripper", {value : "SPAN"});

Here is the whole code:

<script type="text/javascript">
function OnClientLoad(editor, args)
{
   var element = document.all ? editor.get_document().body : editor.get_document();
   $telerik.addExternalHandler(element, "paste", function(e)
   {
       window.setTimeout(function()
       {
             //write here your code which you want to execute when the paste event is fired
             //after that execute the editor's clean filters
             var oSelElem = editor.get_html();
             alert(oSelElem);
             editor.fire("SelectAll");
             editor.fire("FormatStripper", {value : "FONT"});
             editor.fire("FormatStripper", {value : "SPAN"});
             editor.fire("FormatStripper", {value : "CSS"});
             alert(editor.get_html());
             alert(oSelElem);
       }, 300);
   });
}
</script>
<telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"  StripFormattingOptions="NonesupressCleanMessage">
</telerik:radeditor>

Kind regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.