DotNetNuke, ASP.NET, Web Development Blog

DotNetNuke: Improving Paste From Word in the fckEditor

As most HTML aware folks know that when you paste content from Microsoft Word or Outlook for use as HTML, it includes all sorts of gobbledygook that clutters up your markup and overrides your CSS. Luckily, the fckEditor has a couple ways to handle this. If you're pasting from Word into the editor using IE, it pops up a dialog that gives you a chance to clean up the markup which is nice. If you're using Firefox you can achieve the same results by clicking on the special Paste from Word icon. But, there's an issue...

It's very rare that I actually paste content into the fckEditor directly from Word or Outlook but the other day I was showing some clients how to convert some of their existing content to our Articles Module and since we were using IE on the client's computer it popped up the Clean Word dialog box, we pasted in the content, hit OK and planned to go on our merry way until I noticed the paragraphs ran together. A quick look at the code showed that rather than <p> tags surrounding each paragraph, it had <div> tags. I thought that was odd.

Additionally, I noticed the header tags (<h1>, <h2>, ... ) had been replaced by:

<div><b><font size="6">Overview</font></b></div>

I was not pleased... So I did some digging. Apparently, the fckEditor guy explicitly wrote these conversions into the code because people were complaining that they couldn't get rid of the extra spacing between lines of text due to use of <p> tags.

To me, this is much better handled through proper client training... (e.g. use CTRL-Enter for line breaks, let CSS handle paragraph spacing) and not by using bad markup.

So I did a bit more digging and found that there's a nice, clean, configuration setting that you can use to turn off this transform "feature" called,CleanWordKeepsStructure. And the fine developers of DotNetNuke were wise enough to expose this setting in the Custom/fckconfig.js file.

To make the update, edit the fckconfig.js file (/Providers/HtmlEditorProviders/Fck/Custom/fckconfig.js). Do a search for CleanWordKeepsStructure and set it to true instead of false. In order to see the changes take effect right away, you may need to update the fckconfig.js in your cache, I find the easiest way to do that is to browse directly to the file and hit F5 (i.e. http://mysite.com/Providers/HtmlEditorProviders/Fck/Custom/fckconfig.js).

Also, keep in mind though that when you upgrade to newer DNN versions, you will need to update this setting as it will get overwritten by the upgrade files.

Happy coding!

Comments

Leave a Comment
Gravatar
Name:
Email: (not displayed)
Comments:

CAPTCHA image
Enter the code shown above:
Website

Return to previous page
  Search Articles...