Working with the Editor

Editor toolbar which allows users to manipulate web content.  Each button is explained

To learn more about each individual button on the toolbar, please click on the images below.

The content editor above has the most common functions you need when editing webpage content including: formatting text, creating links, importing text, adding/editing images, spell checking, and working with tables. If you are not sure what a particular button does from the graphic alone, hover your mouse over the button for help text.

Note: One significant difference between this editor and our previous editor is how one gets to the properties of items such as tables and lists. In this case, once the element has been created, you will need to right-click to access the properties (on Mac's this is control + click. Apple has great information about customizing your Apple mouse/trackpad).

Below is description of each of the functions. To get there quickly click on the button you want to know more about:

format text to be bold or italic Align test to the left, center, right or fully justified
Indent block elements right or left create a block quote
Create bulleted or numbered lists
select list to choose paragraphs, headings and other block elements create subscripts and superscripts with the buttons in the group
create links and anchors with this button group create a horizontal line
undo, redo, search, find and replace
add images, tables and symbols to content
view the HTML code
Expand the editor to full screengo to the help page

Emphasizing Text

format text to be bold or italicThese are a group of two basic text styles frequently used for emphasis.

To write in bold (i.e. using thicker letters), press the B toolbar button or use the Ctrl + B in Windows, Command + B on a Mac, keyboard shortcut.

To write in italics (i.e. using slanted letters), press the I toolbar button or use the Ctrl + I for Windows, Command + I on a Mac, keyboard shortcut.

Text Alignment

Align text to the left, center, right or fully justifiedThere are four text alignment options available: left, center, right or fully justified. These are fairly self-explanatory.

Left Alignment

When you align your text left, the paragraph is aligned with the left margin and the text is ragged on the right side. This is usually the default text alignment setting for the languages with left to right direction.

Center

When you center your text, the paragraph is aligned symmetrically along the vertical axis and the text is ragged on both sides. This setting is often used in titles or table cells.

Right

When you align your text right, the paragraph is aligned with the right margin and the text is ragged on the left side. This is usually the default text alignment setting for the languages with right to left direction.

Fully Justified

When you justify your text, the paragraph is aligned with both left and right margins; the text is not ragged on any side. Instead, additional spacing is realized through a flexible amount of space between letters and words that can stretch or contract according to the needs.

Indent Text

Indent block elements right or leftIndentation defines the spacing between the beginning of a block-level element and the left margin or gutter in all languages with left to right text direction. In languages with right to left text direction, indentation defines the spacing between the beginning of the element and the right margin.

Indentation can only be applied to a "block-level element" like:

  • paragraph
    • if the paragraph spans across multiple lines of text, each line will appear at the same indentation level
  • list item, or
  • div element.

Increasing Indentation

The second button in the group increases indentation by pushing the block element to the right (notice the small arrow pointing in that direction) creating a larger gap between the left margin and the start of the element.

Decreasing Indentation

The first button in the group decreases indentation by pushing the block element back to the left (it also has a small arrow pointing in the direction of the indentation).

Block Quote

Block quoteBlock quote is used for longer quotations that are distinguished from the main text by left and right indentation. It is recommended to use this type of formatting when the quoted text consists of several lines or at least 100 words.

To create a block quote, put your cursor at the beginning of the location where you'd like the block to start. If the block quote spans multiple paragraphs, highlight the paragraphs and apply the block quote

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream.

Showing Block Elements

This is a new button we have not had before. It can be a very helpful tool when your page formatting is off and you are having difficulty figuring out what is going on. The tool creates an outline of all the block elements (remember, these are things like paragraphs, bullet lists and div elements). When this button is clicked it will put a subtle outline around each block element and identify the type of HTML element it is.

Note in the example below there is an empty paragraph which I may not have noticed had I not used this tool.

show blocks creates an outline of block elements on a page

Bullets

Create bulleted or numbered listsAs with our previous HTML editor, you can create bulleted or numbered lists in content.

Bulleted Lists

To create a bulleted list choose the first button in this group. To indent children items, use the Indent tool noted above. You can also customize the bullets by right-clicking on the specific list item to access its properties:

  • List item one
  • List item two
    • Child list item
  • List item three

To create a numbered list use the second button in this group. As with bulleted lists, use the indent tool to indent children. You can also choose the style of a particular list item (e.g.. upper/lower Roman numerals, numbers, upper/lower alpha) by putting your mouse on that item and right-clicking.

  1. List item one
  2. List item two
    1. Child list item
  3. List item three

Working with paragraphs, headings, etc.

select list to choose paragraphs, headings and other block elementsThis is a drop-down list used to structure the content of a page to help visitors, search engines, and screen readers organize the information on a page. The drop-down includes all the heading tags, a well as paragraph and div tags.

To change the format of a block item such as converting a paragraph into a heading tag, place your mouse at the beginning of the text and choose the format from the drop-down. Note this change will affect the entire block, not just a piece of that block. If you are uncertain what text the block includes use the "Show Blocks" button to outline all the blocks on the page.

Subscripts and superscript

create subcripts and superscripts with this button grouping

Subscripts and superscripts are most often used in mathematical expressions or footnote references. Subscript is a character that is slightly smaller than the text that surrounds it and is set below the baseline. It is the first button in this set.

Superscript is very similar to subscript only it appears above the baseline. It is often used in mathematical expressions to denote power or the numerator part of a fraction. In normal text superscript often directs a user to a footnote. It is the second button in this set.

Links and Anchors

Just as with our previous editor, create links by using the "chain" icon and break links by using the "broken chain" icon. The process with this editor is a little different. The link text is still highlighted and the "chain" chosen but the options in the link dialog are different. Remember that link text must be meaningful out of context. 

Creating Links

Highlight the text you wish to use as the link text (suggestions for creating meaningful link text); then choose the "chain icon" in the editor and proceed. There are four different options now:

  • Link to a Swarthmore page
  • Link to a URL (e.g.. a non-Swarthmore page) or a document
  • Link to an anchor within the text of this page
  • Link to an email address

Each has its own options as described below.

Link to a Swarthmore pages

To link to an existing (published) Swarthmore page simply start typing the page title in the "Link" area. As you type, Drupal will attempt to auto complete the page title by providing a list of pages containing the word you've started to type.

Link to URL or link to document

To link to a URL, simply copy the URL from the page you want to link to and drop it in the "URL" slot. The dialog will automatically adjust the "Protocol." Under "Target" choose "New Window."

To link to a Document, use the "Browse Documents" button to open the document file browser. Choose your document (or upload it) as you normally would.

Link to an Anchor in the text

To point to an anchor, one has to have been previously created on the page (see instructions for how to do this), choose "Link to an Anchor in the text." Then under "Select an Anchor" choose "By Element Id." Geek info: name and id are usually the same and either will work, but in HTML5 linking via the "name" is not valid markup.

Link an Email

This type of link offers an option we have never had before. In addition to adding an email address you can also add a "Message Subject" and a "Message Body". This could be very useful if you want to know more about which page a user is emailing from or if you want to sort your emails by subject (e.g.. the message subject in the contact block email link could be 'From web contact block", while the message subject within text could be 'Inquiry from Apply to Swarthmore').

Creating Anchors

To create an anchor within the current document press the last button in this grouping. It looks like a flag. Usually an anchor is place at the beginning of heading tag or paragraph of the section you want to jump to. The only requirement is to add a name for the anchor - the name should be one word and contain no spaces. Examples of good anchor names are:

  • creatingAnchors
  • admissionsRequirements
  • required-Docs-FinAid
  • links

You will know you've successfully created an anchor when you see a red flag.  If you need to edit the anchor name, you can click on that flag and the Anchor dialog opens allowing you to make the change.

Horizontal Rule

insert a horizontal rule with this button

Also know as a "horizontal line," this button is used to visually cut pages into parts by creating a line that spans the full width of the document. To create a horizontal rule, add a line break (Shift + Return) or a new paragraph (Return) and choose this button. The horizontal rule will be created in the location of the cursor.

Paste from another application

Paste content using paste as plain text or paste from word

The first button in this set is known as "Paste as Plain Text." It looks like a clipboard with a big "T" on a piece of paper. It is commonly used when you want to paste an already formatted text, but without preserving the formatting.

The second button in the set is known as "Paste from Word." It looks like a clipboard with a big "W" on a piece of paper. It allows you to preserve basic formatting when you paste a text fragment from Microsoft Word.

Paste, cut, copy, clear formatting

paste, cut, copy and clear formatting of the current document

The first button in this set is the "Paste" button. To paste a text fragment, start with cutting it or copying from another source (this could be from another application as well as from within the web page you are editing). Paste using this button.

The second button in this grouping is the "Cut" button. It looks like a pair of open scissors. To cut a text fragment, start with selecting it (put your cursor where you want to begin the cut and drag your mouse to the end of the text fragment). You can then use this button to cut the fragment. You can accomplish the same thing using keyboard shortcuts. On a Windows machine it is ctrl + X, and on a Mac it is Command + X.

The third button in this grouping is the "Copy" button. It looks like two pieces of paper, one slightly offset over the top of another. The process is the same as cutting a text fragment only no text is removed. Keyboard shortcuts will also work. On a Windows machine it is ctrl + C, and on a Mac it is Command + C.

The last button in this grouping is the "Remove Formatting" button. It looks like the underlined capital T with an x subscript. It is an easy way to remove any behind the scenes formatting which may have been inadvertently brought in during a paste operation.

Undo/Redo, Search, Find and Replace

Undo, redo, search, and find and replace with the buttons in this group

The first button in this grouping is the "Undo." It looks like a left-facing curved arrow. It is a quick way to cancel the recently introduced change and restore the document to its previous state. The keyboard shortcut is ctrl + Z on Windows, and Command + Z on a Mac.

The second button in this grouping is the "Redo" button. It looks like a right-facing curved arrow. It lets you revert the last undo operation. The keyboard shortcut is ctrl + Y on a Windows machine, and Command + Y on a Mac.

The third button in this grouping is the "Search" button. It looks like a magnifying glass and allows you to search for a phrase or word.

The fourth and last button in this grouping is the "Find and Replace" button. It looks like an "a" being replaced by a "b" or a "b" being replaced by an "a." Because these are so closely related there is one tabbed dialog box where you can chose to "Find" or to "Replace" a particular word or phrase which match using various criteria in the dialog box. You can also perform batch changes by finding and replacing multiple occurrences of a phrase with just one mouse click instead of manually finding and modifying each one of them.

Note: The default option is to "Match Cyclic," which means the process will start at where the cursor location is and when it reaches the bottom of the document, it will go to the top and keep going until you reach the cursor location again.

Add Images, tables and symbols

add images, tables and symbols to content

Images

Adding an image with the new editor is very similar to the process of adding an image with the old editor.

To add an image, place the cursor on the location (I'd suggest at the beginning of a paragraph) within the content, choose the "Tree" icon to open the image dialog box.

Next choose "Browse Server," choose an existing image, or upload a new one, and insert it into the content. Make sure you add the "Alternative Text" (this is the descriptive text).

The only other option you need to choose is "Alignment" - choose "Left" or "Right."

Tables

Create table dialogue allows adding headings, captions, table summaries and classsTo create a table use the second button in this grouping to open the table dialog box.

Default Tab

When creating a table you must add HEADING rows or columns and a CAPTION. Both of these fields are critically important - they not only make tables more understandable and readable, they also help persons with disabilities understand what the table is about.

Headings provide a guide for what a particular table column or row is about (e.g.. Course Name, Course Description, Deadlines, Required Documents).

A caption gives a quick high level definition of what the entire table is about (e.g.. 2016 Financial Aid Deadlines, Fall Semester Courses).

If you want to go the extra mile, the SUMMARY field provides a literal description of the table (e.g.. 4 columns, 5 rows, first row is the heading row, headings are Course Number, Course Description, Taught By).

Advanced Tab

the advanced tab of the table dialogue allows you to add predefined table classes

There are two predefined Swarthmore classes you can add to affect the way a table looks: beige and grey. Beige is used primarily for course listings, while gray is used primarily for other informational tables.

Working With Existing Tables

Once inserted into the document, the table can be modified. To edit the table, open the table context menu by right-clicking anywhere in the table.

from with the table, right click to open the table context menu

To delete the whole table and its contents, use the Delete Table option.

When you choose the Table Properties option, the dialog window of the same name will appear. It allows you to change the configuration options that were set when the table was created, except the number of rows and columns which are grayed out.

Additionally the table context menu lets you modify the rows, columns, or particular table cells. This method makes it possible to insert new rows, columns, or cells in specified locations as well as merge and split cells.

Editing Table Rows

The table context menu lets you edit table rows. If you hover your mouse over the Row menu option, further options become available.

insert rows before or after the chosen row or delete the chosen rowBelow is an overview of all Row context menu option elements:

  • Insert Row Before – inserts a new row before the one that contains the cursor.
  • Insert Row After – inserts a new row after the one that contains the cursor.
  • Delete Rows – deletes the row that contains the cursor.

Note that the new editor makes it possible to select multiple table cells by dragging the mouse over them, so an operation like deletion may be applied to many table rows at once.

Editing Table Columns

The table context menu lets you edit table columns. If you hover your mouse over the Column menu option, further options become available.

Below is an overview of all Column context menu option elements:Insert a column before or after the chosen column, or delete it

  • Insert Column Before – inserts a new column before the one that contains the cursor.
  • Insert Column After – inserts a new column after the one that contains the cursor.
  • Delete Columns – deletes a column that contains the cursor.

Note that the new editor makes it possible to select multiple table cells by dragging the mouse over them, so an operation like deletion may be applied to many table columns at once.

Editing Table Cells

The table context menu lets you edit table cells. If you hover your mouse over the Cell menu option, further options become available.

Below is an overview of all Cell context menu option elementsCell dialogue allows inserting new cells before or after, splitting the cell horizontally or vertically, and manipulating the properties of the chosen cell:

  • Insert Cell Before – inserts a new cell before the one that contains the cursor.
  • Insert Cell After – inserts a new cell after the one that contains the cursor.
  • Delete Cells – deletes a cell that contains the cursor.
  • Merge Cells – merges multiple cells into one. This option is only available if two or more cells are selected.
  • Merge Right – merges the selected cell with a cell on its right. The content of both cells becomes joined. This option is only available if no more than one cell is selected.
  • Merge Down – merges the selected cell with a cell located on its bottom. The content of both cells becomes joined. This option is only available if no more than one cell is selected.
  • Split Cell Horizontally – splits the selected cell in two, creating a new cell on its right. The content of the cell appears in the original, left cell. This option is only available if no more than one cell is selected.
  • Split Cell Vertically – splits the selected cell in two, creating a new cell on its bottom. The content of the cell appears in the original, upper cell. This option is only available if no more than one cell is selected.
  • Cell Properties – opens the Cell Properties dialog window that lets you configure cell size, type, color, and content alignment.

Note that the new editor makes it possible to select multiple table cells by dragging the mouse over them, so an operation like deletion or merging may be applied to many table rows at once.

Cell Properties

Table cells in the new editor can be further customized, creating a unique look and feel. Various configuration options can be set in the Cell Properties dialog window that is opened from the table cell context menu.

Below is an overview of all Cell Properties dialog window elements:

  • Cell Type – the type of the table cell — either a normal data cell or a header cell with special formatting.
  • Word Wrap – this setting turns word wrapping of the cell content on and off.
  • Horizontal Alignment – the horizontal alignment of table cell contents. The following options are available: Left, Center, Right.
  • Vertical Alignment – the vertical alignment of table cell contents. The following options are available: Top, Middle, Bottom or Baseline.
Inserting Symbols & Special Characters

The third and last button in this grouping allows you to insert a character which is not part of a regular keyboard.

View the HTML code

view the HTML code

If you ever need to check or manipulate the HTML code, you can use this button. The editor will keep the code in a more readable layout than our previous editor.

Expand/contract the editor

Expand the editor to full screen

This button is used to automatically expand the editor window to fill the browser window or to contract it from full screen back to its default size.

Get Help

go to the help page

If you are not sure what a particular button does or can't remember how to do something this button will take you to the help site and this page in particular.