Media manager inserts media player <object> for .mov file

[Ilia]

...which obviously results in movie not playing.
However older version (6.6.3.0) of the radeditor that we currently use in our live site correctly inserts quicktime object via <embed> tag.

[Rumen]

Hi Ilia,

The new version of RadEditor offers a new event property named OnClientPasteHtml. The OnClientPasteHtml event is useful in scenarios where the developers need to examine or modify the HTMl to be pasted by an editor tool or dialog before it is inserted in the editor content area.

My suggestion is to check whether the inserted media object has .mov extension using the OnClientPasteHtml event and if it is to construct the requested correct tag string which will be inserted after that in the editor's content area.

Best regards,
Rumen
the Telerik team

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

[Ilia]

ok heres what i came up with:

fixMediaManagerHtml = function(args)
{
    var div = document.createElement("DIV");
    Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, args.get_value());
    var obj = div.firstChild;
    if (obj.tagName.toLowerCase() != "object")
        return;

    var embed = document.createElement("EMBED");
    embed.setAttribute("type", "movie/quicktime");
    embed.setAttribute("pluginspage", "http://www.apple.com/quicktime/download/");

    for (var i=0; i<obj.attributes.length; i++)
    {
        var node = obj.attributes[i]
        if (node.name.toLowerCase() != "classid" && node.name.toLowerCase() != "type")
            embed.setAttribute(node.name, node.value);
    }

    getExtension = function(filePath)
    {
        var match = filePath.match(/\.(\w+)$/);
        return match ? match[1].toLowerCase() : null;
    }

    var node = obj.firstChild;
    while (node != null)
    {
        if (node.nodeType == 1 && node.tagName.toLowerCase() == "param")
        {
            if (node.getAttribute("name") != "FileName")
                embed.setAttribute(node.getAttribute("name"), node.getAttribute("value"));
            else if (getExtension(node.getAttribute("value")) != "mov")
                return;
            else
                embed.setAttribute("src", node.getAttribute("value"));
        }
        node = node.nextSibling;
    }

    div.innerHTML = "";
    div.appendChild(embed);
    args.set_value(div.innerHTML);
}

onClientPasteHtml = function(editor, args)
{
    if (args.get_commandName() == "MediaManager")
        fixMediaManagerHtml(args);
}

...probably not entirely correct in terms of creating proper <embed> object, but i don't really care... i just want proof of concept.

so now now my code rewrites HTML being inserted into this:

<embed width="150" height="150" src="<my .mov file>" pluginspage="http://www.apple.com/quicktime/download/" type="movie/quicktime"></embed>

however what it seems radeditor hacks actual value being saved into this:

<img width="150" height="150" flashsrc="<my .mov file>" src="/WebResource.axd?d=4mw3SOIkWha_FFeKQiRwQCRo20lOymjGtt6YF3qiMK1x0WqjAVPLJq8fp4UxgxGAyA_OtfhqmPtNWPJeIIzie8-_WYGENtbMAJ8Z6jhoees1&amp;t=633523285849140380" pluginspage="http://www.apple.com/quicktime/download/" type="movie/quicktime" isflash="true"/>

which is totaly uncool, since clearly <img> object will not play quicktime video.

[Rumen]

Hi Ilia,

I tried to reproduce the reported problem with your code, but unfortunately to no avail. You can see my test in the attached video. For your convenience I have also attached my test project.

Please, make sure that you are using the latest version of RadEditor for ASP.NET AJAX.

Best regards,
Rumen
the Telerik team

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

[Ilia]

yes, your example appears to be working correctly in IE6 and IE7, however broked in FF2 in the way I described earlier.
Sorry, I do development in FF and sometimes forget to test in IE.

[Rumen]

Hi Ilia,

This is odd, because I tested the exact same project and js code in Firefox 3.0.1 and I was not able to reproduce the problem again. Please, see the attached video for more information.

Could you please, provide more information and details how to reproduce the problem on my side?

Kind regards,
Rumen
the Telerik team

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

[Ilia]

I am unable to test this in FF3 mostly because we are still targeting FF2 users and do development on FF2, however behaviour in your video seems consistant with what I am seeing here.
Notice how after you insert quicktime video in FF3 it doesn't play. Then you switch to html view and verify that html is correct. That is fine.
Now after that switch back to design view. You will notice flash logo image in place of where emebed object supposed to be. Inspect that element with firebug.

PS: really this would've been so much easier if I could attach screenshot

[Rumen]

Hello Ilia,

Thank you for the additional information.

Basically, Firefox does not offer support for playing video and flash files in the editable HTML element (DIV, IFRAME, etc), but only when previewing the produced HTML content outside them. The content area of RadEditor is editable IFRAME and this is the reason for that the mov video file is not played in design mode

In order to visualize the flash elements that the browser does not play, the editor using its filters architecture shows an image. The same is valid for the media objects in the content area. That is why in Design mode the content filter replaces the embed tag with an image tag and when you switch to Html mode or submit the content the IMG tag is converted back to its original flash / media embed tag without changes.

<img isflash="true" src="/editorQ22008/WebResource.axd?d=IvrzW79NUFTkFrkyMM-fTfSBlxw3zWLswiLSXRBcFYmuVfqu7VOMIWYlsc-06bMlcBejBchF5BlEhgQxAjQKyOBghv8Vtta18V3_ZxcZqOY1&amp;t=633523229280000000" flashsrc="/editorQ22008/Images/test.mov" pluginspage="http://www.apple.com/quicktime/download/" type="movie/quicktime" width="150" height="150"><br>

Best regards,
Rumen
the Telerik team

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

[Ilia]

Hello Rumen,
It makes sense that radeditor needs to temporarily hack html for design view. However it does not make sense that hacked html (as opposed to one you can see in html view) is returned by get_html().

To verify that add this to your aspx page (preferably outside <form>): 
<button onclick="alert($find('RadEditor1').get_html())">alert get_html()</button>

Then repeat reproduction steps we went through earlier. Switch to design view to see flash image. Click on this button. Observe hacked html as output.

Now switch back to html view. Click on the button. Observe correct html.

[Rumen]

Hi Ilia,

All you need to do is to set the true parameter of the get_html(true) method and you will obtain the correct content

<button onclick="alert($find('RadEditor1').get_html(true));return false;">alert get_html()</button>


Here it is:
<embed height="150" width="150" src="/editorQ22008/Images/test.mov" pluginspage="http://www.apple.com/quicktime/download/" type="movie/quicktime"></embed><br />

I hope this helps.

Greetings,
Rumen
the Telerik team

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

[Ian]

I'm faced with the same issue as this thread, but i'm using the RadHtmlField in SharePoint. There doesn't seem to be a property "onClientPasteHtml" for RadHtmlField. Any idea how I could handle this?

[Rumen]

Hi James,

The following KB article will show you how to attach event to RadEditor for MOSS: How to execute custom code called on RadEditor's events.

Greetings,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.