ASU Web Community

Input content with the rich-text editor

Most sites will have a rich-text editor enabled. The rich-text editor makes text entry easier and is similar to using MS Word. If rich-text is enabled for your site, fields such as the body field will have a word processing toolbar.

Rich text toolbar
Rich-text toolbar

  • Clicking on the question icon Help icon will bring up the editor's popup help panel.
  • You also can choose to enable or disable the rich-text editor by editing your user profile.

Text

Most sites now style text separately in CSS (cascading style sheet) files. It is strongly recommended to not add styling information into your text. Examples of styling information include those controlling font appearance or spacing:

&lt;font style="15px arial bold"&gt;<br />
&lt;font-family="arial" size="4" color="red"&gt;<br />
&lt;p&gt; &lt;/p&gt;

Instead, use the buttons on the rich-text toolbar, or switch to HTML format and input only HTML tags (see Input content as HTML.

Bold and Italics

Highlight the text you want to change, and choose the bold  icon or italics Link icon icon.

Lists

Highlight the text you want to change, and choose the numbered list Link icon or bulleted list Link icon icon.

Paragraphs

To create a paragraph, add a line of space between text by tapping the Return key twice.

Headings

Highlight the text you want to change, and choose the header level from the "Format" drop-down menu. On most sites, body content headers begin at h2 or h3, reserving higher level heads for page and site titles.

Images

To insert a photo, move your cursor to the spot in your text where you want the image to be placed.

  1. Click on the picture icon Graphic icon.
  2. In the popup, click on the browse icon Browse icon.
  3. Another popup will appear. Click the "Browse" button.
  4. Find the image you want to upload on your hard drive. Highlight it and choose "Open."
  5. Click "Upload file" on the popup panel.
  6. If the upload is successful, at the top of the popup panel you will see the name of your file. Click on the "add" link under "Operations."
  7. You can add a description, alignment, dimensions, borders, and vertical and horizontal space.
  8. Click the "Insert" button to place the image in your text.

Links

For external links (links to a site or page outside your web site), use the full URL. For instance:

http://asu.edu/hr<br />
http://www.cnn.com

To link to pages within your Drupal site, you do not need to use the full URL. For instance:

node/121<br />
contact<br />
inputting-content-rich-text-editor

  • To insert a simple link, click on the anchor icon Anchor icon.
  • To insert linked text:
    • Type some text, such as Tuition Fees Schedules.
    • Highlight the text you want to be clickable.
    • On the toolbar, click the link icon Link icon .
    • Type in the URL.
    • Click insert.