Page Comparison

...

The editors functions are listed below.

...

Going from left to right, the order of the editor functions is listed below. Each of the editors functions are described in the sections that follow.

1. Undo | Redo

2. Remove Formatting

3. Bold, Italics, Bullet List, Ordered List

4. Headings

5. Styles

6. Horizontal Rule

7. Anchors

8. Links

9. Special Characters

10. Find/Replace

11. Tables

12. Add Image in Body Copy

13. Upload Image

14. View HTML Source

15. Toggle Full Screen

Each of the editors functions are described below.

2.1) Undo | Redo

Allows you to undo or redo any edit you make to the body copy block.

...

Allows you to add bold and italics content as well as bullet and ordered lists.

A Note About Lists

There are two kinds of lists - bulleted and numbered lists and they serve different purposes.

Numbered lists should be used when the order of completion is important. For example, if you are doing a reverse sear on a steak, you need to slow cook the steak before you but it on high heat to sear the outside. The list would look something like this:

1. Heat the oven to 250 F;

2. Dry the steak surface and add any seasonings like salt and/or pepper;

3. Place the steak in an oven proof pan for 15-20 minutes. You’ll want the steak to be about 30 degrees lower than the desired serving temperature;

4. Sear the steak. Put it on a hot grill or in a hot skillet. Cook for 1-2 minutes on each side and 30-60 seconds on the sides;

5. Baste with butter and add aromatics;

6. Let it rest for 5-10 minutes;

7. Serve

8. Congratulate yourself on cooking a most delectable steak.

A bulleted list is used when it doesn’t matter what comes first or last. A simple example might be a packing list:

• charging cords and plugs;

• socks;

• shirts;

• slacks;

• toiletries and medications;

• extra pair of eye glasses;

2.4) Headings

Allows you to add headings to your content. All webpages follow a standard convention of ranking of headings from H1 to H6. The Page Title (the most important element) is the H1. If you include heading/subheadings in the page content, you would start with H2 and then use H3-H6 for additional sub-headings.

2.5) Styles

The styles drop down menu allows you apply custom font styles to your content. This is useful if you wish to include lead paragraphs (slightly larger font size for the intro paragraph) or pull quotes (a quote pulled from the content) to your body content.

...

Anchor are internal links within the body content of a page that allow you link jump to that a section of the page. Anchors are typically placed at the beginning of the section heading or paragraph that you want visitors 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:

...

You will know you've successfully created an anchor when you see a red flagImage Addedappear in the Copy Editor. This red flag will not be visible to the public and is intended to help remind you of its presence while editing.  If . Clicking on the red flag will display the anchor tag id. If you need to edit the anchor name, you can click on that flag and the Anchor dialog will reopen.

Info

Using an Anchor Tag After you’ve created an anchor link somewhere in the body of your page, click the red flag Image Added to open the Anchor dialog. Image Added Using the anchor tag on the same page To use the anchor on the page that you’re currently editing, click on the link and then the Edit Link buttonon the dialog. Paste in #your-anchor, or #Definitions in the example below. Image Added In the Link URL field, add the anchor following a pound (#) symbol. For example, our id of Definitions would be entered as #Definitions. Image Added Using the anchor tag on a different page To use the anchor on a different page than the one you’re currently editing, append the id -- #Definitions in our case – to the end of that page’s url, creating something like swarthmore.edu/my-example-site/my-example-page#Definitions or /node/100057#Definitions, if using the Drupal path as the URL. This link can then be pasted in the Link URL field of any link on your page.

2.8) Links

Adding links to other webpages or other content is one of the most common tasks you’ll be doing when creating webpages. The most important think to remember about a link is the text of that link. Make sure it is meaningful and lets a visitor know a little about what will happen when they visit that link. Visit Unlock the Power of Meaningful Links to learn more. Here are some examples of informative and uninformative link text:

2.8.1) Linking to another webpage in Drupal

...

1. After selecting the page you wish to click to, the link editor will switch back the minimized view. In place of the page name, you will see a reference like this /node/######. This is normal. This is how Drupal keeps track of internal links.

2. Click the checkmark to save your changes or the X to cancel.

...

2.8.4 Creating a link using an URL

...

Info
Note: It is recommended that when linking to an external website (ie not at http://swarthmore.edu ) or to a document, that you have the link open in a new window/tab located under the advanced options.

2.8.5

...

Linking to a document

1. You add a link to a document. Select the text you wish to become a link. Always include the file type to let people know that the link points to a file and not a website. For example, add [pdf] for a pdf file.
   

   Image RemovedImage Added

2. Click the Link to Document Button to add a new document (or select) a existing document that has been previously uploaded to Drupal

3. It is recommended always have PDFS (or other documents) open in a new tab. You can control whether a link opens in a new tab, by clicking the Advanced tab

4. Under the Advanced tab, slide the toggle to green to have the link open in a new window.

...

1. 
   

   Image Added

How the “Link to Document” works

Clicking the Link to Document Button will open a new window that allows you upload a new document to Drupal or select an existing document.

...

1. Select Document - will display all the documents that has been previously uploaded into Drupal

...

1. Upload Document - will allow you upload a new document

...

1. Filename - lets you search the documents folder

...

1. Name - allows you sort the folder by filename

...

1. Created - allows you sort the folder by when it was uploaded.

...

1. Radio Button- choose the the file you wish make become a link.

...

1. Select Document - save your choice. You will then be returned to the previous window.

...

Once the document is selected:

1. The name of the file you selected will appear in the Link URL field

2. Click the green check mark to add the link in Drupal.

...

2.8.6 Edit or remove a link

1. To edit or remove a link, click the link. The link editor window will appear.

2. You can select the pencil icon to edit an existing link

3. Or the paperclip X icon to remove the link.

...

2.9) Special Characters

This function allows you to add special characters (a,e,i,o,u with accents and other marks). This is most common for foreign words and names that might appear on the site

...

Use this function to add table content to your webpage. Ideally, tables are created to share data e.g. dates and times of a train schedule. Avoid using tables to control look and feel.

1. You first select the number of rows and columns using the matrix. Remember to include a column or row for table headings (see WebAims article on tables to learn more.)

...

2. Add your column or row headings.

3. Then you add your data.
   

   

2.12) Add Image

Visit 6.2) Adding an Image in the Body Copy to learn more about adding an image to the body copy

2.13) Upload Image

Allows you upload images directly to Drupal.

2.14) HTML Source

Clicking the HTML Source button will display the underlying HTML responsible for rendering the text formatting, links, images, and other elements that appear on the page. Editors who are comfortable working with HTML may find this functionality useful for troubleshooting, however it is not necessary for the general editing of content.

...