WiscWeb CMS - Using the Text Editor

The Text Editor will be used by several different Content Classes

WiscWeb CMS - Text Editor

Text Editor Features and Functions

Best practices in editing

In multiple areas of the CMS system, either on forms (for example, certain properties of an event object) or in a Text Area content class, a Text Editor object is the thing you use to type text, create links, etc. The Text Editor should be familiar to any person who has used a modern computer word processing application like WordPerfect, Microsoft Word, WordPad, TextPad, LibreOffice Writer, etc., or an HTML editor that uses toolbars and buttons to create html code.

The Text Editor in the CMS system is of this latter type--the buttons etc. are used to create hypertext markup language (html) which the CMS sytem then uses when it constructs pages as a site is published. You should keep this distinction in mind as you work. Most modern text editors insulate us from all of the stuff embedded in a document file and we blithly go about our business rarely thinking that tabs and returns are actual things that get stored in a document along with the text we type.

In an html editor like the CMS Text Editor this is somewhat true as well, but it is wise to remember that there are features of the Text Editor that will allow you to completely mess up your lovely text area if you are not careful.

To whit: almost all of the websites managed with the CSM system are created using CSS StyleSheets. These style sheets are used to affect how a web site looks: it's colors for text, links, background, etc,; how lists and tables look; the spacing of the various parts of a page (e.g., the width of the left side bar, the height of the header and footer areas, etc.). It is possible using the Text Editor to override the look and feel of CSS stylesheet design and it is very easy to do this using the Paste options within the Text Editor. In nearly all cases it is not advisable that you use formatting options that might do this. Use a Text Editor, as much as is practicable, for content only. This KB doc will highlight those Text Editor features you should be wary of.

Most of the Text Editor buttons are self-explanatory (e.g., Bold, Italic, and Underline) and putting your mouse pointer over a button for a few seconds should result in a pop-up explaining the button's fuction.
Mouse over popup help

These common functions will not be discussed in this KB document. Instead this KB document will highlight some of the more critical, and potentially dangerous, features in the Text Editor so you can be confident in using it knowing what can harm as well as help you.

The Text Editor consists of three areas:

Text editor main areas
  • The toolbar - Two rows of buttons and menus using which one can select formatting options, copy/paste text, set structural divisions (e.g., headings and paragraphs), create lists and tables, add links and imagess.
  • The text area - Where you type, or paste in, the text you then modify with the toolbar options.
  • The "Mode" bar - Three buttons that alter how the Text Editor functions (more on these below).

The Text Area

The easist, and most helpful, way of using the Text Editor when you need to, is to simply type the text you want in the spot where the CSM text area is used. No need to do anything fancy--keep bold and italics to a minimum; use lists sparingly and tables only for things like tabular data (that is, use a table to, well, create a table of data); no fonts; no text color or background colors; no styling. The stylesheets of your website will do all sorts of magical things to your text and you need not worry over any of it. Just enter your text and click on OK when you are done. If you have need of special characters like the Copyright symbol, etc., there is a button with a dropdown menu of commonly used special characters:
text editor special characters palette

The Toolbar's Paste Buttons

Ah, if life were so easy! Many of us will have text that has already been typed in other programs like Microsoft Word or is in another format (like an Adobe Acrobat PDF document) or may come from a previously existing web site. What should we do in this situation? Typically we'd copy what we want in the 'original' form and paste into the Text Editor window. BEWARE! "Copy in the original" means, in today's modern computing world, almost surely copying both text AND the formatting for that text! This is where you must be cautious as that formatting that is copied to the clipboard may cause undesirable formatting if pasted directly into a Text Editor field. To help with this, there are three paste commands on the Toolbar!

The Three Versions of the Paste Command

The Text Editor has three Paste commands:

  • Paste - This normal Paste command is not normal at all! It will take any formatting that has been included on the clipboard along with the text that you have copied and, when used, will put everything (all markup [if from another website], formatting, etc.) into the Text Editor field. We very much Discourage use of this button as using this Paste command will override stylesheets (which completely defeats the whole reason for having stylesheets in the first place) and almost surely will produce inconsistent results.
    text editor normal paste
  • WordPaste - This Paste is especially for when Microsoft Word was used as the source for copied text. It is smart enough to know what Microsoft Word formatting is and removes it, but it won't bother the stylesheets that underlie your website. It is better than the normal Paste, but is only useful if your source document is a Microsoft Word document. Better still is to use the next Paste command.
    text editor paste from microsoft word
  • PasteTextOnly - No formatting of any kind will be pasted along with the text no matter its source. To be honest, this is the best way to paste text from other sources into the Text Editor. Yes, using it will require you to manually reformat pasted text, but adding lists, etc. is far, far easier than identifying where errant formatting has messed up your site and back-tracking to delete it.
    text editor paste text only

