1,391 articles and 9,819 comments as of Sunday, February 21st, 2010

Wednesday, January 20, 2010

How to Solve Your SharePoint Rich Text Editor Blues

Author: Jim Parker
PlanetParker.com

The Problem

So if you’ve ever tried to walk someone through the process of creating a custom web part page filled with nicely styled text and pictures, you know what a poor experience SharePoint WSS 3.0 provides.  It involves navigating all of SharePoint land, hunting for URL’s, and battling with a lame Rich Text Editor with the formatting of your content.

It goes something like this:

Step 1:  Open any custom web part page for editing, and drop a Content Editor Web Part (CEWP) onto the page.


Step 2:  Put the CEWP web part into edit mode, and click on the Rich Text Editor button


Step 3:  You now get a rich text box to start typing away.  But the box is really small, so you widen it.  You start typing text and realize you want a cool picture or two to spice up the content.  So you click on the little picture button and expect to be able to browse and insert a picture.  Wrong.  You get a tiny dialog box asking for the URL to the picture. 


Ah huh…so then you realize that you have to actually upload the picture to your picture library ahead of time (which you didn’t because you weren’t even sure what you were going to put in your article or content until you started writing it out). 

Step 4:  So you save your current work (which looks terribly incomplete), and navigate over to your picture library so you can upload a picture or two.  You don’t know which picture is going to look just right yet, so you upload 4 or 5 just in case because you don’t want to have to do this all over again and interrupt your creative thought. 

Step 5:  So after uploading the pics to a library (which takes entirely too long) you then need to go grab the URL for the picture you want to use, so you view the properties of the picture and copy the URL to the clipboard. 

Step 6:  Then you wander back to your custom web part page, click edit a few times, and jump back into the rich text editor.  You then find a good spot within your text to drop a picture, and click on the picture button again.  This time, you’re armed with that pesky little URL, and wah-la!  You’ve got a picture displayed inside your CEWP.  Hooray!…except…you decide it’s not really aligned well within the flow of the content.  So you play around with cutting and re-pasting the picture into the rich text editor, but can’t quite figure out how to get it exactly where you want it.  You then decide that the picture needs to be a little smaller, or larger.  You select it and drag the corners to resize it of course, only to find out that it doesn’t retain the proportional width to height.  How nifty!  After fussing with it, you decide to leave it alone and move onto the rest of the content. 


Step 7:  You type happily along again until you decide you need another picture.  Oh yes, you need to go grab that new URL now…  So you go back to the picture library again to grab another picture URL.  Then a return trip to your page, edit, rich text box…okay, ready to go.  You insert the new picture, and briefly entertain the thought of moving it around, but dismiss the idea realizing how much of a PITA it was and you didn’t even get the results you like, so you forget it.  But, then you think….hmmmm…is that really the right picture

Step 8:  Ugh, back to the picture library to grab a different picture URL, copy it, then back to web part page, edit, rinse, spin, and repeat, and paste. 

Done!  So, now you have an article with a couple of pics which are not exactly placed where you’d like them or proportionately sized, and you ended up with a few pictures uploaded into your picture library that you didn’t even end up using after all.  But oh well, it only took 20 MINUTES!!!


Now, try training an end-user to do this on their new, spiffy SharePoint website that you created for their Glee club.  Then watch their expression as they realize they will need to go through this hoop-jumping, uploading, URL hunting, content formatting HELL, over and over and over again… every time they want to create content with pictures (which is most of time).  I can tell you, the Glee club won’t be singing your praises.

The Solution

Okay, so how do we solve this problem?  Better rich text editor web parts you say?  Maybe, but if you’re like me and in a shared hosting environment—no luck.  But there is a way you can make this whole process a TON better, faster, and easier.

The secret is two key ingredients:  A SharePoint Blog template, and Windows Live Writer

…and 3 simple steps:  Create, Publish, and Copy

Step 1 – Create:  Windows Live Writer (WLW) now integrates seamlessly with SharePoint sites based on the Blog template style.  This means you can use WLW to create “posts” (aka content) which you can then publish to your SP blog.  The beauty here is that WLW is a far better rich text editor, which allows you to easily draft content, import pictures (or even screen captures), links, etc., with perfect alignment, boxing, columns, or whatever you want. 

Step 2 – Publish:  Once you’ve put the finishing touches on the content and pictures within WLW, you simply press the publish button, and WLW takes care of not only posting the content, but also upload all of the pictures to your SP site, correctly linked and all ready to go.  How cool is that!?!


Step 3 – Copy:  So, once you’ve published the post to your SP blog, the only thing you need to do is visit the blog post, edit it, and steal the source code that SP embedded for you as part of the posting.Once you’ve got it, then simply edit a CEWP in source code mode (no stinky rich text editor!), and paste the code. 


Click save and WAH-LA!!!  NOW you’re cookin’ with gas!  :-)

The Result


