Formatting Content

Formatting Content

Formatting Content

Jump to...

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").

editing bar

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

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

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

  • blockquote 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.

  • ul 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>.

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

  • link Link - This brings up modal that allows you to link highlighted text to somewhere else on your or another website. The first field is a search field that scans content and files on your site by title. If you start typing the title of the page to which you wish to link, this field will offer suggestions. The second 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 (e.g. http://google.com) because Drupal will automatically link these for you.

  • Increase/Decrease indent - This is standard word processing formatting.

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

  • paste from word 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.

  • Demo Create a Table IconInsert/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>.

    • Demo Documentation - Insert/Edit 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

 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

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 render 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.

  • Telephone links -if a phone number is properly wrapped in telephone link tags, then clicking on it on a cellular device will initate a phone call. These kinds of links still need to be coded by the content editor. To do so, click Disable rich-text at the bottom of your text body area, find the telephone number, and wrap it in the proper HTML tags. A properly marked up phone number will look like:

  • <a href="tel:12223334444">(222) 333-4444</a>

  • Anchor links - these are links to other areas on the page, and can be added by disabling rich-text or 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

MyLO FAQ Category: