This is a migrated thread and some comments may be shown as answers.

Adding paste and blur events

12 Answers 144 Views
Editor
This is a migrated thread and some comments may be shown as answers.
reethish
Top achievements
Rank 1
reethish asked on 12 Mar 2008, 12:05 PM

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

12 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 12 Mar 2008, 05:44 PM
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
0
reethish
Top achievements
Rank 1
answered on 13 Mar 2008, 10:56 AM
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

0
reethish
Top achievements
Rank 1
answered on 13 Mar 2008, 10:59 AM
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

0
Rumen
Telerik team
answered on 13 Mar 2008, 11:28 AM
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
0
Chris
Top achievements
Rank 1
answered on 18 Jul 2008, 04:16 PM
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
0
Rumen
Telerik team
answered on 18 Jul 2008, 04:40 PM
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
0
Chris
Top achievements
Rank 1
answered on 18 Jul 2008, 04:44 PM
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

0
Rumen
Telerik team
answered on 21 Jul 2008, 07:08 AM
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
0
Chris
Top achievements
Rank 1
answered on 21 Jul 2008, 01:05 PM
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
0
Rumen
Telerik team
answered on 22 Jul 2008, 01:00 PM
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
0
Chris
Top achievements
Rank 1
answered on 29 Jul 2008, 03:20 PM
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
0
Rumen
Telerik team
answered on 30 Jul 2008, 07:48 AM
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.
Tags
Editor
Asked by
reethish
Top achievements
Rank 1
Answers by
Rumen
Telerik team
reethish
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Share this question
or