Jump to...

• The Button Options
• The Drop List Options
• Format
• Styles
• About Adding Links
• Troubleshooting

MyLO offers a simple visual editor for formatting page text. This is often referred to as a WYSIWYG (pronounced "whizz-i-wig", for "what you see is what you get").

To use the formatting buttons, the text you want to format must be highlighted in your text area (much like in a typical word processor). You can toggle the functionality on and off by selecting the text, and then selecting the editing function you desire.

THE BUTTON OPTIONS

• Bold (strong text) - for making highlighted text bold. Uses the HTML tag <strong>.

• Italic (emphasized text) - for making highlighted text italic. Uses the HTML tag <em>.

• Blockquote - use this when including a quote in your page. This markup has specific semantic meaning, and should not be used for anything other than quotes.

• Bulleted list - creates a list much like the one used for describing the buttons. Each paragraph return starts a new list item. Uses the HTML tags <ul> (unordered list) and <li>.

• Numbered list - creates a numbered list. Each paragraph return starts a new list item. Uses the HTML tags <ol> (ordered list) and <li>.

•  Insert/Edit Link - This brings up a small window that allows you to link highlighted text to somewhere else on your or another website. The first field is for an absolute URL to an external site. Note: you do not need to link email addresses or URLs that are fully written out (absolute URLs, e.g. http://google.com) because MyLO will automatically link these for you.

•  Link to content - This brings up a modal that allows the same functions as above and more. The first section is for adding an absolute URL to an external site, just like Insert/Edit Link. The second section is a search field that scans content on your site by title. If you start typing the title of the page to which you wish to link, you may also choose the type of content, then click Apply to conduct the search. You can also use the pager buttons at the bottom of the list to sift through all published content within your site.

•  Increase/Decrease indent - This is standard word processing formatting. These are required to use when indenting bulleted or numbered lists.

•  Paste from text - this toggles the paste mode to accept plain text.

• Paste from word - word processors such as Microsoft Word use extensive invisible markup to create the complex formatting you see on your word documents, and this markup can become ugly when rendered on a web page. Ideally, content editors will use the formatting tools in the text editor on the site to format content. If they choose to paste content from word, however, the Paste from word tool will help remove as much of the bad word processor formatting as possible. Note: see Troubleshooting below for more information.

•  Insert/Edit table - You can create a brand new table or make edits to an existing one. The minimum specifications to create a table are number of rows and columns. HTML uses <table border="0"><tbody><tr><td>row 1/column 1 text</td><td>row 1/column 2 text</td></tr><tr><td>row 2/column 1 text</td><td>row 2/column 2 text</td></tr></tbody></table>.

•  Editing options - Once you insert a table into the Body, these options will become available: (from left to right) Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, & Merge Table Cells.

THE DROP LIST OPTIONS

Format

Block formats - this drop list includes <div> and <p> tags, which can be comfortably used by those who are familiar with basic HTML if desired. The more important options in this drop list are the header options: Header 2 <h2>, Header 3 <h3> and Header 4 <h4>. See MyLO Styles and Options for examples of how the headers look in the default MyLO theme.

Styles

Styles - styles selected from this drop down list will apply to whatever text you have highlighted in your text editor when selecting the style. 

See MyLO Styles and Options for examples of how the styles look in the default MyLO theme.

ABOUT ADDING LINKS

There are five kinds of links you might add to your page:

• Relative (internal) links - these are links to other content on your site. These links will typically not contain the full URL, just in case your site's URL ever changes. When using the link tool to add these links, you can usually search for the content to which you wish to link by typing the title of the content you are linking to. Relative URLs will typically look like this: /node/102 or /about/friends.

• Absolute (external) links - these are links to other sites and contain the entire path, e.g. http://librarysite.chillco.com/about/about-librarysite or http://google.com.

• Email links - if you write an email address into the content, Drupal will activate it as an email link for the user. The user can then click on the email address to open their email client of choice and send a message. Learn more about how emails are protected on the site.

• Telephone links - if a phone number is properly linked, then clicking on it on a cellular device will initiate a phone call. These kinds of links still need to be coded by the content editor. To do so, click one of the linking tools in the toolbar, and type the telephone number into the Link URL field with the proper HTML tag. A properly linked phone number's Link URL field will look like:

• tel:12223334444

• Anchor links - these are links to other areas on the page, and can be added by using the anchor tool and linking tools together through the toolbar (follow this link to Create an Anchor Link documentation). An anchor link has two parts: the link, and the destination of the link. 

• The destinaton will look like this:
• <a name="name-of-destination" />
• Note that there are no spaces or unusual characters in the name.
• The link that takes the user to the destination will look like:
• <a href="#name-of-destination">Words the user will see</a>
• Note the # before name-of-destination in the a tag.

TROUBLESHOOTING

Ninety percent of the complications with the visual editor come from pasting from a word processor. The rest are just part of the challenge of getting the formatting to look exactly the way you want it to look. 

Back to top