Upgraded Editor Released

Last week we wrote about the upgrade to CHSSWeb's WYSIWYG editor. The upgraded version has now been released. Below is the content from last week's article detailing the changes. If you run into any questions as you work with this upgraded editor, please contact us.


What is the editor?

The editor is the "What You See is What You Get" (WYSIWYG) field that you use when working on your website. It allows you to create and edit content on your website without needing to type any code.

Why is this changing?

As with most digital tools, upgrades are needed to keep them secure and running properly. The WYSIWYG editor that we use was due for a major upgrade, containing security updates and feature changes.

So, what is changing?

This upgrade introduces several changes including additional accessibility options when uploading images, the ability to drag and drop images into the upload screen, removal of an option for uploading documents that is no longer supported and new font and background color tools.

Image upload options

The old WYSIWYG version had two image options, one that let you upload an image directly from your computer and one that let you use an image from your site's image bank. These two options have now moved under a single icon, with 3 tabs: "General", "Advanced" and "Upload".

The "General" tab allows you to enter a url for an image that already exists in your site's image bank, enter accessibility attributes and adjust the size of your image. This functions the same way it did in the old WYSIWYG editor version with the exception of a new accessibility option, discussed later.

The "Advanced" tab works the same way it did in the old version, allowing you to adjust the vertical and horizontal spacing for an image and add border properties.

The "Upload" tab is where you will now find the tools for uploading an image from your computer. You can use a file picker, just like the old version, or drag an image into the window. The drag and drop feature is new to this version.

Upload Tab:

Example Image Upload Screen

 

General tab:

Example Image General Tab

Image accessibility options

When you upload images, you now have an additional accessibility option. After uploading an image, you will be taken to the "General" tab. From there, you can designate the image as "decorative" or enter an alternative description.

Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive*. For these images, you can check the "Image is decorative" box. This will add the appropriate presentation and empty alt tags to the image so they can be recognized by screen readers and other accessibility tools.

For non-decorative images, it is very important that you enter an image description in the provided field. This description is used by screen readers to convey the information in the image to people using your site.

Learn more about accessible images

Source: W3C Web Accessibility Initiative

Default Image Sizes:

When you upload an image to the system, several size variants are created for you. In the old version of the WYSIWYG editor, the medium size variant was chosen and displayed by default. In this version, the original image variant is used by default. After uploading an image, you will be taken to the "General" tab were you can resize the image to a size of your choosing or drag the image to a new size in the editor window itself.

The full array of size variants are still available to you under Resources --> Images if you decide you want to switch to a different variant later. This is done the same way it was before, by selecting the url for the variant you want and then pasting it into the Source field in the "General" tab.

Direct document upload removal

In the old version of the WYSIWYG editor, we provided a direct document upload option. This option was provided via a plugin that has been deprecated for some time. In this new version of the WYSIWYG editor, support was fully dropped. We do not want to move forward with this tool if it is not supported and patched regularly for security updates. This option was in addition to the default way of adding documents in CHSSWeb, through Resources

The process for adding a document link on a page is as follows:

  • Navigate to Resources --> Documents
  • Click "Create New"
  • Give your document a name and upload your file
  • After your Document saves successfully a url will be provided
  • Copy this url and add it to your page as a link

This is one area where this upgraded version is a bit less convenient. We apologize for this but feel it is necessary to provide a fully supported tool. Since we offer the ability to upload and maintain documents under Resources in CHSSWeb, we hope that the inconvenience is minimal.

New Font and Background Color Options

In the new version of the WYSIWYG editor, additional font options are available. Under the Format menu, there are now options for Font Color and Background Color. 

With these new options, comes the responsibility to use them in an accessible way. Two specific things to consider when using font and background colors are the contrast between the two and how different visitors to your website might see colors differently. 

Take care when using font colors or background colors to ensure that they meet color contrast requirements for accessibility. The WebAIM Contrast Checker can help you determine if the color combinations your are considering are accessible. 

When using different font and background colors, it is important to consider that not all visitors may see colors the same way. While it can be tempting to use text color to convey importance, the color you choose may be seen and perceived differently by some visitors using your website. If you have questions about using text and background colors in an accessible way, please contact us.

Visual Changes

With this upgrade, comes some visual changes. The new version of the editor responds to the overall screen size by hiding some icons in an expandable menu signified by three dots. 

In this version, there is no longer a Horizontal Line icon. This option is now available under the Insert menu. The template icon has also changed. In this version, it is a small "stamp" icon.

If you find yourself searching for a tool and having trouble finding it, please reach out and we can help.

Old WYSIWYG version:

Old WYSIWYG display

New WYSIWYG version:

New WYSIWYG display

New WYSIWYG display with menu expanded:

New WYSIWYG display with menu expanded