pic

Working with Your Website’s WYSIWYG Editor and Its Configurable Toolbar

Creating and maintaining great looking content is easy in a WYSIWYG editor.

If you use a content management system, you’re probably already using a what-you-see-is-what-you-get (WYSIWYG) editor to compose and edit directly in your browser. Your web design team can configure the WYSIWYG on your website with the tools you use most so that content displays in the editor pretty much how it’s going to look to your customers when they view your website.

Configurable Toolbars

Toolbars on WYSIWYGs are highly configurable. Some configurations include just the basics – tools for setting bold text and making lists – while others give you the proverbial kitchen sink. A full package may include things like a spellcheck tool, a way to add scientific notation and mathematical formulae, and plugins to do things like easily rending YouTube videos with just a URL.

Toolbar for a WYSIWYG editor with many, many plugins for managing website content.
Toolbar for a WYSIWYG editor with many, many plugins for managing website content.

Ideally, you’ll work with your web developer to customize a WYSIWYG configuration for your needs. With a simple configuration, it’s easy to create and maintain content conforming to your company style guide.

With that in mind, here’s an overview of some of the useful tools available in a WYSIWYG. There are many more; I’m including these because they’re the ones clients use most when they begin adding and editing their own content.

Also, at the end of this post, there is a working WYSIWYG for you to try out what’s covered.

But First… New Line versus New Paragraph

This isn’t a tool, but a tip to make your life easier. I’m getting it out of the way here because it is the number one frustration I hear from people tasked with updating websites.

“The editor is adding too much space between lines and it’s driving me nuts. I just want to add a new line.”

That’s what they say. It’s true! So if you just want to start on a new line without starting a new paragraph, position your cursor where you want to break to a new line, hold down the shift key and hit enter.

When you just want a new line without added space beneath:

Shift + Return
= New Line.

Okay, now that’s out of the way, on to the tools!

Maximize Tool

The maximize tool fills the browser window with just the WYSIWYG you’re working with at the time.

Sometimes the content management area where you’re working on a post or a page has more fields than just the block of copy you’re working in. Do you find that distracting? If you want to focus on the editor you’re working in, use the Maximize tool. Click on the maximize tool and the editor you’re working in fills the page.

The Blocks Tool and Status Bar

The blocks tool outlines and labels block level elements in your content. The status bar (in the lower left of the WYSIWYG) displays a breadcrumb like list of elements on the page relative to the current cursor position.

Blocks are elements that take up the entire horizontal space of the WYSIWYG editor. The most common content blocks in your WYSIWYG are headings and paragraphs. When you enter a heading or a paragraph, a block takes up the entire width of the editor window. Content you enter after a block level element shows up beneath the previous block. Entering a new paragraph block is easy: Just hit the return button.

Once there’s a lot of text in the editor it’s not always obvious which kind of block you’re looking at and finding your way around them can be frustrating. Sure, you position your cursor where you want to be and there you are, but is “there” a heading, a paragraph, another block, or something that isn’t a block at all?

The Blocks tool and Status Bar
The WYSIWYG with the Blocks tool active. Status bar is in the lower-left of the editor.

The blocks tools and the status bar can help here. With the Blocks tool active, you can see where and what everything is. Position your cursor in the content and the status bar shows the hierarchy of the page; click on the status bar element tag names and the element in the editor is highlighted for you.

The Format Dropdown

Use the format dropdown to change text from one type of block element to another.

Let’s say you’re composing a press release right there in the WYSIWYG. You write a few paragraphs and you’re ready to start a new section with a new heading. Just hit enter and add the heading. Hit enter again and begin the section.  When you have finished, you can go back and format your headings. Enable the Blocks tool, position the cursor inside each of the headings and select Heading 2 from the format tool.

The Styles Dropdown

The Styles dropdown tool gives you an easy way to apply the styles unique to your website to its content.

Your web team can configure the Styles dropdown tool to give you easy solutions for creating elements like call-to-action buttons and text formatting that follow your brand’s style guidelines.

Links

Adding links to a webpage with a WYSIWYG is easy:  Copy the URL of the of the page or document you’re linking to your clipboard. Highlight the text you’ll link. Click the Link icon and paste the URL. If you want the link to open in a new window, look for a tab or dropdown marked “Target” and select the “New Window” option.

Images

Adding images with a WYSIWYG is a lot like adding links. Just click on the Image tool icon and add a URL or browse from images already on the server. You’ll get the hang of it quickly.

A few things to remember when you add images:

  • Always include alternative text describing the image. Not everyone views websites through a browser. Screen readers and search engines don’t see browser rendered images, they will see the underlying text however, so it’s important they have something to read.
  • If the image is also a link, add information about where the link goes.
  • The WYSIWYG will probably add width and height values for the image. If your site is responsive, remove those attributes before clicking OK to add the image. Responsive web pages use stylesheets to present the best size version of images for the device the page is being viewed on.
Remember to include alternative text. Leave the style elements like Width and Height empty.
Remember to include alternative text. Leave the style elements like Width and Height empty.

Special Characters: There’s Always Room for π

If you have content with special characters like scientific notation, trademark and copyright signs, or letters and punctuation occurring in non-English alphabets, ask your web designer if the Special Character tool is right for you. That’s the omega symbol icon in the toolbar. Out-of-the-box this tool has dozens of special characters available to add to your copy just by clicking. Your web developer can also customize the selection. It’s a convenient alternative to memorizing keystroke shortcuts and copying and pasting from other documents.

Clipboard Tools: Which to use?

Spoiler Alert: Just use the Paste as Plain Text tool.

These tools are the icons that look like clipboards. Their purpose is to paste whatever is on your computer’s clipboard to the WYSIWYG. Depending on your editor configuration, there might be a simple clipboard icon for pasting what’s on the system clipboard, a clipboard icon with a “T” for pasting as plain text, and another with a “W” for pasting from Word.

Pasting directly from the clipboard or with the paste-from-Word tools usually inserts a lot of code in the background that often you must go back and remove to get everything to look right, so unless you know HTML and enjoy time-consuming tasks – untangling strings of lights, for example – don’t use it. Stick with the paste-as-text tool. Then – if there’s still styling to be done – you can use the Styles and Format dropdowns to get things looking like the rest of your website.

Conclusion

There are hundreds more toolbar add-ons available. Hundreds! For now, these should be enough to set you on your way to working like a pro. To that end, if you’d to try out the ones covered in this post, here’s a working demo of a WYSIWYG with a toolbar configured for you. So go ahead: Click around, maximize, activate blocks, style, format, copy and paste and link away.

Posted By

Richard Whitmer

Posted On

August 18, 2017