[Solved] Problems with ConvertToXhtml Filter and <object> tag

[Dan Ehrmann]

I am creating a gadget (a custom toolbar button) to allow users to add audio/video to an html page. My code generates the correct object/embed tag and calls insertHtml to add it to the editor. I have found two problems, which seem to be related to the ConvertToXhtml filter.

First, when the xhtml filter is not set, the <param> elements of the <object> tag get duplicated. You can reproduce this in the editor content filter demo. Turn off the xhtml filter and paste in the <object> tag below in html view. Switch to design view and back to html view. You will see the <param>s are repeated. Do it again and you will get another set. This behavior does not happen if the xhtml filter is enabled.

Next is a problem when the xhtml filter is enabled. When I insert my code (see below) with pasteHtml, the video start playing immediately (so I know the <object> tag is valid). I also put an alert() in my code so I could see exactly what was being inserted, and it matched the code below. When I switch to html view, the <param> elements have been removed. If I go back to design, the video no longer plays, since the tag is no longer valid. (Note that I am using IE for this testing.) However, if I go to html view and manually paste in the <object> tag, it works fine. I can switch to html view and the video plays - I can go back and forth and save the changes and all is well. It is only a problem if I use insertHtml to add the content. If I disable the xhtml filter, this problem does not occur.

Finally, <embed> portion contains extra attributes 'originalAttribute' and 'originalPath' when the xhtml filter is enabled. These attributes  also get repeated in the editor (like the <param>s).

