Logo HeaderGraphic
"... A Yankee in the Land of The Long White Cloud, Aotearoa ..."

Letting SharePoint Blog Posts Contain Restricted Tag Items Part II 

OK, I still have some work to do on this one, but I think I’m ready to post up version 1.0 for you.  Here is my new Plug-in for Windows Live Writer that allows you to effectively post up restricted tags to a SharePoint Blog.  It will encode the tag, then using a JavaScript that you must push up to your SharePoint server and link to in your master page, when pulled down to the client will convert them from encoded format to the correct value.

First up, I need to give credit where credit is due.  In order to more efficiently process the tags you attempt to insert into your blog post in WLW, I came across the HtmlAgilityPack20 and incorporated it into my project, I am including it here (upgraded to Visual Studio 8, .Net Framework 3.5, but that portion at least is someone else’s work).  This is something that Microsoft should REALLY put into the native .Net Framework System.Web namespace.  We have the XML parsing capabilities, we really should have something simular for looking at / processing Html.  This public project is just what the doctor ordered, I’ve shown my support, do this author a favour and show yours as well.  That’s HtmlAgilityPack20.

So here is how it works, after you have installed the LongCloud.LiveWriter.PlugIn.SharePoint.Restricted.dll to the WLW plug-ins, this is how you use it. 

In the Insert pane for WLW you will see a SharePoint <restrict… link.  This is your entry point.

image

Click on it, and it will open the insert window.

image

Now you need to navigate to some place that will give you your tag you want to use to embed your file.  I’ll use as an example the steps I went thru to add the download link for the source of this project (which is on my SkyDrive).

So start by surfing to the spot (skydrive.live.com in this case)

image

Now I surf down to where the zip file containing the source is located.

image

and click on the file

image

This give you information about the file, but most important in the bottom right corner there is an embed tag for you.  So you just select the embed tag and copy it onto you clipboardimage

Now switch to WLW and click on the SharePoint <restrict…> image 

image

Paste in the embed code from your clipboard and click Validate.

image

The bottom section shows you what will be pushed up to your sharepoint blog server.  as you can see it is Div that SharePoint will have no problem with posting up.  This is what shows up in your WLW editor window

image

Now if you view the source pane you will see that what is in the file is

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:6D53D840-FD84-4c07-BF5E-85943EB1F517:508905a2-b307-4881-8cd5-73ff0f6a28d5" class="wlWriterEditableSmartContent">
	<div id="LongCloudSharePointRestrictedTagEncodingInfomation">
		<span style="font-size:0.7em;"> SharePoint Restricted Tag Encoding </span> <br />
		<div id="encodedTag">
			<div class="iframe_spEncoder" id="81694b39-51e2-4da0-accf-5cac406e923c" title="scrolling::no ;;marginheight::0 ;;marginwidth::0 ;;frameborder::0 ;;style::width:240px;height:66px;margin:3px;padding:0;border:1px solid #dde5e9;background-color:#ffffff; ;;src::http://cid-68a452fbc939d13d.skydrive.live.com/embedrowdetail.aspx/LongCloudBlogProjects/LiveWriterPlugins/SharePointEmbed%20Mark%20II/SharePointEmbed%20Mark%20II.zip ;;"></div>
		</div>
		<div id"originalTag">
			<iframe scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="width:240px;height:66px;margin:3px;padding:0;border:1px solid #dde5e9;background-color:#ffffff;" src="http://cid-68a452fbc939d13d.skydrive.live.com/embedrowdetail.aspx/LongCloudBlogProjects/LiveWriterPlugins/SharePointEmbed%20Mark%20II/SharePointEmbed%20Mark%20II.zip"></iframe>
		</div>				
	</div>
</div>

but if you view it in the web page it looks like this (and by the way, that next graphic is the actual link to the source files).

 

 

Digg This
 
Posted on 26-Mar-09 by Matthew C. Hintzen
Bookmark this post with:        
Tags: