Flash object in Firefox

[Nathan]

I have noticed a bug when placing Flash objects in content with RadEditor. This happens whether I use Firefox or Internet Explorer to place the flash animation.
When I save the content and view it on the page, the flash animation appears as expected in Internet Explorer, however it shows up as the big "F" icon in Firefox. From what I can tell, the editor is failing to swap out the placeholder image tag with the proper tags to embed the swf animation. I also noticed that I can switch to HTML view and save it while I am in HTML view and it works fine in all browsers. This has lead me to believe that there is an issue with the RadEditor javascript that fires when the modes are switched and when the content is saved. Please advise on how to fix this issue.

[Rumen]

Hi Nathan,

We are not aware of this problem and you are the first to report it.
I tried to reproduce the reported problem with the Save In Database example of RadEditor, but without success. Could you please test the example and send us detailed step by step instructions how to reproduce the problem?

Best wishes,
Rumen
the Telerik team

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

[André]

Hi,

I'm seeing a similar issue.
When I place a media file in the editor in Firefox, I get a big flash icon. If I save in HTML view, this is what I get in the code behing:

<object height="150" width="150" type="application/x-oleobject" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="/mar26/shared/media/SAMPLE.AVI"><embed src="/mar26/shared/media/SAMPLE.AVI" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer" width="150" height="150"></object>

Then, if I save the same content, without touching it, in the design view, this is what I get:

<object type="application/x-oleobject" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="150" height="150">
<param name="FileName" value="/mar26/shared/media/SAMPLE.AVI"><img isflash="true" src="/mar26/WebResource.axd?d=VKgfCOMGbNfFHpaQ2fagQwx54iDXBFZvJ7fIi4SHX7kJQaESHnWBw0ciKR3EmQ4gyVj3mPF0yY8UbGwj-HF14xc1L6Up4UM7hu5wOZEGJyM1&amp;t=633761549161885913" flashsrc="/mar26/shared/media/SAMPLE.AVI" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer" width="150" height="150"></object>

At that point, Firefox cannot play the video anymore but IE7 still can. That is until I open the previous content in the Editor running on IE7 and save it from the design view. Then I get this:

<OBJECT type=application/x-oleobject height=150 width=150 classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95>
<rade_param name="FileName" value="/mar26/shared/media/SAMPLE.AVI"><img isflash="true" src="/mar26/WebResource.axd?d=VKgfCOMGbNfFHpaQ2fagQwx54iDXBFZvJ7fIi4SHX7kJQaESHnWBw0ciKR3EmQ4gyVj3mPF0yY8UbGwj-HF14xc1L6Up4UM7hu5wOZEGJyM1&amp;t=633761549161885913" originalAttribute="src" originalPath="/mar26/WebResource.axd?d=VKgfCOMGbNfFHpaQ2fagQwx54iDXBFZvJ7fIi4SHX7kJQaESHnWBw0ciKR3EmQ4gyVj3mPF0yY8UbGwj-HF14xc1L6Up4UM7hu5wOZEGJyM1&amp;t=633761549161885913" flashsrc="/mar26/shared/media/SAMPLE.AVI" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer" width="150" height="150"></OBJECT>

By then none of the browsers can play the video anymore...
The same thing happens with mp3 files. And with Flash files but for Firefox only.

[ManniAT]

Hi could this be some issue like the one I have with Silverlight:
http://www.telerik.com/community/forums/aspnet-ajax/editor/problems-with-silverlight.aspx

[Rumen]

Hi André,

Firefox is unable to preview video and flash object elements in the editable IFRAME / DIV elements. For that reason RadEditor is displaying an images over the hidden object tag and you can see in the real-time html module in Design mode that the editor is inserting an img tag in the param tag of the object tag:

<img isflash="true" src="/mar26/WebResource.axd?d=VKgfCOMGbNfFHpaQ2fagQwx54iDXBFZvJ7fIi4SHX7kJQaESHnWBw0ciKR3EmQ4gyVj3mPF0yY8UbGwj-HF14xc1L6Up4UM7hu5wOZEGJyM1&amp;t=633761549161885913"  ...

This tag is removed when switching to Html mode or submitting the content.

