SharePoint 2010: Display content editor web part in mobile view

1. Create the mobile adapter version of Content Editor web part

Create a SharePoint Project. Add a new class and name it “ContentEditorMobileAdapter.cs”. Note that we added the name of our web part in front and added the text “MobileAdapter” at the end. Class should inherit the “WebPartMobileAdapter” class. The adapter does not use the “OnLoad” event. Instead it uses the “CreateControlsForSummaryView” to render. Override this class and add the following code:

public class ContentEditorMobileAdapter : WebPartMobileAdapter

{

protected override void CreateControlsForSummaryView()

{

try

{

Image iconImage = this.CreateWebPartIcon(WebPartIconLink.NoLink);

iconImage.BreakAfter = false;

this.Controls.Add(iconImage);

 

Label titleLabel = this.CreateWebPartLabel();

this.Controls.Add(titleLabel);

 

LiteralControl content = new LiteralControl();

string text = (((Microsoft.SharePoint.WebPartPages.ContentEditorWebPart)(this.Control)).Content).InnerText;

 

//int start = content.Text.IndexOf(“<style>”);

if (text.StartsWith(“<style”))

{

int end = text.IndexOf(“</style>”);

content.Text = text.Remove(0, end).Replace(“</style>”, “”).Replace(“class=\”ms-rteThemeForeColor-1-0\””, “”);

}

else

content.Text = text;

 

content.Text = MakeMobileUrl(content.Text);

 

this.Controls.Add(content);

}

catch (Exception ex)

{

LiteralControl errMessage = new LiteralControl();

errMessage.Text = “Error in Content Editor Mobile Adapter:” + ex.Message;

this.Controls.Add(errMessage);

}

}

 

/// <summary>

/// This method convert all the links in content editor to mobile links,

/// so that the site will stay in mobile view. It handles the links that starts with”/”.

/// </summary>

/// <param name=”html”></param>

/// <returns></returns>

private string MakeMobileUrl(string html)

{

Regex hrefRegex = new Regex(“href=\”(?<Link>.*?)\””,

RegexOptions.IgnoreCase

| RegexOptions.CultureInvariant

| RegexOptions.IgnorePatternWhitespace

| RegexOptions.Compiled

| RegexOptions.IgnoreCase);

 

Match m;

m = hrefRegex.Match(html);

 

while (m != null && m.Success)

{

// Replace this URL with fully qualified version, then search again. Can’t use all matches

// found at once because we are going to be altering the string as we work our way

// through it and won’t know the proper position to insert the fixed text.

// Note: Match will contain multiple matches that include the entire <A> tag and the

// more specific “/link” part of the href. Find the specific part and modify that HREF

CaptureCollection cc; //  = m.Groups[0].Captures; // first (only?) capture for this match

for (int i = 0; m.Groups[i].Value != “”; i++)

{

cc = m.Groups[i].Captures;

for (int j = 0; j < cc.Count; j++)

{

int posn = cc[j].Index;

int len = cc[j].Length;

 

string matchString = html.Substring(posn, len);

if (matchString.StartsWith(“/”))

{

string mobilePostfix;

if (matchString.Contains(“&”) || matchString.Contains(“?”)) mobilePostfix = “&Mobile=1”; else mobilePostfix = “?Mobile=1”;

string s = html.Insert(posn + len, mobilePostfix);

html = s;

}

}

}

 

// Restart the capture at the (possibly updated) latest match position + 1

m = hrefRegex.Match(html, m.Groups[0].Captures[0].Index + 1);

}

return html;

}

}

2. Add the adapter to the safe controls

Open the web.config file of SharePoint IIS site (example: C:\inetpub\wwwroot\wss\VirtualDirectories\80) and add the line below into the safe controls section. Replace the Assembly name, Namespace name and PublicKeyToken with your own value and key!

<SafeControl Assembly=”XXX, Version=1.0.0.0, Culture=neutral, PublicKeyToken=d33553c133c4f434″ Namespace=”XXX” TypeName=”*” Safe=”True” SafeAgainstScript=”False” />

3. Configure the compat.browser file to use content editor mobile web part

Inside SharePoint IIS directory you will see a directory “App_Browsers” and inside that directory is a file called “compat.browser”. Load this file in the editor.

At the top of this file you will find a “<controlAdapters>” section. Add the line below to this section:

<adapter controlType=”Microsoft.SharePoint.WebPartPages.ContentEditorWebPart” adapterType=” XXX.SharePoint.WebPartPages.MobileAdapters.ContentEditorMobileAdapter, XXX, Version=1.0.0.0, Culture=neutral, PublicKeyToken=d33553c133c4f434″ />

Replace Assembly name, Namespace name and PublicKeyToken with your own value and key! Save the configuration and exit the file.

4. Build the project, Add web part to the page 

We finished the required steps to provide SharePoint with a content editor web part that is optimized for the mobile page.

• Build the project and deploy.
• Add the content editor web part in page.
• Switch to mobile view and you should see the content ediotr web part there.
• Click the hyperlinks with in content editor web part and it should keep the site in mobile view.