[Solved] RadEditor Mouse Release Event.

[Dipsa Shah]

HI,

I am using Rad Editor Control. Let me tell you what I need to know.

When I drag and Drop image from any IE browser to Editor and when I release the mouse, I need to replace that HTML image tag (generated on html side) with my scripts.

So As soon as I release the mouse, I need some event handler so I can write the code and replace that HTML image tag with my small script.

For this task which event I can use of Rad Editor to fulfill my requirement.

Thnaks
Dipsa Shah

[Rumen]

Hello Dipsa,

You can use the attachEventHanlder method to attach to the dragdrop event of the editor's content area, e.g.

<script type="text/javascript">

function OnClientLoad(editor, args)

{

var element = document.all ? editor.get_document().body : editor.get_document();

var eventHandler  = document.all ? "drop" : "dragdrop";

$telerik.addExternalHandler(element, eventHandler, function(e)

{

setTimeout(function()

{

var div  = editor.get_document().createElement("DIV");

div.innerHTML = editor.get_html(true);

var images = div.getElementsByTagName("IMG");

for (var i=0;i<images.length;i++)

{

var image = images[i];

//write here your custom code

// image.style.border = "1px solid red";

}

editor.set_html(div.innerHTML);

}, 300);

});

}

</script>

After that attach the OnClientLoad function to the OnClientLoad property of RadEditor, e.g.

<telerik:RadEditor id="RadEditor1" OnClientLoad="OnClientLoad" ...

Regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Dipsa Shah]

Hey,

Thank you so much.

Your Code is quite similar to what I need. 99% perfect. Only thing is, I don't when I upload the image and release the mouse I dont want to set the properties but instead of that I need to replace the whole Image tag with my script.

function OnClientLoad(editor, args)   
{   
   var element = document.all ? editor.get_document().body : editor.get_document();   
   var eventHandler  = document.all ? "drop" : "dragdrop";   
   $telerik.addExternalHandler(element, eventHandler, function(e)   
   {   
       setTimeout(function()   
       {   
        var div  = editor.get_document().createElement("DIV");   
        div.innerHTML = editor.get_html(true);   
        var images = div.getElementsByTagName("IMG");   
        for (var i=0;i<images.length;i++)   
        {   
            var image = images[i];
            if(image.id == "DLISTImage_ctl00_img")
            {
                image.style.border = "1px solid red";
                var Strscript = "<object height='130' width='580' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'> " +
                               "<param name='Movie' value='/EditorImages/flash/image_strip.swf'/>" +
                                "<param value='xmlData=xyz' name='flashvars'/>" +
                                "<param name='play' value='true'/>" +
                                "<param name='quality' value='high'/>" +
                                "<param name='wmode' value='transparent'/>" +
                                "<param name='loop' value='false'/>" +
                                "<param name='menu' value='false'/><embed src='/EditorImages/flash/image_strip.swf' width='130' height='580' type='application/x-shockwave-flash' pluginspage='xyz' quality='high' wmode='transparent' loop='false' menu='false'></embed></object>";
                                
                  var strImg = "<img alt='' id='DLISTImage_ctl00_img' src='http://localhost:52713/EditorImages/Image/123.jpg'/>" ;
                  strImg.replace(strImg, Strscrit); --------------------Not working.
            }
        }   
           
        editor.set_html(div.innerHTML);   
      }, 300);   
   });   
}

Thanks a lot for your reply.
Dipsa Shah

[Rumen]

Hi Dipsa,

Please, try the following solution that should work for your scenario:

<script type="text/javascript">
function OnClientLoad(editor, args)
{
   var element = document.all ? editor.get_document().body : editor.get_document();
   var eventHandler  = document.all ? "drop" : "dragdrop";
   $telerik.addExternalHandler(element, eventHandler, function(e)
   {
       setTimeout(function()
       {

        var images = editor.get_document().getElementsByTagName("IMG");
        for (var i=0;i<images.length;i++)
        {
            var image = images[i];
            if(image.id == "DLISTImage_ctl00_img")
            {
                image.style.border = "1px solid red";
                var Strscript = "<object height='130' width='580' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'> " +
                               "<param name='Movie' value='/EditorImages/flash/image_strip.swf'/>" +
                                "<param value='xmlData=xyz' name='flashvars'/>" +
                                "<param name='play' value='true'/>" +
                                "<param name='quality' value='high'/>" +
                                "<param name='wmode' value='transparent'/>" +
                                "<param name='loop' value='false'/>" +
                                "<param name='menu' value='false'/><embed src='/EditorImages/flash/image_strip.swf' width='130' height='580' type='application/x-shockwave-flash' pluginspage='xyz' quality='high' wmode='transparent' loop='false' menu='false'></embed></object>";

                 var selElem = editor.getSelectedElement();
                 editor.selectElement(selElem);


                var filterIE = editor._filtersManager.getFilterByName("IEKeepObjectParamsFilter");
                var filterMozz = editor._filtersManager.getFilterByName("MozillaKeepFlashString");
                html = (filterIE)?filterIE.getDesignContent(Strscript):html;
                html = (filterMozz)?filterMozz.getDesignContent(Strscript):html;


                 var div = editor.get_document().createElement("div");
                 div.innerHTML = html;

                 var parent = selElem.parentNode;

                 parent.insertBefore(div.firstChild, selElem);
                 parent.removeChild(selElem);
            }
        }


      }, 300);
   });
}
</script>
<telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"></telerik:radeditor>
<img src="myImage.jpg" id="DLISTImage_ctl00_img" />

For your convenience I have attached my test page.

All the best,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.