IMPORTANT UPDATE: while the blog post below is true, I have implemented a better way to achieve what I wanted (see this posting). I suggest you just skip this post and go on to the best one to achieve this effect.

this post is the first part in two part series where I try to create an add-in / method to use the Windows Live Writer in combination with javascript stored on the SharePoint server to override the <embed > tag restriction on entries to SharePoint Blogs

the html div definition you see below is actually embed in the source  just below it’s readable version. This post details the first part of this project where I figure out how to convert it from the encoded div format to an <embed> tag.

   1:  <div id="embedContentHere"

   2:          class="sharePointEmbedEncoded" 

   3:          title="height::380;; type::application/x-shockwave-flash;; width=600;; src::http://www.istartedsomething.com/wp-content/plugins/flv-embed/flvplayer.swf;; quality::high;; wmode::transparent;; allowscriptaccess::always;; allowfullscreen::true;; 

   4:                 flashvars::height=380&amp;width=600&amp;file=/uploads/msofficelabs2019.flv&amp;image=/uploads/msofficelabs2019.jpg&amp;link=/uploads/msofficelabs2019.flv&amp;showstop=true"></div>

For VERY good reasons, out of the box the SharePoint services 3 installation has strict restrictions on what raw html it will allow to be pushed up to a text display.  Since the idea behind a SharePoint server is to allow end-users to post up information to a web, you need to put into place some very draconian measures to make sure they don’t inadvertently hijack your server and make it an “evil” presence on the web.  They might unknowingly copy some bad source they found on the web (say a posting that hides it is underlying badness) to a blog entry on your SharePoint server, and now you have inadvertently joined the ranks of the Black Hats.

There is the Rich Text Box in SharePoint used in blog entries

This box let’s you format an entry, you can even view the underlying html source if you want…

and you directly edit the html, BUT, when you submit it for saving, SharePoint looks thru the entry and strips out ANYTHING it doesn’t like or thinks is unsafe, such as embed and JavaScript tags.    As I blogged earlier I’m using the new Windows Live Writer to blog, not least because it has support for posting to a SharePoint Blog site built in, but unfortunately, that doesn’t allow me to get around the tags restriction, SharePoint does the same scrubbing for submissions from external writing tools.  So although the Windows Live Writer has all these neat new built in tools for adding common modern blog content, SharePoint strips them all out.

I could live without the JavaScript, but a modern day blog needs to at least support the embed tag, people don’t want to follow links to view a video you have seen that is interesting or that you posted up, they want that video right there on your blog.  Same for all sorts of other embedded items.  So after investigating and finding out there was no way to change the tags that SharePoint will allow I decided to try to code up a work around.

The idea came to me from a posting I found on Shantha Kumar .T’s blog for a work around to supporting Flash movies on sharepoint using the swfobject.js library.  While I could make this method  work (for a particular type of flash movie posting) I couldn’t figure out how to make it work for all types of <embed > flash movies.  But in looking over Kumar’s solution I realised that I should be able to adapt his approach to support any <embed > tag .

Here is how his algorithm works specifically for flash.

1. You post up / make the swfobject.js file available from your server
2. you modify your hosting page source to include his JavaScript (SharePoint does not restrict page source, just text entry)
3. then you “encode” your flash information into the ID of a <div> tag (which SharePoint allows in your page)
4. During rendering on the client’s browser, the JavaScript you have included on the base page source finds divs of a certain class.
5. The information you have encoded into the div’s id is parsed out and used to call the swfobject.js file that inserts the correct flash entry (for xhtml 1.1).

Now it occurs to me, that using the same principles here I can achieve an even more universal solution.  Using the same approach I’ll use a div that has the embed tag information encoded in it’s title attribute, then use JavaScript that has been saved to the blog post page source to find all <div> items with a class of “sharePointEmbedEncoded” and convert the <div> to an embed tag using the information encoded in the title.

So as you can see from above, I have achieved my purpose, but how did I do it.  I took an embed video tag from Nikhil Kothari's Weblog : Inspiration for Next Generation UX and I manually converted it into the encoded div format you see above.  Then I wrote spembedding.js and put that on my SharePoint server, then finally I opened the theme.master for blog, and at the end of the page I added the following entry just before the closing body tag

<script type="text/javascript" src="http://www.longcloud.co.nz/_catalogs/masterpage/spembedding.js"></script>

Ok that gets me half way there, what’s next?  Well I don’t want to have to manually modify my source each time to take it from the embed tag in windows live writer and convert it into the new div encoded format, so tune in (hopefully tomorrow or the next day) for the second half of the exercise where I write the Windows Live Writer plug in that take care of that step for me as part of the publishing process.