The new content editor WebPart in SharePoint 2010

Posted on 11/27/2009 @ 11:41 PM in #SharePoint by | Feedback | 56920 views

Y’all, the Content Editor Webpart in SP2010 has been totally redone. This is great because I distinctly remember people coming upto me and posing me with the following problem in SP2007 -

“I used the content editor webpart on my intranet to maintain some content, and now when I share this content over the extranet (different URL), all the URLs are now broken!”.

Well fear not! The content editor webpart in SharePoint 2010 has been new-i-fied. And I’m glad that it has been because seriously, it is a very useful webpart. Business users love the simplicity it offers. So what’s new in SP2010’s CEWP?

  1. Wiki like editing in edit mode – you edit the webpart, click on it’s client area, and .. well just type in what you want :)
  2. While editing, rich MS-Word like ribbon .. so it feels like you’re typing in word!
  3. Ability to still edit the HTML directly, and check this out, convert the typed in HTML to XHTML with a single button click. WOW! No longer can a business user blame you for unclean HTML, instead you can blame them :).
  4. Right above the XHTML convert link on the ribbon, there is a very convenient link that allows you to select individual tags, and apply styles to individual tags. VERY VERY useful in producing clean and maintainable HTML right through WYSWYG.
  5. You can edit the content editor webpart, and point it to a txt file location where the actual content is. If you put in an absolute link to where the content is, the CEWP will try to make it a relative link per your AAM settings.
  6. If you put in an absolute link within the CEWP content, the CEWP will try to make it a relative link per your AAM settings.
  7. The ribbon shows you commands down to the tag level. Here is the ribbon for the Table, when you have time, check out the “icon” functionality in the hyperlink tag.

    Ribbon

Sound off but keep it civil:

Older comments..


On 12/16/2009 10:11:04 PM Tom Resing said ..
Is there a CEWP in SharePoint 2010 or are you just calling it that? From what I've seen, it looks like the whole page is a Rich Text Editor. It looks closer to a publishing field control that you can place web parts in.


On 12/16/2009 11:06:40 PM Sahil Malik said ..
Hey tom - yes there is a proper CEWP in SP2010.


On 12/25/2009 7:11:52 AM stephane eyskens said ..
Hi Sahil,

While this is indeed great because indeed, business users love that webpart and now we won't encounter URL problems anymore (or less), the webpart now behaves indeed like the richtext publishing field control.

And now, it doesn't look possible anymore to put javascript code directly in the CEWP (it's just cleaned out automatically upon saving). Did you observe the same behavior?

Cheers


On 12/25/2009 5:56:04 PM Sahil Malik said ..
Stephane -

Umm no, I was able to put in javascript in the CEWP. You have to do in Edit HTML source though. This is how I test out my JavaScripts that talk to the Client Object Model, ADO.NET Rest API, or Custom WCF services.

S


On 12/27/2009 3:54:07 AM stephane eyskens said ..
Sahil,

My mistake...I could have sweared I tried it the way you said but I got a "warning, the HTML souce you entered might have been modified"...and then it didn't work but I probably made a mistake since it works now...I didn't insist since the publishing rich editor doesn't allow javascript so I thought the new CEWP behaved the same way.

I intended to test the client object model :)

Thanks


On 12/29/2009 11:57:05 AM Erich O'Donnell said ..
I am getting the same strange error when trying to add html to the CEWP, and haven't gotten it to work yet. Any suggestions?


On 1/29/2010 7:51:33 AM Bil Simser said ..
I have to agree with some of the comments here and not Sahil's blog post.

1. There is nothing called the "Content Editor Web Part". There is a web part you can insert onto a page called "Content Editor" (under the Media and Content category) but it is not the CEWP we all use as a swiss army knife as there's no source mode, only rich text.


2. You have click on the page then under the Format Text ribbon click on HTML at the far right to edit the source of the entire page in an overlay window.


3. When you save it, SharePoint *does* modify the changes which sometimes messes with what you were trying to do. For example I added this a page:

<style type="text/css">


#s4-leftpanel { display: none }


</style>

To try to hide the left panel (something you might typically do on a page to make it more user friendly). When the page was saved it showed me a message "Warning: The HTML source might have been modifed". When I looked at the source of the page this is what I saw:

<style>


.ExternalClass11ABE6BE63624514A8BA3F4398DE9512 #s4-leftpanel


{display:none;}


</style>

What's wrong with this picture? Plenty. The <style> tag no longer conforms to WC3 standard markup so fails a validation and the new interjected .ExternalClassXXXX screws up the intention, to hide the element id s4-leftpanel because it now has a CSS class qualifier so it doesn't match anymore and thus the real div tag isn't found.


4. Turn the javascript debugger on in IE7 and you'll see a lot of errors popping up. Hopefully these will be resolved (after all it is a beta) but I would have expected something as basic as javascript errors when you put a page into editing mode to be fixed by now.

Caveat: I have the publishing infrastructure turned on and running on SharePoint Server, not Foundation which may differ from what Sahil is running on.

I do believe there's been a lot of changes in 2010 that we'll continue to explore and while I think everything has been upgraded for the better, I don't think we're in Kansas anymore Dorothy.


On 2/9/2010 9:26:10 AM Rob said ..
I tried pasting in the generated code from weather.com and got the same message - html may have been modified.

It's like Obama's running SharePoint now - you are not going to get what you want, you are going to get what I want you to have.


On 2/10/2010 10:34:00 AM Mahesh said ..
I tried Javascript in Content Editor inside Sharepoint 2010 and encountered some issues. For example, I have this code which prints out today's date.

<script language="JavaScript">


<!-- Hide content from non Javascript browsers


var Today = new Date();


var ThisDay = Today.getDate();


var ThisMonth = Today.getMonth() + 1;


var ThisYear = Today.getFullYear();


var DaysLeft;


var DayName = Today.getDate();


document.write("Today is " + ThisMonth + "/" + ThisDay + "/" + ThisYear + "<br>");


// End of hiding JavaScript code from old browsers --></script>

First time, it works fine and it prints today's date. The issue arises when you try to edit the page. Each time you try to edit the page, today's date is displayed as many number of times.

For example, the content editor displays


Today is 2/10/2010


Today is 2/10/2010


Today is 2/10/2010

And if I look at the HTML source, it is as follows.


<script language="JavaScript">


<!-- Hide content from non Javascript browsers


var Today = new Date();


var ThisDay = Today.getDate();


var ThisMonth = Today.getMonth() + 1;


var ThisYear = Today.getFullYear();


var DaysLeft;


var DayName = Today.getDate();


document.write("Today is " + ThisMonth + "/" + ThisDay + "/" + ThisYear + "<br>");


// End of hiding JavaScript code from old browsers --></script>Today is 2/10/2010<br/>Today is 2/10/2010<br/>Today is 2/10/2010<br/>


On 2/16/2010 11:00:01 PM Max said ..
Hi Sahil

How should the poor guys like me solve this problem in 2007 ?

“I used the content editor webpart on my intranet to maintain some content, and now when I share this content thru e-mails, all the URLs are now broken!”.

Thank you

Max


On 3/16/2010 6:39:33 PM Christian Stahl said ..
Hi, yes the Content Editor is a bit different now compared to the CEWP, but it 'can' still containe CSS or JS i you really try or forced it to... i think the easiest way is just to put in an link as a reference in the Content Editor to the a plain .txt file in a assets library that you include your JS within.


On 5/18/2010 6:48:51 PM vierx said ..
Hi, i just wonder where did they put the content editor webpart (CEWP) for sharepoint 2010... what is the new name.


On 6/7/2010 10:25:14 AM demoneyes said ..
Yo guys, everyone who is trying to directly put Javascript in their page in Sharepoint 2010 need to know that they will have their code stripped from the page. I think it was an actual design feature done so that it would prevent certain XSS attacks. To add javascript, you have to download the free Sharepoint 2010 Designer from Microsoft. Roundabout I know. :(


On 6/8/2010 11:02:07 PM jeeves said ..
Doesnt work with the Sharepoint 2010 Designer either. Seems really broken now. The author should have tried the very scenario himself to see if it worked, before posting the blog.


On 6/16/2010 7:02:24 AM Meera said ..
Good


On 6/21/2010 5:11:06 PM Jake said ..
I ran into the same issue that Mahesh faced. When there is javascript that generates HTML, the page runs ok the first time. Thereafter if you put it into edit mode, and save it, it grabs the HTML code generated by the javascript and saves it instead of ONLY saving the original javascript code that generated the HTML. So each time you do an edit and save, it appends the generated HTML over and over again. Seems very lame.


On 6/29/2010 10:41:58 PM Bob Tapscott said ..
By removing the source editor it appears you can no longer add Google Gadgets to a SharePoint site. IS that correct?


On 9/13/2010 9:26:26 PM Darren said ..
Anyone figured out how to get generated HTML to work properly using JavaScript in a Content Editor web part now in SP2010? This is annoying. :)


On 9/13/2010 10:08:38 PM Darren M. said ..
Check out the following:

http://sptwentyten.wordpress.com/2010/08/31/insert-javascript-into-a-content-editor-web-part-cewp/

This fixed up that text issue with JavaScript for me too.


On 9/21/2010 11:59:17 AM ashok said ..
Hi Sahil,

As you said,I tried to hide context menu for a list by entering javascript in HTML Editor in sharepoint 2010, but it's not working.

Java script is:

<script type="text/javascript">


function CAMOpt(p,wzText,wzAct,wzISrc,wzIAlt,wzISeq,wzDesc)


{


var mo=CMOpt(wzText,wzAct,wzISrc,wzIAlt,wzISeq,wzDesc);


if(!mo)return null;


if(wzText != "View Item")


if(wzText != "Edit Item")


if(wzText != "Compliance Details")

if(wzText != "Manage Permissions")


if(wzText != "Delete Item")


AChld(p,mo);


return mo;


}


</script>


On 9/27/2010 4:08:01 PM Helder said ..
Another problem I found with respect to links being broken was the editor was dropping the http://myserver part of the URL and assuming relative paths. I'm sure that's great for those who want relative paths, but in my case I don't. I wanted the fully qualified path because I am using the body of the entry in another non-SharePoint web site. To get around this I added the domain name to the name of the server, e.g. instead of http://myserver/mylinks/etc, I used http://myserver.domain.com/mylinks/etc. So instead of for example: http://blah/2009-11-The_new_content_editor... I used http://blah.winsmarts.com/2009-11-The_new_content_editor...


On 10/22/2010 9:41:59 AM Scott said ..
I want to be able to put "Back to Top" at the bottom of a page, click on it, and have it go to the top of the page. I tried using the Content Editor and cannot, but was able to do it in 2007. This is pretty basic stuff and I'm self taught. Where do I go to enter the code?


On 11/22/2010 10:40:12 AM Noel Walsh said ..
I've just noticed that if I add an image to a table in a CEWP just as I used to in 2007, there is no option to quickly and easily add a hyperlink so that clicking the image opens another page, list or site.


Is it me or do I now have to edit the HTML in order to add a hyperlink to an image?

Noel.


On 3/1/2011 12:42:42 PM Libby said ..
I have a question about adding links to publishing pages in SP 2010.

The experience I am having is when I add links to ul list items the link addition also adds another link item (blank) to the list. When I add a link to a set of items in paragraphs down the page the link tool adds an empty paragraph. And sometimes, even though I navigate to the link destination and pick it the link is not added at all.

Any help would be appreciated.


On 8/9/2011 11:50:37 PM Anil said ..
Hi


how can we use content editor web part to play multiple vidoe file in sharepoint Foundation 2010. if a add a content editor web part it not show "source editor" in the property window. In sharepoint 2007 it show this "source editor" in the property window.


Please help me to play multiple video file in sharepoint foundation 2010.


On 8/10/2011 2:54:14 AM Anil said ..
Hi


i am trying to play video file using the "Content Editor Web Part" when i add the code in Edit HTML Source" it show the media player in content editor web part but when i save that page that content editor web part disappears. it show one warnning also " Warning: The HTML source might have been modifed"


On 12/8/2011 1:04:24 PM Herb said ..
I know this is an old thread but I don't see anyone answering fully the questions. Here is what I know and hopefully it isn't too late to help some people.

To add a Content Editor Web Part (CEWP) to your page in SharePoint 2010:


1) edit the page(either Web Part page or Wiki page will work),


2) click on Insert


3) click on Web Part


There is a table presented with many options.


4) Choose Media and Content under Categories.


5) Choose Content Editor under your Web Parts list.


6) Select the Add button.

If you want to have css, html, and java then:


1) save the file you want in SiteAssets library


2) edit the web part you just added and paste the path to your asset in ContentLink


3) under the Appearance group, set Chrome Type to None


4) click OK button

That should take care of most problems I've seen listed above.


2)


On 2/17/2012 9:58:04 AM Tim said ..
Herb,

Your post was not in vain. Thanks for making sense of it all!


On 5/2/2012 2:38:04 AM Al said ..
None of u are making sense. Why would u need to use java code to enter normal text. sharepoint was designed for the average person to update content on their own wesite. The new CEWP can only be editied by someone that has extreme programming skills.


how does this work out, seriouly what was micrsoft thinking.


I would rather go back to frontpage !


On 5/14/2012 2:55:48 PM Anthony said ..
I'm new to sharepoint and am quickly learning to hate it's guts. I believe that this thread has something to do with my problem. I'm working on a small sharepoint site and it is to be a department intranet. I've spent about 3hrs trying to get a stupid weather sticker to work. I've found methods using both the Content Editor and also Page Viewer Web Parts and neither works. Is anyone able to offer a step by step on how to paste html source code into a web part and make it show the weather in Sharepoint 2010?? Or should I just give up since MS screwed this program up royally with 2010? Thanks in advance.


On 7/18/2012 3:41:55 PM Danny said ..
What about absolute URLs being converted to relative URLs? We have list that we use for notifications that get sent out in emails when approved. If we add a link to a sharepoint site in a different web app with a different URL the link does not work. Is there a way to disable the conversion of absolute URLs to relative ones?


On 4/10/2013 9:37:25 AM Mike said ..
In order to display weather on your site:

1. Put the code that you get from the weather site in an html page.


2. upload the html page to the sharepoint site.


3. Use a page viewer webpart to display the weather html page.