tinymce editor modifies html code

KienTitel 1 post 21 karma points

Dec 20, 2010 @ 13:53

Hello,

Im currently in Umbraco v 4.5.2 running on IIS 6.1.

When publishing the following html data with an embedded silverlight object from live writer to umbraco:

<p>Watch this video:</p>

<p><object data="data:application/x-silverlight-2," type="application/xsilverlight-2" width="511" height="288">

<param name="source" value="http://channel9.msdn.com/scripts/VideoPlayer.xap?v=3.2" />

<param name="initParams" value="deferredLoad=true,duration=0,m=http://ecn.channel9.msdn.com/o9/ch9/ca52/6073825f-da0b-4e69-be49-9e4e013bca52/PiratesLoveDaisiesHTML54_ch9.wmv,autostart=false,autohide=true,showembed=true, thumbnail=http://ecn.channel9.msdn.com/o9/ch9/ca52/6073825f-da0b-4e69-be49-9e4e013bca52/PiratesLoveDaisiesHTML54_512_ch9.jpg, postid=0" />

<param name="background" value="#00FFFFFF" />

<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">

<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none" />

</a>

</object></p>

<p>End</p>

The above code works when it is initially published using Livewriter. However when this is edited in the Umbraco backoffice using the the Tinymce Editor. The code in the following way:

In umbraco html editor:

<object width="511" height="288" data="data:application/x-silverlight-2," type="application/x-shockwave-flash">

When this is published silverlight no longer works and the image/video is not displayed. Is there anyway I can prevent the editor from modifying the code?

cheers

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Dec 20, 2010 @ 14:25

Hi KienTitel

This is probably because you're using som HTML code, which is not allowed by tidymce and therefore is stripped during publish.

Try to have a look at the tinymceeditor.config file in the config folder to see what HTML is allowed.

Another way around this could also be to disable tidy in the umbracoSettings.config allthough I won't recommend it.

/Jan

Copy Link

Chris Houston 535 posts 980 karma points MVP admin c-trib

Dec 20, 2010 @ 14:33

Hi Jan,

I've been looking into this too, it's a strange one. As what is happening when you edit and save using TinyMCE is that it is removing the Silverlight type definition from the OBJECT and replacing it with Flash?!

type="application/xsilverlight-2"

Becomes:

type="application/x-shockwave-flash"

So it's not just stripping HTML it's actually replacing an attribute with something else!?

Chris

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Dec 20, 2010 @ 15:03

Hi Chris

Yes that is indeed very weird. I must admit I don't have any clue about why this is happening.

Maybe it's better to avoid using the code in the RTE then (if possible of course) and make an upload field for the silverlight file and then fetch the file with an XSLT macro instead?

/Jan

Copy Link

Chris Houston 535 posts 980 karma points MVP admin c-trib

Dec 20, 2010 @ 15:07

Hi Jan,

It would be nice, but it's not going to be possible as there will be multiple content editors who will solely be using Live Writer to create articles on this site, so they need to be able to embed all sorts of things, this is the tip of the iceburg!

But... they also need their main site admin guy to be able to dip in and administer a page using the Umbraco backend without breaking things.

Cheers for looking, we are currently trying to crawl through the source to work things out..

Best regards,

Chris

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Dec 20, 2010 @ 15:12

Hi Chris

Ah off course, I missed that from the initial post.

I'll try to see if I can think of a solution as well. But will probably not have time before later in the evening.

Looking forward to see the solution of this odd fella' :-)

/Jan

Copy Link

Chris Houston 535 posts 980 karma points MVP admin c-trib

Dec 20, 2010 @ 16:48

Hi Jan,

We have looked into it and the issue seems to be in the:

root/umbraco_client/tinymce3/plugins/media/editor_plugin_src.js

In this file there is a function called: _spansToImgs

_spansToImgs : function(p) {
 var t = this, dom = t.editor.dom, im, ci;
     each(dom.select('span', p), function(n) {
     // Convert object into image
      if (dom.getAttrib(n, 'class') == 'mceItemObject') {
           ci = dom.getAttrib(n, "classid").toLowerCase().replace(/\s+/g, '');
           switch (ci) {
             case 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000':
                    dom.replace(t._createImg('mceItemFlash', n), n);
                  break;

              case 'clsid:166b1bca-3f9c-11cf-8075-444553540000':
                    dom.replace(t._createImg('mceItemShockWave', n), n);
                  break;

              case 'clsid:6bf52a52-394a-11d3-b153-00c04f79faa6':
                case 'clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95':
                case 'clsid:05589fa1-c356-11ce-bf01-00aa0055595a':
                    dom.replace(t._createImg('mceItemWindowsMedia', n), n);
                   break;

              case 'clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b':
                    dom.replace(t._createImg('mceItemQuickTime', n), n);
                  break;

              case 'clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa':
                    dom.replace(t._createImg('mceItemRealMedia', n), n);
                  break;

              default:
                  dom.replace(t._createImg('mceItemFlash', n), n);
          }
                 
          return;
       }

As you can see, if it does not file the right clsid it defaults to creating the editor image with a class called "mceItemFlash" and then when you do a publish it tries to convert this back and of course, it then adds the object as type "application/x-shockwave-flash"

We have checked the latest version of TinyMCE and it looks like it's the same there, so the only way to fix this is probably to add to this switch statement and to the 3 or 4 other places it then uses this class definition.

Chris

Copy Link

is working on a reply...

Flag this post as spam?

TinyMCE Editor modifies HTML Code