Some website pages in the CSM system have had to be completely scrapped and started from scratch because of pasted formatting. It may work, but you might prefer a little formatting work after pasting text to drudging through pages of content trying to find where things went awry during some long-ago editing session. A word to the wise and all that! This said, you might want to make sure you know where a few helpful buttons are: Undo/Redo, Select All, and Clear Formatting! They may come in handy on occasion.
text editor undo redo select all clear toolbar buttons

Images in the Text Editor

Using images is a bit convoluted, so we have a separate KB doc to explain and show how they work in the Text Editor: Images in the Text Editor

Linking for Documents and Images

You can use a text or an image in the TextEditor as the starting point for a link. The target of such a link can be a URL, an email address, a file, or another page. Clicking on the Link button brings up the Insert or Edit Link display, which is tabbed:

  • Page - for another object/page in your site which you can locate, after clicking on the Search button, using Content, Headline, PageID, Content Class, Date, Creator, Modifier, Keyword, Status, or Workflow. For a local page, you must know something about the page to which you want to link already as there is not a Select option. After clicking on Select on the Page tab, a new window opens. Begin typing in the Content field and a search is performed when the Start button is clicked, so you must use some identifying attribute of the page you intend to reference, e.g., headline, heading, text, etc.
    text editor insert edit link page
  • Asset - for items that are part of your site's Asset repository (you can review your site's Assets from within the CMS system's SmartEdit screen by clicking on the Asset Panel icon on the bottom of the right-side dock). You can use the "Select File from Local File System" in this process to add files (e.g., a PDF document) to your site's Assets.
    text editor insert edit link asset
  • Internet - for access to pages on other websites than your website via various methods (e.g., http://, https://, sftp://, etc.).
    text editor insert edit link url
  • Email - to create an email message to a specific email address.
    text editor insert edit link email

These various options are fairly self-explanatory, except perhaps Asset. Assets are images, documents (e.g., Microsoft Word, Microsoft Powerpoint presentations, Adobe PDF documents), etc. that have been added to your CMS site. There are various ways of managing a site's Assets. You can learn more at this KB doc: WiscWeb CMS - Creating folders and adding files via Asset Manager. When you select the Asset tab on the Insert or Edit Link window, you have two options after you click on the Select button: text editor insert edit asset options

  • Select from Local File System - Will provide a new window using which you can find and select a file on your computer to upload to your site's Assets (you will have to select a location in your site's Assets to put this new item you upload) for inclusion in the link. Thus, you either use an existing file in your site's Assets (see next item) or you upload a new one to the site's Assets. Note that In the subsequent window with assests shown, you must click on the name of the desired asset and not its thumbnail (the thumbnail will open images in a preview window, not select them for inclusion in the link you are trying to make).
  • Select Asset - Will provide a new window using which you a can select a file from your site's existing Assets.

The Mode Buttons

At the bottom of the Text Editor window are three buttons one can use to shift the functions of the entire Text Editor window:

  • Design - This is the normal mode and the one to which the Text Editor defaults. It is the familiar mode in which you type content and use the Toolbar when necessary.
  • Source Code - We highly discourage use of this mode unless you really, really understand HTML and CSS stylesheets, and even then we advise considerable CAUTION working in this mode. You can edit the underlying html/css here and seriously affect both the html the CMS system publishes and the CSS styles used to format your site. For example, the KnowledgeBase document you are reading right now has some local CSS styling added so the the images have a faint blue line around them and have some extra padding to separate them from the surrounding text. You could add such a style for images on a specific page of your site using this part of the Text Editor. So, very powerful possibilities, but use with caution
  • Preview - The mode simply removes any Text Editor editing options and shows how the content in the Text Editor will look before you save it.

One final note -- the Text Editor, unlike many screens in the CMS, has both a Save and an OK button. Use the Save button to save your work in the Text Editor as you go. Use OK when you are done to return to the CMS system.




Keywords:wiscweb cms templates content classes Text Editor Text Area TextArea TextEditor   Doc ID:26221
Owner:Ryan H.Group:WiscWeb CMS
Created:2012-08-27 12:43 CDTUpdated:2014-12-02 12:34 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  0   0