The WYSIWYG widget is hands-down the most commonly used widget in the publishers arsenal. Use this widget to add text and images to a page. You will have a full toolset for applying styles to your content. You won't use it to set fonts, colors and font-sizes… as this is set higher up in your website's CSS. The idea here is to use the styles that are available in a manner that makes each of your web pages (despite being developed by multiple people in your organization) look consistent, and clean across your site.

It's important to always "scrub" content (using the paste as plain text button in the top of the editor's toolbar) that you have copied from an external source and then re-style the content using the available styles. If you paste copied content directly into this widget, it will preserve it and it will override your website's CSS… making the page render unpredictably on various devices and in some cases, even affecting the performance of your website load times. Further, later on when you decide to change the font, color or style of a particular style, it will not have an affect on a page that has styles in-line that override the global styles.


How do I add this widget to a page?

  1. Click Edit Page
  2. Click the edit content icon (pencil, or + sign) and select the insert after or insert before option
  3. Choose the Html WYSIWYG widget
  4. After you've created your content within, click the green Create button
  5. Your Html WYSIWYG widget will show up on the page.
  6. Make sure to click the Save --> Publish options when you are done editing to save the page.



toolbarnew.jpg


  • How and why would I want to see the source code of the HTML WYSIWYG widget?
    To see the source code of the HTML WYSIWYG widget click on Source (located in the first row). One of the reasons you might want to view the source code is to place a snippet of code that you have received from third party sources, an alternative option to the HTML source widget. Another reason you might want to view the source code is if there are elements on the page that is acting or looking odd, you could look at the source to see if there is any styles or formatting that has been applied to the elements.

  • How do I copy and paste elements in the HTML WYSIWYG widget?
    Built into the HTML WYSIWYG widget are Cut, Copy and Paste tools (located in the first row). These allow you to cut, copy and paste elements in the same HTML WYSIWYG widget. You can also use your browser's built-in cut, copy and paste functions too, which would allow you to copy and paste between windows. If you are copying elements from an external source, we recommend using the Paste as plain text tool. Keyboard shortcut: Cmd + Shift + V

  • How do I paste text in from Word or an external source?
    Place your mouse and click where you would like the text to go and then click on the Paste as plain text tool (located on the top row, 5th button from the right). Paste your text into the window provided. This will clear any extraneous code that could be hidden. Keyboard shortcut: Cmd + Shift + V

    pasteasplaintext.png



  • How do I undo something that I just did?
    You can undo the last thing you did by clicking on the Undo tool (located in the first row) You can undo everything back to the current save/update of the widget. If you accidentally undo something, you can click the Redo button (located in the first row) to redo it. Like the Undo tool, the Redo tool will only work while you are in the widget.    Keyboard shortcut: Ctrl + Z

  • I need to find a word or phrase in the editor, how do I do this?
    Using the Search tool (located in the first row) you can quickly find every instance of a word or phrase in a HTML WYSIWYG widget. If you need to replace every instance of a word or phrase in the widget, either click on the Replace tool (located in the first row, tenth button from the left) or click on the 'Replace' tab while using the Search tool.


    findandreplace.jpg



  • How do I run a spell check?
    If you would like to run a spell check while in a HTML WYSIWYG widget, click on the Check Spelling tool (located in the first row, eleventh button from the left). Possible misspellings will be underlined in the window, when you are done running the spell checker click on Finish Checking.

  • How do I make the work area larger in the HTML WYSIWYG?
    There are two ways to make the work area larger in the HTML WYSIWYG, the first is located in the first row of the tool bar. If you click on the Maximize button, the work area will fill up the window. To minimize the work area again, click on the same button which will now be labeled Minimize. The second way is by clicking on the downward facing arrow located in the bottom right hand corner of the WYSIWYG editor, with it you can click and drag the window larger.

  • Is there a way I can view the elements of a HTML WYSIWYG in blocks, making it easier to format/style?
    If you are having problems with styling or formatting elements on the page such as having more or less elements taking on the new stye or format, Blocks (located in the first row) might help. It outlines (example below) the different elements by paragraphs and formatting.

    blocks_screenshot.jpg

  • How do I apply a style to specific bodies of text or content?
    To apply a style such as colored text, a specific look for a table etc., select the content and click on the Styles drop down menu (located in the first row) and pick the appropriate style.

  • How do I make or change the format for paragraphs or headers?
    To apply or change the format of text, select the text that you would like to change. Go to the Format drop down menu (located in the top row on the far right) and select the predetermined format (style) that you would like to apply.

    Note:
    If other elements are changed that means they are separated by a soft return (which is created by holding the shift down while you press enter.) Click at the beginning of the following line and press delete followed by return. Now select that text and either press the Remove Format button (located in the second row) or go up to the Format drop down menu (located in the top row on the far right) and select 'normal text'.

  • How do I bold, italicize, underline, strike through, sub or superscript text?
    To apply a style to text, select the text and click on the style you would like to apply (located in the second row.)   Keyboard shortcuts - Keyboard shortcuts:   Bold - Crl + B, Italicize - Ctrl + I, Underline - Ctrl + U

    Note: As a best-practice, we recommend never using the underline button to apply the underline style on text. It makes users think it is a link, and from an ADA compliance perspective, it's misleading those with impaired vision. Likewise, the strikethrough button is also rarely used. Unless a special case, we suggest just removing the text that you intend to strike.

  • How do I copy formatting applied to elements in the WYSIWYG?
    It is easy to copy the formatting that has been applied to elements in the WYSIWYG editor. All you have to do is select the element and click on the Copy Formatting tool (located in the second row.)  Keyboard shortcut: Cmd + Shift + C

  • How do I clear all styles or formatting applied to elements in the WYSIWYG?
    It is easy to remove a formatting/styling that has been applied to elements in the WYSIWYG editor. All you have to do is select the element and click on the Remove Format tool (located in the second row.)

  • How do I create or remove a bulleted or a numbered list?
    Select the text you want to be in a numbered or bulleted list and click the appropriate list tool (both are located in the second row). To remove a list, select the text and click the appropriate list tool.

    To create a nested list, select the the element(s) in the list that you would like  to be nested. Then click on the Increase Indent button (located in the second row)

  • How do I indent a paragraph?
    To indent a paragraph, select the paragraph and click on the Increase Indent tool (located in the second row) To remove an indent click, select the indented element and click on the Decrease Indent tool (located in the bottom row)

  • I want to change the alignment of the text, how do I do that?
    To change the alignment of text, select the text you would like to change the alignment for and click on the Align (left, center, right and justified) you would like (located in the second row.)

    Important: 
    Do not use the alignment buttons in the editor tool bar to align images. Please see the Image Alignment article for the proper way to align images.

  • How do I create a link?
    While in the HTML WYSIWYG editor, select the text or photo you would like to be a link. Click the Link button (located in the second row) and if it is a URL, enter the website's URL in the URL field. If it is a file, select Browse Files and navigate to the proper directory followed by the folder where it is located. If the files needs to be uploaded, you can do it here. If it is to another web page click the Browse Content button and navigate to the page you would like to link to, then click the plus sign to the right of it.   Keyboard shortcut:  Ctrl + L




    link.jpg


    Note:
    Please see the article, Best Practices for maintaining ADA compliance with hyperlinks for best practices on handling links on your site.

  • How do I add an anchor on my page?
    Position the cursor where you want to place the anchor and click on the Anchor button (located in the second row). Name the anchor and click OK. A small red flag will be shown where the Anchor is located now. This is not visible to the public, only while you are editing the page. To link to the anchor, click on the Link button and switch the Link type to 'Link to anchor in the text'. Select the anchor in the 'By Anchor Name' drop down menu from the options shown.

  • How do I place an image?
    To place an image while in the HTML WYSIWYG editor, place the cursor where you would like the photo to go and click on the Image button (located in the second row.) Navigate to where the photo is stored by using the Browse button. If the photo hasn't been uploaded, you can upload it after navigating to the folder where it should be located.

    After uploading or locating the photo you want to place, select it by either clicking on the plus sign to the right of the photo (which will bring in the photo at full size and non-optimized) or the size of the photo you would like to place. After selecting the photo, you will be taken back to the Image Properties window where we recommend entering Alternative Text (a description of that image) to maintain ADA compliance for that image.

    imageproperties.png


    To align the photo use either 'Align Left' or 'Align Right' in the Styles menu and not the 'Alignment' field in Image Properties or the text aligment buttons located at the top of the tool bar. For more information, please see the Image Alignment article.

    Note:
    To maintain ADA compliance, please remember to enter text into the Alternative Text field with all photos. This is simply a basic description of the image.

  • How do I add a table to the page?
    Click on the page where you would like the table to go followed by the Table button (located in the second row.) There, you will enter the number of rows & columns. If there should be headers at the top of right of the table, these should be properly formatted to maintain ADA compliance (more info below). We recommend setting the width of all tables 100%.


    tablepropertiesn.jpg


    Note: Tables should be used less and less today. They are not friendly to neither responsive design, nor ADA compliance. If you must use a table, we recommend that they be contained in their own HTML WYSIWYG editor and setting the width to 100% so the table will resize to a point, depending on the elements in the table for smaller screens. To maintain ADA compliance, you should select one of the following for a Table header; first row, first column or both.  The rest of the settings (height, cell spacing, cell padding and border size) for the table will be set using styles that are set for the website. For more information, please see the following article, Best-practices when creating tables.

  • How do I add a Horizontal line?
    Place the cursor where you would like the line to be and click on the Insert Horizontal Line button (located in the second row.)

  • I would like to add a special character such as accented text, how do I do this?
    You don't need to learn how to code to insert a special character. All you have to do is place the cursor where you would like to insert the special character and click on the Insert Special Character button (located in the second row) and select the special character.

    special_character.png



Additional Articles