Supporters of End User
Web

Adding Script into a Content Editor Web Part (CEWP) in SharePoint 2010

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Content Editor Web Part; Javascript and jQuery; Site Manager/Power User; MOSS; WSS; 2007; 2010

 

In my earlier post, I showed how to add script into a page using the CEWP in SharePoint 2007. In this post, I’ll do the same for SharePoint 2010, though in SharePoint 2010 there are other options as well.

It’s worth repeating the intro to the 2007 post:

 
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.
 

The basic idea is the same in SharePoint 2010, however because things have moved into the ribbon the steps are a little different. Christophe Humbert and I have both done posts about this in the past. His was About Scripts, Web Parts and Urban Myths and mine was Script in Content Editor Web Parts (CEWPs) in SharePoint 2010. I’m going to run through the steps here anyway, but you should also take a look at those posts for more info.

Once you’ve added a CEWP to your page, if you open the Tool Pane you’ll see that the “Rich Text Editor…” and the “Source Editor…” buttons are no longer available there.

2011-05-09-AddingScripttoCEWPSP2010-01.png

Instead, we need to turn to the ribbon. First, make sure your cursor is inside the text area for the CEWP.

2011-05-09-AddingScripttoCEWPSP2010-02.png

Next, look up at the ribbon. The important thing to notice is the HTML dropdown at the right of the Editing Tools tab, Format Text sub-tab.

2011-05-09-AddingScripttoCEWPSP2010-03.png

When you drop that down, you’ll see two options. The one we need is “Edit HTML source”.

2011-05-09-AddingScripttoCEWPSP2010-04.png

Yup, there’s our favorite white “editor” box again. One would have thought that Microsoft might have improved this UI in 2010, but clearly it wasn’t on the priority list. I’m adding the simplest JavaScript here: just an alert.

2011-05-09-AddingScripttoCEWPSP2010-05.png

When you click OK, you’ll see (for a fleeting few seconds), this message in the notification area (by default, the upper right of the page, just below the ribbon container):

2011-05-09-AddingScripttoCEWPSP2010-06.png

Read this as “Your HTML source has almost definitely been messed with.” The question is how much, and you’ll just need to check to see. There are undoubtedly some rules around this, but I’m not aware of where they may be documented.

Even with this ridiculously simple JavaScript, the formatting changes a bit:

2011-05-09-AddingScripttoCEWPSP2010-07.png

So, while this approach works some of the time, using the Content Link and pointing to script in a file stored somewhere in the Site Collection is a far better way to go. Trust me, it’ll save you headaches. It’s also a better way to manage your scripts and follow good development practices.

Comments

Christian Ståhl

A good practice

Yea, agree with you Marc, using the Content Link and pointing to script in a file stored somewhere in the Site Collection is a good way to go, and you can edit the script later on without need to edit the actual page with the content editor.

Posted 14-May-2011 by Christian Ståhl
Rupshi

Adding Script into

Hi I am so thrilled I found your web site, I really found you by mistake, while I was searching on Aol for something else, Anyways I am here now and would just like to say thanks a lot for a tremendous post and a all round interesting blog (I also love the theme/design), I don’t have time to read it all at the minute but I have book-marked it and also added your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the fantastic work.

Posted 10-May-2013 by Rupshi
Jessica

related question

I know my question isn't directly related to this post, but I am hoping someone can help. I have CEWP with a Content Link to a text file stored on the site. I am using the CEWP display a Windows Media player on a wiki page on my 2010 site. I've set the player to a specific height and width, and it works fine when viewing the page. The problem I am having is that when editing the page the media player object displays at the full size of the video... why isn't it applying the height and width properties? how can I fix that?

Posted 01-Nov-2013 by Jessica
coach outlet store online

http://www.coachoutletstoreinc.com/

We know the old adage - that April showers bring coach factory outlet - but we're impatient! We want those heartwarming, spirit-lifting plants to blossom now! You just never know, and even on coach outlet store online when you're not looking for trouble, trouble could find coach factory outlet; in the form of a good ol' fashion fisticuffs.This coach outlet store roundup mourns Peaches Geldof, celebrates tiffany jewelry's marriage, embraces spring, and reveals the face of a new coach factory fragrance.Even if we're not Fashion tiffany and co bound, we're always seeking coach outlet online. This time it comes in the form of michael kors outlet online, classic stripes, and statement heels.The true religion jeans is always chic and exact. There is such a sense of michael kors outlet in wearing steely gray, especially when you do it with coach outlet. What you might not know: what a day in the life of a pro celine outlet really looks like. If you're unsure, I'll make it easy for you to decide: the coach factory outlet is YES.The tasty treats from toms shoes company are hittin' the spot with their sweet breakfast-y flavor and adorable elephant shape.alexander wang shoes to the present day, the alexander wang bags features stunning costumes but is still not dramatic enough to do justice to its glamorous subject.So, when celine bags offered me the chance to stay at a hotel, have a consultation with a sleep doctor and have my own little sleep sanctuary, that was an offer I definitely wasn't about to turn down.The toms usa has just opened a new website, so now you can see what you've been missing out on.

Posted 09-Apr-2014 by coach outlet store online
alksdsajdksfs

alksdsajdksfs

Wide (44 mm) stainless steel Replica Watches housing the new watch Alpina Sport polished black PVD bezel matching the color of Rolex Replica the shield. Note the presence of Orange of data, and minute hands, which is one of Hublot Replica Watches the colors that best resistant to "absorb" ... In fact, more that we're going to dive, more light and more colors.

Posted 16-Apr-2014 by alksdsajdksfs

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: