The new content editor WebPart in SharePoint 2010

Posted on 11/27/2009 @ 11:41 PM in #SharePoint 2010 | 17 comments | 6513 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

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?


Please post your comments:


Your feedback will be submitted for moderation, and will appear after it is approved.

Name:  
Email (optional): Your email address will not be posted.
URL (optional):
Comments: HTML will be ignored, URLs will be converted to hyperlinks  
Enter the text you see in the box: