Category: CEWP customisation

Customize SharePoint Content Editor Web Part in VS 2012 classic webpart

1. Paste below code in cs file of classic web part(Not visual web Part)

using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Utilities;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;
namespace POC2012CEWP.MyClassicCEWP
{
    [ToolboxItemAttribute(false)]
    public class MyClassicCEWP : Microsoft.SharePoint.WebPartPages.WebPart
    {
        private string _content;
        private HtmlGenericControl editableRegion = new HtmlGenericControl();
        private HtmlGenericControl emptyPanel = new HtmlGenericControl();
        private bool IsInEditMode
        {
            get
            {
                SPWebPartManager currentWebPartManager = (SPWebPartManager)WebPartManager.GetCurrentWebPartManager(this.Page);
                return (((currentWebPartManager != null) && !base.IsStandalone) && currentWebPartManager.GetDisplayMode().AllowPageDesign);
            }
        }
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            if (this.IsInEditMode)
            {
                SPRibbon current = SPRibbon.GetCurrent(this.Page);
                if (current != null)
                {
                    current.MakeTabAvailable(“Ribbon.EditingTools.CPEditTab”);
                    current.MakeTabAvailable(“Ribbon.Image.Image”);
                    current.MakeTabAvailable(“Ribbon.EditingTools.CPInsert”);
                    current.MakeTabAvailable(“Ribbon.Link.Link”);
                    current.MakeTabAvailable(“Ribbon.Table.Layout”);
                    current.MakeTabAvailable(“Ribbon.Table.Design”);
                    if (!(this.Page is WikiEditPage))
                    {
                        current.TrimById(“Ribbon.EditingTools.CPEditTab.Layout”);
                        current.TrimById(“Ribbon.EditingTools.CPEditTab.EditAndCheckout”);
                    }
                }
            }
        }