If this tag is not removed for some reason when the user is not in design mode then this is a bug. I tried to reproduce this behavior but to no avail.  Are you able to reproduce it using the Save In Database example of RadEditor? If yes, could you please open a support ticket and send a video demonstrating the issue? You can use SnagIt or Jing for example to capture the video.

If you are unable to reproduce the problem, please send a sample working project along with a video or screenshots demonstrating how to reproduce it on our side.

Once we are able to recreate the problem locally, we will do our best to provide a solution.

Greetings,
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.

[André]

Thanks for the reply. It prompted me to take a second look at the doc and it turns out that I needed to call get_html(true) in javascript to get a cleaned up version of the content. It now works fine in both IE and FF.

[Gold Coaster]

Hi André/Telerik

How do you call get_html(true) in javascript to get a cleaned up version so the flash file can be displayed within design mode in firefox?

This seems to be the only hint of a solution.

Hi Telerik Support, is there a solution for this?

Looking forward to your reply.

[Rumen]

Hi Michael,

It is not possible to play the Flash video in Design mode of RadEditor in Firefox. The rich text editing engine of the Firefox does not support this operation. You can play the flash video once the content is displayed outside of RadEditor.

You can obtain the editor's content on the server via the RadEditor1.Content property or on the client using the editor.get_html(true) method.


Best wishes,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tran Quang Dao]

Hi, Telerik
When i insert a flash/media object to RadEditor (use FlashManager), in design view of RadEditor it display a 'F' icon. i want to replace 'F' icon with other image. How can i do?

[Rumen]

Hi Tran,

Here is an example on how to change the flash icon in the OnClientInit event of RadEditor:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad" OnClientInit="OnClientInit">
    <FlashManager ViewPaths="~/" UploadPaths="~/" />
    <MediaManager ViewPaths="~/" UploadPaths="~/" />
    <Content>
        <object style="width: 1041px; height: 418px;" type="application/x-oleobject" height="418" width="1041" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
        <param name="FileName" value="Glee_Imagine.wmv"/><embed src="Glee_Imagine.wmv" width="150" height="150" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer"></embed></object>
    </Content>
</telerik:RadEditor>
<script type="text/javascript">
    function OnClientLoad(editor) {
        var editorFiltersManager = editor.get_filtersManager();
        editorFiltersManager.add(new Telerik.Web.UI.Editor.MozillaKeepFlash(editor.get_mozillaFlashOverlayImage()));
        editor.set_html(editor.get_html(true));
    }
    function OnClientInit(editor) {
        editor.set_mozillaFlashOverlayImage("NewImage.gif");
    }
</script>

All the best,
Rumen
the Telerik team

[Arul]

Hi Rumen,

 I have problem in play the flash files inside the RadEditor when i run my webpage. I got the content from database and assign it to RadEditor.
It's working fine in IE but not in Firefox. It shows the 'F' instead of the flash file.

 If i view the page source i got the object like this.

