We are an IT provider that believes in your mission & measures our success by your impact

Hints and Tips for Adding Content to Your Website

Using a WYSIWYG Editor: Hints and Tips for Adding Content to Your Site

Over the last several years, Content Management Systems (CMSs) have come a long way. Instead of typing plain text (or HTML) into a box, we now have an editor that looks similar to your word processor. The editor provides standard word processing features like Bold, Italic, Center Justified and much more. However, despite the similar look and feel there are some key differences that can make life difficult. Listed below are my top 5 tips to make your life easier.

The most common WYSIWYG editor that we use is TinyMCE. These tips are focused toward this editor but may also be applicable to others.

1. Copy and Paste.

In a word processor this is a trivial, yet important, function. It is natural to extend this to the online editor. However, doing so without taking some precautions can cause some large problems.

When you write text in Microsoft Word, for example, you see your text appear on the screen. You can then apply different style changes, like font size and colour, and the results are displayed on the screen. What you don't see is all the hidden code that Word uses to make these changes.

When you copy something from Word this hidden code comes with it. This hidden code contains instructions that are not compatible with web browsers. This can result in random display behaviour, in addition to possibly causing the site to break.

Luckily, there are a few different options for dealing with this.

Option 1:

  • Open up windows Notepad (or any TEXT ONLY editor).
  • Paste in the text from Word.
  • Then copy it from Notepad
  • Paste it into the online editor.

Option 2:

  • Paste the text directly into the online editor.
  • Within the editor, highlight the pasted text and click the "Remove Formatting" button (looks like an eraser).  Please note: This button does not always exist. It depends on how your web developer setup the editor's options.

Option 3:

  • Click the button "Paste from Word" (if available).
  • A new box will pop up for you to paste your text from Word.
  • This will not try to strip out all formatting. Instead, it will try to convert it to HTML in an effort to preserve its layout.  Please note: This is prone to errors and I try not to use it.

2. Content within the editor may not look the same as it does outside the editor.

Sometimes a situation occurs where you have written and formatted text within the online editor but, when saved, it looks different than it did in the editor. When the site was created, there were styling rules put in place that dictate how certain elements are to be displayed. Sometimes these rules can get mixed up with the ones the editor created. Check to see if your Content Management Software (ie. Drupal) has the ability to set the editor to use the system's stylesheet. This will allow the editor to attempt to display formatting as it would look on the site. Not all CMSs have this ability. Additional plug-ins may be required. Your web developer will be able to help you with this.

3. Line break vs. paragraph space.

Editors are often configured to start a new paragraph when you hit the ENTER key. This will start a new paragraph with a line space between them. However, sometimes we just want to have a line break. A line break will simply move the cursor to the next line within the current paragraph. To do this hold down the SHIFT key and press ENTER. Just remember, line breaks are not intended to separate paragraphs.

4. Working with Fonts and styles.

When we work with word processing software like Microsoft Word, we are used to being in full control of design elements like fonts and font sizes. Some online editors (depending on how they're configured) give you these choices, while others do not. Of the ones that do, you may be very restricted. This is because the site as a whole has a set of design rules applied to give consistency to the design. When you write your content for your site it should look like it belongs. Being consistent with your heading and paragraph font size and shape creates a professional looking site.

5. Embedding custom HTML code.

The online editor may be configured to allow you to enter custom HTML code. This is useful in situations where you may need to insert something like a YouTube video which requires some custom HTML code. Keep in mind though; this feature is for advanced users only. Inserting HTML code that is incorrect, or broken in some way, can lead to a broken website, or even security implications. Some online editors are configured to filter out most tags and only allow some common ones. If your editor has this option enabled you should see a button that is marked "HTML". Clicking this button will bring up a window with the code view of your content entered so far. If this looks foreign, or otherwise scary, then it's a good indication that it's time to ask your Web Developer for a helping hand.

Creating web content has come a long way. Online editors have a wide variety of options, but they require the expertise of a Web Developer to configure their behaviour. If you need some specific functionality from your online editor feel free to contact us.



Content Type: 

At PeaceWorks, we know how to set up your organization with technology that drives your mission. Together, we define a technology vision for your organization and recommend the best ways to support that vision.

Find Out More →

We provide effective and affordable migrations, installations and upgrades that better manage your infrastructure. We focus on solutions that meet your needs, not solutions that are unnecessary or outside of your budget.

Find Out More →

We will design and create a new or enhanced on-line presence. We work with you through the entire process to ensure you get exactly what you need for the present, as well as the future. We build our websites with Search Engine Optimization (SEO) and accessibility practices, customizing as required.

Find Out More →

We collaborate with you to create solutions that turn ideas and data into information that you can use, analyze and distribute.  We build the technology solutions that equip you to better engage and manage your staff, your clients, your volunteers, and your donors.  We simplify data collection, intelligence and management.

Find Out More →

PeaceWorks provides the management and sale of hardware and software solutions. We always discuss your needs and provide you with the most preferable options.

Find Out More →

About PeaceWorks

PeaceWorks provides first-rate technology solutions that enable organizations to achieve their mission with increased ease and efficiency. We focus on genuine client-focused relationships, connecting client needs with sustainable and reliable technology solutions.
Learn More


101-554 Parkside Drive
Waterloo, Ontario
N2L 5Z4

Phone: 519.725.7875
Fax: 519.725.4220

Email Us


100-62 Hargrave Street
Winnipeg, Manitoba
R3C 1N1

Phone: 204.480.0314
Fax: 204.415.2051

Email Us

Connect With Us

Sign Up for Our Newsletter