Adding a Content editor Web Part Programmatically in SharePoint

The content editor web part has become a favorite of clients and developers lately. More and more SharePoint development requirements are focused on using only out of the box SharePoint features. If customization is allowed it is allowed on the client side only. One big advantage of the content editor web part is its ease of editing directly within the UI by developers as well as users. Hence the reason the content editor web part is used widely.

In this article, we will talk about adding a content editor web part using visual studio and how to add default content to it programmatically.

A typical scenario where we might need this:

  • The project is customized for different complexity and there is a visual studio solution required;
  • Pages, web parts, and their contents are deployed through the custom .wsp solution;
  • But, in this case, the client wants the flexibility to change the content of some web parts, if needed, in UI.

For this case a content editor web part added programmatically suits the requirement very well.

We will perform the below mentioned steps to get this done:

  • Use a SharePoint template in visual studio
  • Add a web part page to the site pages gallery through a module in the solution
  • Add a web part zone to the page
    • A typical web part zone is defined as below:

  • Get the elements.xml of the web part page
  • Modify it to add the content editor web part properties. The safe way to add the properties correctly is to create a content editor web part on a page using UI and then export it. Then open it in a text editor.
  • Now we have the properties of the content editor web part in the text editor

Now we will modify the elements.xml. To do this we will:

  • First add an allUsersWebPart
  • Add a GUID to it. You can create a GUID from visual studio (tools -> create GUID). Make sure you add a g_ to the start of the GUID.
  • Find the <![CDATA[ section
  • Put all the code copied from the text editor until <Content xmlns=”http://schemas.microsoft.com/WebPart/v2/ContentEditor”> 
  • Now we have to add the default content within the content area. Make sure to add the default html in encoded format. You can use any online HTML encoder to encode your HTML. If you add the content in normal HTML format, SharePoint by default will remove all the HTML mark-up and will put the whole content under a single DIV element. So make sure you add the content in HTML encoded format.

The final elements.xml will look like this (note: CEWP.aspx is the name of the page which will hold this webpart):

The below project was created to do the same task and is available for download from this location:
https://github.com/debopamb/SPGithub/tree/master/CEWebpartProj

Feel free to download it and modify it accordingly to use on your SharePoint site.

June 16, 2014