This script adds “one click edit of an CEWP”. It supports both “Rich text editor…” and “Source code editor…”.

NOTE: You must add the site to “Local Intranet” in IE, if not the one click edit might not work.

The function checks that the logged in user has “Edit Page rights” before adding these links. The check is simply done by checking if the “Edit Page” link is present in the page.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

The file “sessvars.js” is found here.

The code for the file “OneClickEditCEWP.js” is provided below.

Add a CEWP below the WebPart’s you want to add this feature to, and add this code to it:

<script type="text/javascript" src="/test/English/EMSKJS/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="/test/English/EMSKJS/sessvars.js"></script>
<script type="text/javascript" src="/test/English/EMSKJS/OneClickEditCEWP.js"></script>
<script type="text/javascript">
   var EditText = 'Edit rich text|Edit code'; // The text of the edit link
   var EditTextMouseOver = 'Click to edit'; // Mouseover on edit-link
</script>

This is the code for the file “OneClickEditCEWP.js”:

/* One click edit of CEWP - Rich text or code edit
 *  Author Alexander Bautz
 *  alexander.bautz@gmail.com
 *  https://spjsblog.com
 *  v1.0
 *  LastMod: 22.12.2009
 *
 * Requirements:
 * jQuery library http://jquery.com
 * sessvars.js from http://www.thomasfrank.se/sessionvars.html
 *
 * Define these variables in CEWP at the bottom of the page:
 * var EditText = 'Edit rich text|Edit code'; // The text of the edit link
 * var EditTextMouseOver = 'Click to edit'; // Mouseover on edit-link
 * 
 Example of CEWP in WebPartPage:
 	<script type="text/javascript" src="../EMSKJS/jquery-1.3.1.min.js"></script>
 	<script type="text/javascript" src="../EMSKJS/sessvars.js"></script>
	<script type="text/javascript" src="../EMSKJS/OneClickEditCEWP.js"></script>
	<script type="text/javascript">
		var EditText = 'Edit rich text|Edit code'; // The text of the edit link
		var EditTextMouseOver = 'Click to edit'; // Mouseover on edit-link
	</script>
 * --------------------------------------------------------
 * To exclude a webpart, add an empty DIV with class "customSkipThisCEWP" to the webpart body
 * <div class="customSkipThisCEWP"></div>
 * --------------------------------------------------------
 */ 

$(document).ready(function(){
var split = EditText.split('|');
var editRichText = split[0];
var editCode = split[1];
if($("*[id$='MenuItem_EditPage']").length>0){
		$("td[id ^= 'MSOZoneCell_WebPartWPQ']").each(function(){
		if($(this).find(".customSkipThisCEWP").length==0){
			var uniqueID = $(this).find(".ms-WPBody").attr('webpartid');
			var wpIdRaw = $(this).attr('id');
			var wpId = wpIdRaw.substring(wpIdRaw.indexOf('_')+4);			
				if(uniqueID != undefined){			
					var editLink = "";			
						editLink += "<a title='" + EditTextMouseOver + "' href='#' ";
						editLink += "onclick='javascript:sessvars.wpId="" + wpId + "";MSOTlPn_ShowToolPane2Wrapper("Edit","129","" + uniqueID + "");sessvars.EditCode=false'>";
						editLink += editRichText + "</a> | <a title='" + EditTextMouseOver + "' href='#' ";
						editLink += "onclick='javascript:sessvars.wpId="" + wpId + "";MSOTlPn_ShowToolPane2Wrapper("Edit","129","" + uniqueID + "");sessvars.EditCode=true'>";
						editLink += editCode + "</a>";
						editLink = "<div style='display:none;font-size:xx-small;color:gray;' id='customEditLink_" + wpId + "'>" + editLink + "</div>";
					$(this).prepend(editLink);
					$(this).hover(function(){	
						var offset = $(this).offset();
						$("#customEditLink_" + wpId).css({'position':'absolute','left':offset.left,'top':(offset.top-12)}).show().stop().fadeTo('fast',1);
					},function(){
						$("#customEditLink_" + wpId).stop().fadeTo('slow',0);
					});
				}
			}
		});	
		// Open the editor only if it has been triggered by the custom link
		if($("#MsoContentToolpartBasicContentProperty").length>0 && sessvars.wpId!=undefined){
			if(sessvars.EditCode){
				$("#MsoContentToolpartBasicSourceViewLiteral").click();
			}else{
				$("#MsoContentToolpartBasicDesignViewLiteral").click();				
			}
			sessvars.$.clearMem();
			window.location.href(window.location.href);
		}			
	}
});

Save the file as “OneClickEditCEWP.js”, and upload to the scriptlibrary as shown above.

Note:

• The reason for using the “sessvars.js”, it so prevent “hijacking” of the page if manually edited trough “Edit page-link”
• If the page only refreshes without showing the “edit window”, you may have a pop up-blocker activated. Manually edit the page, and allow any pop up’s
• To exclude a CEWP from being equipped with an “Edit-link”, add a “dummy” DIV-tag with class “customSkipThisCEWP” to the CEWP code.

Ask if something is unclear

Regards
Alexander