Tip:  If you already have an existing SP site which was not based on the blog template, just create a sub-site using the blog template.  You can then choose to hide it or use it as a great blogging feature for your existing site, complete with RSS feeds.

Author: Jim Parker
PlanetParker.com

Jim Parker is a Vice President and Technology Manager for a large financial corporation in the Midwest, and also a SharePoint hobbyist.  In his spare time, he experiments with creating public websites for a handful of small-business clients, with only SharePoint Designer and the EndUserSharePoint.com tips at his side.  He occasionally posts his own SharePoint tips to his blog (http://planetparker.com/blog), and can be followed on Twitter (http://twitter.com/planetparker) and LinkedIn (http://www.linkedin.com/in/planetparker).

 

Please Join the Discussion

10 Responses to “How to Solve Your SharePoint Rich Text Editor Blues”
  1. eric says:

    Great tip!

    If you’re using the blog as a publishing mechanism only, you’ll still have some cleanup to do like moving pictures to a new library and replacing the absolute URLs with relative ones or just updating the absolutes to the new library location.

  2. nosy_parker says:

    Nice tip. I’ve just tried it and found I couldn’t merge cells. Bit of a pain if you are using borderless tables for alignment.

    I’ve not tested it but if you have a restricted blog as the donor for the code, will it fail if you you start posting in CEWPs elsewhere in an open access area?

    It also turned my Youtube embed video into just a link to the Youtube video as opposed to playing in the page.

    I’ve not had a play with SP 2010, does it have a better Rich Text Editor with the ability to upload images as you build the content and skin the content like Windows Live Writer you’ve linked us to?

  3. Xene says:

    Nice! I had just discovered a similar trick with copying from a CEWP into a Wiki page as well. I had wanted to maintain the pop-up mouse over window I had embedded into a picture/hyperlink so I copied that section of source code and once pasted into the wiki, that pop-up window (which contained log-in and password for a website added as a tool tip to the hyperlink) displayed just as it did on the home page. Very useful trick!

  4. Emmanuel Baron says:

    You can also used Rad Editor Lite (free)

  5. Jorgen B says:

    Nice post.

    I’ve used this approach for posting Announcements, based upon a tip I read some time ago.

    I found that you really don’t have to publish the content. All you have to do is to copy the code from the source tab in the bottom left corner.

  6. Jim Parker says:

    Eric: You shouldn’t have any clean-up to do, since my method suggests that you keep the blog site active, even if you do not intend to intentionally expose the blog. If your main SP site is already a Blog, then you can simply hide the posts web part. Otherwise, if your Blog is a subsite to your main site, then simply hide the references to your subsite. Of course, people will still be able to visit your blog if they know the URL or are intent on finding it, but what will they see that you don’t want them to anyway?? In fact, having the blog is a nice little archive to show people past articles, or allow you as the web master to switch out your custom web pages with different content from the past quite easily.

  7. Jim Parker says:

    Nosy_Parker: Unfortunately yes, if your blog is restricted for some reason, then any references to it will not work, as you would expect. You would need to publish to a blog that was not intended to contain sensitive information.

    Again, my advice would be to simply create a subsite based on the SP Blog template, and open it for public/anonymous access. Then only publish content there that you intend to expose to the public via your custom web pages and CEWP’s.

    I’ll look into the YouTube video problem, but I suspect it SharePoint is actually removing the embed tags or something. I seem to recall a work-around to this–I’ll try to find it and post.

    I can’t speak to SP 2010, as I have not used it. I am in a hosted environment and at their mercy for moving to 2010, and they have not provided a date they will switch. So, I have intentionally avoided reading posts about the new functionality available in 2010 because I just know it would spin me into fits of jealously ;-)

  8. Jim Parker says:

    Emmanuel Baron: Yes, although I have not used the RAD Editor, I hear it has some nice features, as do many of the other 3rd party SP web part offerings.

    However, if you are in a shared hosting environment, like I am, then you are not allowed to install any components into the environment, and most likely they will not do it for you either. This is a major reason most folks are here at EndUserSharePoint I believe…they need advanced capabilities without the need for server administration access.

  9. Jim Parker says:

    Jorgen B: I looked at the source code within Live Writer, and it appeared to me that the URL’s for pictures were merely internal code references for Live Writer to replace (during the publishing process) with the actual URL’s of the newly uploaded pictures to a SP picture library.

    If you’ve gotten it to work though, I’d love to hear about it as this could provide an even more streamlined process.

  10. nosy_parker says:

    Thanks Jim. This could be unrelated but it does appear to be a strong coincidence. Since installing WLW I’ve developed a bug in Outlook 2003. When updating text or adding/removing attendees to meetings it always used to prompt to ask if I wanted to update all or just the newly added folk. That has now vanished and it updates all and is making me look a bit foolish :-)

    I’ve since removed WLW and a couple of its companion tools and sadly the fault hasn’t gone away. Oh well…


Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!