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):

 
      
        

  Content Editor
  Default
  Allows authors to enter rich text content.
  true
  wpz
  0
  Normal
  
  
  true
  true
  true
  true
  true
  true
  true
  
  
  Modeless
  Default
  
  Cannot import this Web Part.
  /_layouts/images/mscontl.gif
  
  Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c
  Microsoft.SharePoint.WebPartPages.ContentEditorWebPart
  
  
  
     <div>test content for the CEWP </div>       
             
  
        
        
        
        ]]>
      
    

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
New CPE Accredited Courses Now Available for Dynamics AX, GP, and NAVEARN CREDITS TODAY