        protected override void CreateChildControls()
        {
           // base.OnLoad();
            // Prevent default display of webpart chrome in standard view mode
            this.ChromeType = PartChromeType.None;
            this.Page.Header.Controls.Add(new LiteralControl(“”));
            System.Web.UI.HtmlControls.HtmlGenericControl divEventCalendar = new System.Web.UI.HtmlControls.HtmlGenericControl(“DIV”);
            divEventCalendar.ID = “divEventCalendar”;
            System.Web.UI.HtmlControls.HtmlGenericControl divEventCalendarWebpart = new System.Web.UI.HtmlControls.HtmlGenericControl(“DIV”);
            divEventCalendarWebpart.ID = “divEventCalendarWebpart”;
            divEventCalendarWebpart.Attributes.Add(“class”, “divEventCalendarWebpart”);
            divEventCalendar.Controls.Add(divEventCalendarWebpart);
            System.Web.UI.HtmlControls.HtmlGenericControl divEventCalendarWebpartTitle = new System.Web.UI.HtmlControls.HtmlGenericControl(“DIV”);
            divEventCalendarWebpartTitle.ID = “divEventCalendarWebpartTitle”;
            divEventCalendarWebpartTitle.Attributes.Add(“class”, “divEventCalendarWebpartTitle shadow”);
            Label labelTitle = new Label();
            labelTitle.Text = “CEWP 2012”;
            divEventCalendarWebpartTitle.Attributes.Add(“style”, “background:#840f08”);
            divEventCalendarWebpartTitle.Controls.Add(labelTitle);
            divEventCalendarWebpart.Controls.Add(divEventCalendarWebpartTitle);
            System.Web.UI.HtmlControls.HtmlGenericControl DCContentBlock = new System.Web.UI.HtmlControls.HtmlGenericControl(“DIV”);
            DCContentBlock.ID = “DCContentBlock”;
            DCContentBlock.Attributes.Add(“class”, “DCContentBlock”);
            divEventCalendarWebpart.Controls.Add(DCContentBlock);
            System.Web.UI.HtmlControls.HtmlGenericControl DCContent = new System.Web.UI.HtmlControls.HtmlGenericControl(“DIV”);
            DCContent.ID = “DCContent”;
            DCContent.Attributes.Add(“class”, “DCContent”);
            DCContentBlock.Controls.Add(DCContent);
            Panel plhContentEdit = new Panel();
            plhContentEdit.ID = “plhContentEdit”;
            Panel plhContentDisplay = new Panel();
            plhContentEdit.ID = “plhContentDisplay”;
            Panel plhNoContent = new Panel();
            plhContentEdit.ID = “plhNoContent”;
            DCContentBlock.Controls.Add(plhContentEdit);
            DCContentBlock.Controls.Add(plhContentDisplay);
            DCContentBlock.Controls.Add(plhNoContent);
            this.Controls.Add(divEventCalendar);

            plhContentDisplay.Controls.Add(new LiteralControl(this.Content));
            plhContentEdit.Controls.Add(this.editableRegion);
            plhNoContent.Controls.Add(this.emptyPanel);
            string strUpdatedContent = this.Page.Request.Form[this.ClientID + “content”];
            if ((strUpdatedContent != null) && (this.Content != strUpdatedContent))
            {
                this.Content = strUpdatedContent;
                try
                {
                    SPWebPartManager currentWebPartManager = (SPWebPartManager)WebPartManager.GetCurrentWebPartManager(this.Page);
                    Guid storageKey = currentWebPartManager.GetStorageKey(this);
                    currentWebPartManager.SaveChanges(storageKey);
                }
                catch (Exception exception)
                {
                    Label child = new Label();
                    child.Text = exception.Message;
                    this.Controls.Add(child);
                }
            }
            if (this.IsInEditMode)
            {
                this.Page.ClientScript.RegisterHiddenField(this.ClientID + “content”, this.Content);
                plhContentDisplay.Visible = false;
                this.emptyPanel.TagName = “DIV”;
                this.emptyPanel.Style.Add(HtmlTextWriterStyle.Cursor, “hand”);
                this.emptyPanel.Controls.Add(new LiteralControl(“Click here to Edit”));
                this.emptyPanel.Style.Add(HtmlTextWriterStyle.TextAlign, “center”);
                base.Attributes[“RteRedirect”] = this.editableRegion.ClientID;
                ScriptLink.RegisterScriptAfterUI(this.Page, “SP.UI.Rte.js”, false);
                ScriptLink.RegisterScriptAfterUI(this.Page, “SP.js”, false);
                ScriptLink.RegisterScriptAfterUI(this.Page, “SP.Runtime.js”, false);
                this.editableRegion.TagName = “DIV”;
                this.editableRegion.InnerHtml = this.Content;
                this.editableRegion.Attributes[“class”] = “ms-rtestate-write ms-rtestate-field”;
                this.editableRegion.Attributes[“contentEditable”] = “true”;
                this.editableRegion.Attributes[“InputFieldId”] = this.ClientID + “content”;
                this.editableRegion.Attributes[“EmptyPanelId”] = this.emptyPanel.ClientID;
                this.editableRegion.Attributes[“ContentEditor”] = “True”;
                this.editableRegion.Attributes[“AllowScripts”] = “True”;
                this.editableRegion.Attributes[“AllowWebParts”] = “False”;
                string script = “RTE.RichTextEditor.transferContentsToInputField(‘” + SPHttpUtility.EcmaScriptStringLiteralEncode(this.editableRegion.ClientID) + “‘);”;
                this.Page.ClientScript.RegisterOnSubmitStatement(base.GetType(), “transfer” + this.editableRegion.ClientID, script);
            }
        }
        // Properties
        [WebPartStorage(Storage.Shared)]
        public string Content
        {
            get
            {
                return this._content;
            }
            set
            {
                _content = value;
            }
        }
      
    }
}

2. use Below CSS to add custom styles

  /* Common styles*/
 .divEventCalendarWebpart{font-family:Arial;width: 342px;position: relative;border: 1px solid #e6e7e7 !important;float:left;padding:50px 20px 5px 20px;}
.divEventCalendarWebpartTitle{font-family: Georgia;font-size: 16px;font-weight: bold;padding: 12px 20px;color: #FFFFFF;position: absolute;top: -15px;left: -15px;box-shadow:5px 5px 5px #CCCCCC;width:155px !important;}
 .shadow {-moz-box-shadow: 5px 5px 5px #999999;-webkit-box-shadow: 5px 5px 5px #999999;box-shadow: 5px 5px 5px #999999;-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color=’#999999′)”;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color=’#999999′);}

 DIV.ms-rteElement-mkg-Header{-ms-name: “My Header”;font-family: Georgia;font-size: 14px;font-weight: bold;padding:0 0 0 0;color: #840f08 !important;}
DIV.ms-rteElement-mkg-Separator{-ms-name:”My Separator”;border-bottom:1px solid #e6e7e7;height:1px;padding:10px 0;}
DIV.ms-rteElement-mkg-LeftParagraph{-ms-name: “My LeftParagraph”;width:250px;float:left;font-size: 11px;color: #666666;font-family:Arial;}
DIV.ms-rteElement-mkg-RightImage{-ms-name: “My RightImage”;width:100px;float:right;}