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

Adding paste and blur events

12 Answers 211 Views

Editor

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

12 Answers, 1 is accepted

answered on 13 Mar 2008, 11:28 AM

AttachEventHandlers.zip

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

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

answered on 21 Jul 2008, 07:08 AM

CaptureThePasteEventVideo.zip

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:

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

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

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

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.