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("<link href='/_layouts/POC2012CEWP/css/CEWPStyle.css' rel='stylesheet' type='text/css' />"));
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;}
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("<link href='/_layouts/POC2012CEWP/css/CEWPStyle.css' rel='stylesheet' type='text/css' />"));
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;}
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.publishing.webcontrols.richhtmlfield_properties.aspx
ReplyDeleteNo words to thank you! Saved me a ton of work and research in the most useful sample about custom cewp! Thanks a lot! ;)
ReplyDelete