Text Editor

How to use the drupal text editor

How to add links to any file type in the media library (pdf, doc, mp3)

The add media button in your text editor allows you insert images and video. But what if you want to add a link to a different kind of media link a PDF, audio file, or word document?

To add links to other kind of media you need to do the following:

  1. Add the media to the media library
  2. Copy the link of the uploaded file
  3. Edit the page that you want to add the link to
  4. Decide where you want to attach your link to (cover photo, image caption, text, etc.)
  5. Click the attach link button within the text editor
Video file

How to center text

There are multiple ways to accomplish any task in drupal. Including text formating. Here are 4 ways to center text (or any other content) starting with the simplest method.

Method 1

Highlight a paragraph and click the text align center button

Video file

Method 2

Select the "center" style. For titles, select the "H3 Center" style

Video file

Method 3

Select "Add Content" from the Additional Content section and add word "centered" to the css class field

Video file

Method 4

Go into the source view and add class="centered" to all of the tags you want to center.

Video file

How to view block formatting and source html tags

Webpages are made up of html markup. If you click the source button you will see these html elements enclosed in <> characters. All html elements have an opening and closing tag. Notice that the closing tag has a forward slash in it.

Here is what the source of a paragraph element looks like.

<p>This paragraph has an opening and closing tag </p>


After clicking the source button you will see these common tags.

<p>paragraph text</p>
<h2>Title of Page</h2>
<h3>Smaller Title</h3>
<h6>Smallest Header</h6>
<li>List Item<li>
<ul><li>Unordered List</li></ul>
<ol><li>Ordered List</li></ol>

The source button looks like this:

Image
source button

 

This is how the elements actually appear.

paragraph text

Title of Page

Smaller Title

Smallest Header
  • Unordered List
  • List item
  • Last list item
  1. Ordered List
  2. List item
  3. Last list item

To view the html blocks, click the show blocks button that looks like this: 
Image
show block button
Video file

 

How to add an orange dotted line

  1. Type two sections of text
  2. Highlight the section you would like to have the orange dotted line above
  3. Select "Dotted" from the Styles dropdown

Note that you can only have one style selected on any block of text. That means if you select the "H3 Center" style, you can't also select the dotted section for that block of text.


Two Paragraphs with Dotted Separator

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus non enim praesent elementum. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Habitant morbi tristique senectus et. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Nec feugiat in fermentum posuere. 

Eu lobortis elementum nibh tellus molestie. Dictum non consectetur a erat nam at lectus urna. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Nunc mattis enim ut tellus. Ultrices tincidunt arcu non sodales. Quam nulla porttitor massa id neque aliquam vestibulum. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Volutpat odio facilisis mauris sit amet massa. Odio pellentesque diam volutpat commodo sed egestas egestas. Purus ut faucibus pulvinar elementum integer enim neque volutpat ac. 

 

Video file