Pasting Content

 

Overview

For quite a few users, page content will most likely be taken from some kind of document and placed onto the pages of the site. These documents might include things like Word documents, PDFs, spreadsheets, or even email messages.

Many times, these document sources have text formatting and styling associated with them; in the documents, the text may have special fonts, different sizes, etc. Even if text may not seem to have a style (for instance, if the document simply uses the word processor's default styling), there is still style markup attached to the text.

Campusuite sites are built with a strict adherence to styling templates in mind. The headers and different text/element styles are pre-set in Campusuite sites, and it is intended that when content is pasted onto a page, users utilize these styles to keep a clean, consistent look across all of the site's webpages; this tends to result in a much better experience for the visitor.

If you attempt to copy and paste content from documents such as Word docs or PDFs into the Campusuite editor, the styling that is attached to the text may be copied over as well. This styling would then override any styling defined by the Campusuite system for your pages, and will cause the pasted text to look inconsistent with the rest of the site's content.

In order to fix this issue, there are two methods by which content from other WYSIWYG sources can be pasted into a page.

Note that only text-based content can be copied onto a page. Since elements like images and Flash objects need to be uploaded to the server in order to be used, these items cannot be copied and pasted into the editor.

 

Pasting Content as Plain Text

Instead of requiring users to re-type the content for their pages to avoid this issue, an item in the toolbar allows users to paste text into a document while at the same time cleaning it of any styling information that is attached to it. This can be referred to as "text scrubbing", but more technically it is considered "pasting as plain text". (You may have noticed this terminology associated with email clients, as some allow users to type emails as plain text or with HTML, or styled, text.)

The drawback to this pasting as plain text feature is that any styling you want on the text will need to be re-applied after pasting. This includes headings, bulleted/numbered lists, font-weights, etc. These will have to be added back to the text manually, however, since the styling will then be done in Campusuite, it is guaranteed to keep with the already defined styles and formats for your site.

  1. Be sure to copy the content you wish to paste into the page (CTRL-C for Windows, or Right Click -> Copy for most applications).
  2. Place your cursor on the page where you want the content added. It is good practice, especially when bringing in large amounts of content, to paste on a line by itself, that is usually preceded and followed by hard breaks.
  3. Click the Paste as Plain Text button on the Editor Toolbar. The Paste as Plain Text dialog will show. View a description of this interface for reference.
  4. The dialog is simply a large textbox. Click inside this textbox, and paste the content (CTRL-V for Windows, or Right Click -> Paste for most browsers). Although the text may look uninteresting, you will see that no styling has copied over.
  5. Once finished, click the OK button. The text will be pasted into the page, and it should reflect the default styling used on your site. From here, you can use the editor to style and format the content as needed.

 

Pasting Content from Word

In it's most recent versions, the CKEditor software that Campsusuite uses for page editing has included a feature for pasting content into a page directly from Word.

This feature works similar to the paste as plain text tool, but will attempt to keep as much styling as possible to the text, all while converting the Word styling markup to HTML and CSS for the web. For the most part, there is not much styling that can be kept using this feature, but it is most likely that as CKEditor continues to be improved, this feature will be expanded.

If anything, this feature is very valuable when it comes to tables. Tables of data can be copied over directly from a word processor using this feature. However, the more complex the table is (especially with merged cells, etc.), the more possibility that this Word to HTML conversion will not be done perfectly.

Although this feature can be used and is documented here, it is still suggested that users continue to use the paste as plain text tool for most cases. The content pasted using the Word feature will most likely not maintain enough of the styling to make it that much appealing than the plain text function. Also, by pasting plain text, you will know exactly what styling is applied to the text, as you would have to apply it yourself.

  1. Be sure to copy the content you wish to paste into the page (CTRL-C for Windows, or Right Click -> Copy for most applications).
  2. Place your cursor on the page where you want the content added. It is good practice, especially when bringing in large amounts of content, to paste on a line by itself, that is usually preceded and followed by hard breaks.
  3. Click the Paste from Word button on the Editor Toolbar. The Paste from Word dialog will show. View a description of this interface for reference.
  4. The dialog is simply a large textbox. Click inside this textbox, and paste the content (CTRL-V for Windows, or Right Click -> Paste for most browsers). The pasted text should look similar to its appearance in the word processor it was pasted from.
  5. Once finished, click the OK button. The text will be pasted into the page, and some of the styling should have been carried over from the word processor. From here, you can use the editor to further style and format the content as needed.

Below is only one example of what your source code might look like as a result of pasting directly into the editor when copying from Word.

Example of pasting content directly from Microsoft Word

Pasting from Word can bring in invisible mark-up that looks like the below. BE SURE to use the Paste as text icon (at right).

<meta content="text/html; http-equiv="Content-Type" />
<meta content="Word.Document" name="ProgId" />
<meta content="Microsoft Word 11" name="Generator" />
<meta content="Microsoft Word 11" name="Originator" />
<link href="file:///C:\DOCUME~1\jason\LOCALS~1\Temp\" />
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
  <o:PixelsPerInch>72</o:PixelsPerInch>
  <o:TargetScreenSize>544x376</o:TargetScreenSize>
</o:OfficeDocumentSettings>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:WordDocument>