%3ctable cellspacing%3d%221%22 cellpadding%3d%221%22 width%3d%22100%25%22 border%3d%220%22%3e
    %3ctbody%3e
        %3ctr%3e
            %3ctd style%3d%22width%3a 70%25%3b%22 valign%3d%22top%22 colspan%3d%222%22%3e
            %3cp style%3d%22text-align%3a justify%3b%22%3eWelcome to your Vacation Club%21 This is your own personal space to explore all of the fascinating travel opportunities that GeoHoliday has to offer you. This special section can help you plan your next vacation%2c inquire and make changes to your account%2c learn more about your membership%2c keep up date with Club news and so much more%21 We encourage you to visit often and make the most of your Membership. We are happy to serve you the best way we know how and invite you to communicate to us through your website. So sit back and enjoy traveling through your very own piece of the Internet. As always%2c we look forward to helping you and your family reserve your next vacation experience%21%3c/p%3e
            %3c/td%3e
            %3ctd style%3d%22width%3a 30%25%3b%22 valign%3d%22top%22%3e
            %3ctable cellspacing%3d%221%22 cellpadding%3d%221%22 width%3d%22100%25%22 border%3d%220%22%3e
                %3ctbody%3e
                    %3ctr%3e
                        %3ctd%3e%3cimg width%3d%22159%22 height%3d%2294%22 alt%3d%22%22 src%3d%22images/MemberContentImages/side_02.gif%22 /%3e%3c/td%3e
                    %3c/tr%3e
                    %3ctr%3e
                        %3ctd%3e%3cimg width%3d%22159%22 height%3d%2294%22 alt%3d%22%22 src%3d%22Images/MemberContentImages/side_03.gif%22 /%3e%3c/td%3e
                    %3c/tr%3e
                    %3ctr%3e
                        %3ctd%3e%3cimg width%3d%22159%22 height%3d%2294%22 alt%3d%22%22 src%3d%22Images/MemberContentImages/side_04.gif%22 /%3e%3c/td%3e
                    %3c/tr%3e
                    %3ctr%3e
                        %3ctd%3e%3cimg width%3d%22159%22 height%3d%2294%22 alt%3d%22%22 src%3d%22Images/MemberContentImages/side_05.gif%22 /%3e%3c/td%3e
                    %3c/tr%3e
                    %3ctr%3e
                        %3ctd%3e%3cimg width%3d%22159%22 height%3d%2294%22 alt%3d%22%22 src%3d%22Images/MemberContentImages/side_06.gif%22 /%3e%3c/td%3e
                    %3c/tr%3e
                    %3ctr%3e
                        %3ctd%3e%3cimg width%3d%22159%22 height%3d%2294%22 alt%3d%22%22 src%3d%22Images/MemberContentImages/side_07.gif%22 /%3e%3c/td%3e
                    %3c/tr%3e
                %3c/tbody%3e
            %3c/table%3e
            %3cbr /%3e
            %3c/td%3e
        %3c/tr%3e
    %3c/tbody%3e
%3c/table%3e
%3cobject height%3d%22150%22 width%3d%22150%22 classid%3d%22clsid%3aD27CDB6E-AE6D-11cf-96B8-444553540000%22%3e
%3cparam name%3d%22Movie%22 value%3d%22/Images/MemberHomeContent/small_map.swf%22/%3e
%3cparam name%3d%22play%22 value%3d%22true%22/%3e
%3cparam name%3d%22quality%22 value%3d%22high%22/%3e
%3cparam name%3d%22wmode%22 value%3d%22transparent%22/%3e
%3cparam name%3d%22loop%22 value%3d%22false%22/%3e
%3cparam name%3d%22menu%22 value%3d%22false%22/%3e%3cembed src%3d%22/Images/MemberHomeContent/small_map.swf%22 width%3d%22150%22 height%3d%22150%22 type%3d%22application/x-shockwave-flash%22 pluginspage%3d%22http%3a//www.macromedia.com/go/getflashplayer%22 quality%3d%22high%22 wmode%3d%22transparent%22 loop%3d%22false%22 menu%3d%22false%22%3e%3c/embed%3e%3c/object%3e%3cbr /%3e
%3cbr /%3e

Please help me to fix this issue.

[Rumen]

Hello Arul,

Firefox does not offer support for playing video and flash files in editable HTML elements (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 why the youtube flash video does not play in design mode of the control.

You can verify my words by testing any other web based editor and try to insert a movie or flash in Firefox and you will be not able to see it. You can also test the official Mozilla demo editor at http://www.mozilla.org/editor/midasdemo/

In order to visualize the flash and media elements that Mozilla does not play, the editor uses its content filters to display an image (the flash icon) on the place of the flash / media embed tag. When switching to Html mode or submitting the content the IMG tag is converted back to its original flash / media embed tag without modifications.

Best regards,
Rumen
the Telerik team

[Bob]

Hello,

Regarding:

<script type="text/javascript">

    function OnClientLoad(editor) {

        var editorFiltersManager = editor.get_filtersManager();

        editorFiltersManager.add(new Telerik.Web.UI.Editor.MozillaKeepFlash(editor.get_mozillaFlashOverlayImage()));

        editor.set_html(editor.get_html(true));

    }

    function OnClientInit(editor) {

        editor.set_mozillaFlashOverlayImage("NewImage.gif");

    }

</script>

Can the editor.set_mozillaFlashOverlayImage("NewImage.gif"); be set to a <div>?

Thanks,

BZ

[Rumen]

Hello,

No, because this filter is especially designed for flash/media objects. If you would like you can implement your own custom content filter.

Regards,
Rumen
the Telerik team