Adding Script into a Content Editor Web Part (CEWP) in SharePoint 2007
This post was cross-posted on NothingButSharePoint.com on 26 April, 2011.
This one may seem so obvious as to not merit a post or two, but I get questions on it often enough and I realized that if I had posts to refer to, it’d be helpful. I don’t see the CEWP as evil like many people do, though using it can certainly can cause you problems if you use it unwisely. (I generally agree with Andrew about using it on Publishing pages, where script in the CEWP can wreak true havoc.) Assuming you know what you are doing, here are the steps to add script into a CEWP in SharePoint 2007. (My next post will show the analogous method for SharePoint 2010.)
You can simply put your script and any references it is dependent on into the CEWP using the “Source Editor”. There are many references on how to do this out on the Web, but it’s pretty simple. You add the CEWP to the page, open the Tool Pane, and click on the “Source Editor…” button. (Note that it’s NOT the “Rich Text Editor…” button that you want to use.)
This opens a window in which you can paste your script. Calling this “box” an editor is laughable, but there are many occurrences of these white “editor” boxes throughought SharePoint’s UI. Be sure that you are only loading references to other scripts once in the page. For instance, you may already be referencing jQuery in your master page. Here I show references to the latest versions of jQuery and my SPServices library stored in a Document Library.
The other option (which is often preferable) is to use the Content Link to point to a file stored somewhere in the Site Collection. You simply paste in a URL reference to a file you have either in _layouts, or a Document Library, or really anywhere that allows you to reference the file with a URL, and that file will be pulled into the CEWP. The reason this is often preferable is that you can then manage and maintain your code centrally. Yes, you can even apply good SDLC practices to your script by doing this.
A nice thing is that the Content Link option works even better in SharePoint 2010. Whenever you enter custom HTML or JavaScript in the source field of a text field in SharePoint 2010, that content is being restructured according to SharePoint’s standards, thereby creating code that no longer works. By using the Content Link option this is not the case. SharePoint 2010 executes the code as you entered it.
To add custom HTML tags such as meta description, keywords, and titles, you will want to edit the page in SharePoint Designer. We first need to start be verifying the existing page and template are in good form and readable by SharePoint. Skipping this step can lead to erroneous error.
1) Open SharePoint Designer
2) Edit in Advanced Mode
3) Goto Design View — This will test the pages and all problems denoted need corrected.
4) Go to code view and add the custom Title in “asp:Content “ named “PlaceHolderPageTitle”. This should be the Content, omit the title tags.
5) META Description goes in the “asp:Content” named “PlaceHolderAdditionalPageHead”. This will be the actual HTML code.
When I followed the directions provided by others, I had a small problem in the ASP which provided an accurate error by following steps 1-3.