Campus Suite: The All Important Html WYSIWYG

Html wysiwyg

You may be asking, the WYSI-WHAT?   What You See Is What You Get, that is what WYSIWYG stands for.  This post will introduce the basics of using the Html WYSIWYG Widget. In the future, I will  talk about other ways to format your entries using this widget. 

The Html WYSIWYG Widget is the most commonly used widget in your website publishing arsenal. 

  • Use this widget to add text and images to a page. 
  • Within the widget there is a full toolset for applying styles to your content. 
  • Fonts, Colors and Font-sizes are pre-set.
  • Using predefined styles keeps web page appearance consistent across our site. 

When copying content from an external source it is very important to “scrub” the content and then re-style it using the available styles. 

  • Use CTRL+C to copy text to a blank Google or MS Word Doc
  • Right Click and Select "Paste without formatting" into the Google or MS Word Doc
  • Copy and Paste into the Html WYSIWYG
  • You can also just type right into the Html WYSIWYG editor.

If you paste copied content directly into the Html WYSIWYG widget:

  • The website’s styling will be overwritten 
  • This makes the page render unpredictable on different devices
  • It may affect the performance of the websites load time
  • If we decide to change the styling of the website, pages that have styles that override the global styling of the site will not be updated

Do you want to print out a Cheat Sheet on using the Html WYSIWYG editor? One can be found HERE. And as always, please don't hesitate to ask me for assistance!