I should also note that, while this example uses flowplayer, the same things seem to happen with any flash movie (and presumably with any <object> tag.

I will have to operate with the xhtml filter disabled for now, since the extra attributes and <param>s don't seem to hurt the function of the flash player. But I would really like to get this behaving properly.

Here is the <object> tag I use for this testing:
 

 

<object width="500" height="500" id="flowplayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">

<param name='movie' value='/media_player/flowplayer-3.1.5.swf'/>

<param name='flashvars' value="config={'clip':'/media_player/video.flv'}"/>

<embed type='application/x-shockwave-flash' width='500' height='500'  src='/club/media_player/flowplayer-3.1.5.swf' flashvars="config={'clip':'/media_player/video.flv'}">

</embed></object>

Edit 1-31:

I have found another issue. When I use pasteHtml to insert an object tag when another object tag is already present in the html, the param elements of the new object tag are removed. I added an 'alert' in my process so I can see that the html I generate has the param elements, but when I look at the html view in the editor, the paramas are gone. I cannot reproduce this on your demo site, since the pasteHtml demo replaces the entire content of the editor, rather than inserting or appending.

[Dan Ehrmann]

ping

[Rumen]

Hi Dan,

It is Internet explorer that strips the param tags and this behavior does not exist in Firefox. We develop a special content filters that keep the param tags and for your convenience I have modified your code to use them. Here is the solution:

<telerik:radeditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">
   <Tools>
       <telerik:EditorToolGroup>
           <telerik:EditorDropDown Name="Emoticons" Text="Emoticons" ItemsPerRow="3" PopupWidth="90" PopupHeight="90">
                <telerik:EditorDropDownItem  Name ="Video 1" value="Video 1" />
                <telerik:EditorDropDownItem  Name ="Video 2" value="Video 2" />
                <telerik:EditorDropDownItem  Name ="Video 3" value="Video 3" />
           </telerik:EditorDropDown>
       </telerik:EditorToolGroup>
   </Tools>
</telerik:radeditor>

<script type="text/javascript">
function OnClientCommandExecuting(editor, args)
{
   var name = args.get_name();
   var val = args.get_value();
   var html = "<object height=\"150\" width=\"150\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"><param name=\"Movie\" value=\"/upload/flash/MojaveExternalAll.swf\"><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=\"/upload/flash/MojaveExternalAll.swf\" width=\"150\" height=\"150\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" quality=\"high\" wmode=\"transparent\" loop=\"false\" menu=\"false\"></embed></object>"
   if (name == "Emoticons")
   {
       var filterIE = editor._filtersManager.getFilterByName("IEKeepObjectParamsFilter");
        var filterMozz = editor._filtersManager.getFilterByName("MozillaKeepFlashString");
        html = (filterIE)?filterIE.getDesignContent(html):html;
        html = (filterMozz)?filterMozz.getDesignContent(html):html;
        editor.pasteHtml(html, "Insert Flash");
       //Cancel the further execution of the command as such a command does not exist in the editor command list
       args.set_cancel(true);
   }

   if (name == "DynamicDropdown")
   {
       editor.pasteHtml("<div style='width:100px;background-color:#fafafa;border:1px dashed #aaaaaa;'>" + val + "</div>");
       //Cancel the further execution of the command as such a command does not exist in the editor command list
       args.set_cancel(true);
   }
}
</script>

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.

[Dan Ehrmann]

I enabled the xhtml filters and  adapted your code to my situation. it is now keeping the params elements (which is good), but the filters are doubling them in IE (it seems to be ok in Firefox).

My button launches a popup window where the user makes some selections. The popup then calls a function to generate the html and insert it into the editor. Here is the code I use, with your filters added in (the alerts are there for testing):

function insertAVCode(template, contentUrl, width, height) {
    var html = template.replace(/<<content_url>>/g, contentUrl);
    html = html.replace(/<<width>>/g, width);
    html = html.replace(/<<height>>/g, height);

    alert(html);

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

    insertHtml(html);
    alert(html);
}

As you can see, I do a couple of substitutions in a template string (which contains the object-embed tag). Then I apply your fillters. Here is the object tag before applying the filters:

<object width='300' height='300 'id='flowplayer' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'> <param name='movie' value='/club/media_player/flowplayer-3.1.5.swf' > <param name='flashvars' value="config={'clip':{'url':'http%3A//documents.clubexpress.com/documents/documents.ashx%3Fkey%3Dn2eXckLPAkHu9MkQxykz1g%253d%253d','autoPlay':false}}" > <param name='allowfullscreen' value='true' />  <embed type='application/x-shockwave-flash' width='300' height='300' allowfullscreen='true' src='/club/media_player/flowplayer-3.1.5.swf' flashvars="config={'clip':{'url':'http%3A//documents.clubexpress.com/documents/documents.ashx%3Fkey%3Dn2eXckLPAkHu9MkQxykz1g%253d%253d','autoPlay':false}}"> </embed></object>

and here it is after the filters:

<object width='300' height='300 'id='flowplayer' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'> <rade_param name='movie' value='/club/media_player/flowplayer-3.1.5.swf' ></rade_param><param name='movie' value='/club/media_player/flowplayer-3.1.5.swf' /> <rade_param name='flashvars' value="config={'clip':{'url':'http%3A//documents.clubexpress.com/documents/documents.ashx%3Fkey%3Dn2eXckLPAkHu9MkQxykz1g%253d%253d','autoPlay':false}}" ></rade_param><param name='flashvars' value="config={'clip':{'url':'http%3A//documents.clubexpress.com/documents/documents.ashx%3Fkey%3Dn2eXckLPAkHu9MkQxykz1g%253d%253d','autoPlay':false}}" /> <rade_param name='allowfullscreen' value='true' ></rade_param><param name='allowfullscreen' value='true' />  <embed type='application/x-shockwave-flash' width='300' height='300' allowfullscreen='true' src='/club/media_player/flowplayer-3.1.5.swf' flashvars="config={'clip':{'url':'http%3A//documents.clubexpress.com/documents/documents.ashx%3Fkey%3Dn2eXckLPAkHu9MkQxykz1g%253d%253d','autoPlay':false}}"> </embed></object>

I see that the extra params are actually 'rade_params'. The tag works, but I really don't want the extra stuff.

[Rumen]

Hi Dan,

How did you get the HTML content from RadEditor?

If you use the editor.get_html() method, then you should set the true parameter in order to obtain the content parsed by the editor's content filters, e.g.

editor.get_html(true);

Therefore the special <rade_params> tags will be returned by the editor.get_html(true) method as valid <param> tags.


Regards,
Rumen
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Dan Ehrmann]

Rumen -

I think this was a false alarm. I was examinnig the html in the middle of the process. When I am done with the editor, I use the Content property to get and save the editor contents, and this is fine - no rade_params.

I think this is working correclty now - thanx for your help.

[Dan Ehrmann]

One more minor issue has come up. In Firefox, when I save an object-embed tag combination, the closing </embed> is removed. I can see this happen in your demo editor - in html view, paste in an object-embed tag for flash or something, then switch to design view and back to html - the </embed> is gone. This does not happen in IE. It does not seem to affect the function of the tag, but it should not happen.

[Lini]

Hi Dan,

The EMBED tag is not a part of any official W3C (XHTML) standard so different browsers implement it differently. In most of the implementations (including that of Firefox) the element has no closing tag. This is why the </embed> is automatically removed by the browser. You should not worry about it - the flash/movie object will work just fine without it.

If you are still interested, you can read about the embed tag in the HTML5 draft - HTML5 Spec on W3C. There is no closing tag for <embed> there as well.

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

[Chris]

Hi Rumen,

My client's are having the same issue. How do I verify that the version of r.a.d. editor that I am currently using (7.3.3) has the IEKeepObjectParamsFilter?

[Rumen]

Hello Chris,

Yes, version 7.3.3 offers the IEKeepObjectParamsFilter filter. You can find its code in the \RadControls\Editor\Scripts\7_3_3\RadEditor.js file.

Regards,
Rumen
the Telerik team