Using the Editor

This page gives you hints about using the editor that comes up for modifying fields of long text (like this handbook page if you click the Edit button). Sometimes these editors are called WYSIWYG editors for What You See Is What You Get, but that's not really true. The styles used in the editor and when they're shown on a page are slightly different so what you see in the editor is only approximately what you get on the page.

Most of the icons on the toolbar are self-explanatory and the same as they are in Microsoft Word, Google Docs or other word processors. If you hover over an icon in the toolbar with your pointer, it will show its name in a pop-up called a tooltip. If you don't see the icons, look for a little triangle icon in the top right that has the tooltip Expand Toolbar.

We won't go through every toolbar icon on this page, just the ones that need some additional explanation.

Use the Practice Page to try out any of the things described on this page.

Bold, Italic and Strike-Through

These icons operate on the selected text, so if you want to make a word bold, first highlight it by dragging your mouse over the word (or double clicking the word as a shortcut) and then click the Bold icon (or CTRL-b as a shortcut). These are also toggles, which means, for example, clicking the Bold icon on selected text that's already bold text will put it back to normal.

You'll notice there's no underline icon. That's because underlined words on a web page are usually hyperlinks and you'll confuse people if you underline text. (So don't put underlines in using the HTML Editor link under the editor field either.) Using italics is more correct for things like book titles anyway.

Adding a Picture

  • The easiest way to add a picture is with the Add media icon in the toolbar.
  • Go to the page where you want to add the picture and click the Edit tab.
  • Click with your mouse where you want your image to appear.
  • Click the Add media icon.

  • Use the default Upload tab to choose a file from your computer. When you hit Submit it will be uploaded to Dollation. (You'll get to choose from some built-in sizes and supply "alt" text which is used by screen readers and in other cases where images are turned off.)
  • Or use the Web tab to import a file from an external site, like Flickr.
  • Or use the Library tab to choose a file you've uploaded before (so you don't make multiple copies of it on the server).
  • Another way to add a picture into a long text field is with the Image icon (see above). This doesn't allow you to upload a new picture, it just allows you to insert an existing picture (either on Dollation or somewhere else on the web). Sometimes this is easier than finding the picture in the Add media Library if you've uploaded a lot of pictures.
    • Add the picture to one of your albums or find the picture you want either on Dollation or somewhere else on the web.
    • Right click on the picture and choose "Copy Image Location". (The actual label of the menu choice may vary by browser.)
    • Go to the edit page where you want to insert the picture and click where you want the image to appear.
    • Click the Image icon.
    • Paste the image location you copied into the URL field and click OK.
  • After you've added a picture, using either method, you can adjust the size, add some white space around it, or center it or align it left or right. Just double click on the picture and a dialog will pop up that lets you do all those things and more. If you're using Firefox, to just resize, click on the picture once and drag handles will appear for you to resize the picture with your mouse.

Copying and Pasting Text from Other Sources

When you paste something into an Editor field (like the Description of a product) be careful not to paste the styles too (like font and text color). This will make your text hard to read on Dollation or just not fit the style of the rest of the pages. You can paste using the Paste as plain text icon, or you can select the text you already pasted (hint: CTRL-a selects all) and use the Remove Format icon which looks like an eraser (see below).

Use Headings

Your pages will be more readable if you add headings (like the text above that says "Use Headings"). To make a heading, select it and choose the style you want from the Paragraph Format drop-down (see above). Start with Heading 2 and use the others if necessary like you'd do an outline. (For instance, don't skip right to Heading 4 if you're not below a Heading 3.)

Don't just highlight text and change the font or make it bold to make things that look like headings. Our heading appearance comes from a style sheet, so using the drop-down makes it so all headings look the same across the entire website. (And if we decide to change the color scheme, which will happen, this allows it to take effect everywhere.)

Similarly, don't fight the default line spacing between paragraphs, lists or headings. These are controlled by the stylesheet and all you can do is put in blank lines if you really want more whitespace. Also, don't overuse the Font Name, Font Size, Text Color and Background Color icons or the Align Left/Right or Center icons. These are there for things like Event descriptions where you might want to get fancy with the text and layout to make things look like an invitation, but you should stick with the defaults for most pages so the site looks consistent from page to page.

Use Lists

Numbered lists and bullet lists make your text easier to read. You start a new list using the Insert/Remove List icons in the toolbar. You can use the Increase/Decrease Indent icons to make sub-lists. (Doing nested lists is tricky though, such as putting a bullet list as a child of a numbered list item, so try to avoid that. You might have to read up on doing nested lists in HTML and switch to the HTML Editor using the link below the editor field if you really want to do this.)

If you right click on a list item you can choose List Properties to change things like the bullet style or to restart numbering (depending on the list type).

Add Links

You're editing a web page and one of the cool things about web pages (as opposed to printed media) is that they can have hyperlinks to other pages on the same site or on the web. Select the text you want to make a link and choose the Link icon in the toolbar, then paste an URL into the pop-up. (It's better to copy an URL from a browser address bar and paste rather than type it in because it's easy to make typos in URLs.)

If you type an URL or an email address into the editor, it will automatically be made into a link but it is easier to read if you link the name of the page you're linking to and hide the URL by using the Link pop-up.

Dollation will automatically show whether a hyperlink is to an external page and will open the external page in a new browser tab (by checking to see if the URL starts with http://dollation.com or not) so you don't have to worry about these things when inserting links with the editor.

Use the Spell Checker

It is good to enable the "Spell Check As You Type" feature by clicking on its icon in the toolbar as shown in the image below.

Add new comment

(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Freelinking helps you easily create HTML links. Links take the form of [[indicator:target|Title]]. By default (no indicator): Click to view a local node.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <b> <i>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.