Drupal - Basic: Flex Basic WYSIWYG

Flexible Content Items

In our first article about Flexible Content Items, we discussed a general overview of what Flexible Content Items are, how to use them and where to find them. 

In this article, we will talk exclusively about the WYSIWYG (What You See Is What You Get) editor that you can add to just about any content type by choosing the "Add WYSIWYG" option under the Flexible Content area in the edit screen.

This article covers basic operations within the WYSIWYG.

WYSIWYG

A typical WYSIWYG (What You See Is What You Get) editor that gives you the ability to

• Embed images
• Embed videos
• Embed tables
• Blockquotes
• Make links
• Make primary buttons and secondary buttons out of links
• Link to content on the site by title instead of URL.
• You can also upload files there (there will be a pop-up window that has Help Text near the Upload File button that says”Use the button above to upload a document in a new tab. Once you add the document, close that tab and return to this screen and search for your document in the URL field.”)
• And all the other things a typical WYSIWYG can do

WYSIWYG toolbar

Read about basic text editor options.

This section discusses basic formatting and the WYSIWYG toolbar buttons. 

Hover over a button to see a description of the button, or review the options below.

Click the down arrow on the Formatting to see the list of available options.  Please note that there are additional formatting options when text has been made into a link. Paragraph formatting options allow you to set normal text or headings.  Links can be formatted for Primary or Secondary buttons. Other font and style options are set by the College template and cannot be changed here.

Left to right: Bold, Italic

Left to right: Link, Unlink

Left to right: Insert/Remove Bulleted List,  Insert/Remove Numbered List

 Left to right: Image, Video, Table, Blockquote, Insert Horizontal Line.

Note: Tables should be used only for tabular data, not for layout purposes. See the Accessibility Guide for details.

 Left to right: Align left, Center, Align Right, Justify

 Left to right: Remove Format, Set Language, Source, Maximize

Back to Top ^

WYSIWYG Links

Learn about inserting links.

This section discusses adding links, adding link styles like buttons as well as linking emails and removing links. 

Adding a link:

Searching for content by title. For internal www.brynmawr.edu links, the title search is the recommended and best approach

When you select the title you want

Drupal will put in the Drupal-specific relative URL so Drupal can find it for the user later when they click on the link:

Once you’ve made your selection, click the save in the popup window to return to the normal WYSIWYG.

If you need your link to be outside of our website, you can also use the Link Icon to achieve this.

Simply type your text and highlight it. Then click the Link icon.

This will open the Linkit Popup window where you can type the full address of the external URL, please note that you will need to put in a full external URL into the link field but it must begin with either http:// or https://

Once you’ve typed in the full external URL, click the save button in the popup window to return to the normal WYSIWYG.

Links as Buttons

Now you can highlight the text link and get to apply one of two styles to it, Primary Button or Secondary Button. You could also just let it be link text, if it is just part of a paragraph.

The nice part is that you can see the style for either button right in the WYSIWYG:

Linking to a specific part of a page: 

These links are called “anchor links.”

One last note on links is making an anchor link. In order to do so you would need to set the anchor name and then link to it.  There are two ways of doing it, on, using the Anchor Link Flag icon, and one by manually placing the anchor in the code.

To add an anchor link to a page using the Flag icon, click the flag icon.

Choose a name for your anchor (example: “target”).

The address of your anchor will then be  “#AnchorName”. For example, “#target”.

Drupal will tell you that it couldn’t find any suggestions for that text so it will use it as is, which is exactly what we want.

Press Save in the pop-up to return to the WYSIWYG.

Manually setting the anchor link:

In this example we will manually place the anchor in the code. Here we have some text that will link to a table. First, we need to set the anchor name.  We do this by clicking the source icon in the toolbar and scrolling down in the code until we get to the area in which we want to add the anchor. Here we will place our cursor and type <a name=”tableJump”></a>

Then, click on the source icon again to return to the WYSIWYG view. Once we see just the text and not code, we will link the text to that anchor name by typing the text, highlighting it, clicking the link icon in the toolbar and typing the anchor name with a preceding #, like so

Drupal will tell you that it couldn’t find any suggestions for that text so it will use it as is, which is exactly what we want.

Press Save in the pop-up to return to the WYSIWYG.

Remove links

Remove links by highlighting them and clicking the chain link with x icon.

Linking to documents

Linking to an email address:

Simply type the email address in the WYSIWYG. Drupal will convert the email address to a link upon save.

Back to Top ^

WYSIWYG Images and Videos

Learn to add images and videos in the WYSIWYG

This section discusses adding image and videos within the WYSIWYG editor. 

The other things that are improved or different are how you can embed an image or video, and also how a blockquote looks on the actual page. To see how to upload new Videos and how to upload new Images, please read our Media article.

Add an image

To add an image, simply place your cursor where you want the image to appear and then click the image icon in the toolbar.   This will give you a pop-up to select a new image for upload or select one that is already in the Media Library.  In this example we are using one that is already in the Media Library.

You will be able to select the style the image receives as it is appearing in the WYSIWYG area of the page.  You can have it float right or left or take up the width of the WYSIWYG area.

You can scroll down in this popup window to create a caption or just have the image appear on its own.

When you are satisfied with all the selections you have made in the popup window to embed the media item, you can press the Embed button

If you realized you needed to edit the image, you can right-click on it within the WYSIWYG and select Edit Image.  Double clicking on the media object also brings up the edit screen.  This will bring you back to the Embed Media Item popup window so you can amend your selections.

Back to Top ^

Embed a Video (YouTube or Vimeo)

This feature is limited to only YouTube or Vimeo videos. If you wish to embed a Panapto video, please see our Embed Other Content Items instructions.

To embed a video in the WYSIWYG, you would place your cursor where you want the video to appear and then click the video icon in the toolbar

This will give you a popup to either select a video in the Media Library or Add a new one

In this example I’m just picking one in the Media Library.  Make sure to scroll down in the popup window and then click Embed button.

Once you click Embed, Drupal will ask you to make sure you picked the correct one. If you are satisfied with your selection, Click Next. This will give you a popup to add a caption to the video, if you’d like.   Whether you add a caption or not, you will need to click the Embed button to complete the process of embedding the video

Back to Top ^

WYSIWYG Blockquote

Learn how to add a blockquote.

This Section discusses how to add a blockquote within the WYSIWYG and how it displays 

To add a blockquote, simply type your text then highlight it and select the quote-marks in the toolbar.  PLEASE NOTE: the blockquote style will NOT just indent it like in the old site, but rather, it will put it in a talk-bubble.

As you can see, when I save my page and look at it, the blockquote appears in a talk-bubble on the right side:

Back to Top ^

WYSIWYG Tables

Learn how to create, edit, and delete tables 

This section discusses how to add, edit, delete tables and how insert-from-Word or  insert-from-Excel. 

You can also create a table in the WYSIWYG by putting your cursor where you want the table to be inserted and pressing the table icon in the WYSIWYG dashboard:

Once clicked, you will get a Table Properties popup window where you can tell it how many rows and columns you want, as well as if there should be table headers, row headers, a caption or summary

Once you are satisfied with the properties you entered, you can hit the OK button

Then you will see the empty table inserted into your text, ready for you to fill out.

Pasting tables from Word or Excel

You can also insert a table and then paste a table from Word into it by highlighting all the cells.  You can also just put your cursor where you want the table to show up and paste the table from Word right there.  Either way, Drupal will popup a message that asks if you’d like the Word extra code to be cleaned up. You should say OK

This puts your data right in the table:

You can also copy some cells from an Excel spreadsheet and paste it right into the WYSIWYG or you can insert a table, highlight all the cells and then paste.  Here is how they look in the WYSIWYG, but they don’t look different in the actual page.

If you need to edit the table properties to, say, add a header row, you can right click to see what things you can do. You can add cells, rows, columns just by hovering over the triangle on the right to see more options. You can go into the table properties to add header row or header column

The rest of the things you can do is very similar to what you are used to with a typical WYSIWYG such as bold, italics, text alignment, and bullet points.

Editing an existing table

To make your table easier to edit, right click on the table and select "Table Properties," then change Border Size to 1.

Add or delete rows by right clicking on the table and using the row menu.

If you are adding content from another source, paste content into one cell at a time, or type the content into Drupal directly, for best results. It is difficult to paste from a table in Word or other sources and get content into the correct cells.

To edit the properties of your table to add headers or other elements, right click (ctrl+click on a Mac) on the table and select "Table Properties."

This will have a Table Properties modal popup. This is where you can set things like headers and the number of rows and columns.

Select which rows should be headers (e.g. First Row). Row and column headers are recommended for easier reading, and for accessibility to users of screen reading software.

Back to Top ^

Horizontal Rule

The <hr> element defines a thematic break in an HTML page (e.g. a shift of topic) and is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

We now have the ability to make our Horizontal Rule in the WYSIWYG get the branded color of our website.

Follow these simple instructions to make your Horizontal Rule go from a thin black line to a thicker, more colorful one with more space before and after it to help define it better.

TO SELECT the HR for styling: 

1. add a new Horizontal Rule (or HR) to your WYSIWYG content by putting your cursor at the end of the line of text, hitting the enter key and then pressing the Horizontal Rule button in the toolbar.
   
   

   cursor placement in order to add the Horizontal Rule (HR) by pressing the toolbar button.

2. put your cursor at the beginning of the line of text immediately following the HR
   
   

   Plain horizontal rule (HR) and the cursor position after you added the HR.

3. press the up-arrow on your keyboard once - this will have the cursor now be at the beginning of the HR

   
   

   cursor position after you press the up arrow
   
   

4. then, go up to the dropdown Styles in the left part of the toolbar
   
   

   Plain Horizontal Rule (HR) has been selected because you can see the Branded HR style in the dropdown.

   
   

5. you should see Branded HR, click on that. 

   1. If you don’t see it, that means the HR wasn’t selected properly.

   2. try the following: 

      put your cursor at the beginning of the line of text immediately following the HR
      press the up-arrow on your keyboard once - this will have the cursor now be at the beginning of the HR
      put your mouse-pointer at the end of the HR – BUT DON’T CLICK yet
      Hold the shift-key down and then click - this will select the HR as it is between where your cursor began and where you clicked
      you WILL NOT see any highlighting of the HR - you just have to have faith that you selected it
      then, go up to the dropdown Styles in the left part of the toolbar

6. The HR should turn seafoam

   Horizontal Rule (HR) in the branded seafoam color
   
   

Here is how both the plain and the Branded HR looks on the page:

Plain and Branded Horizontal Rule (HR) element

More Flex Articles

Please see the following Articles for how to use the following Flexible Content Items. 

• FLEX: Basic -   WYSIWYG (basic, links, tables, blockquotes and images & videos from library)
• FLEX:  Basic 2 - Accordion, Callout, Carousel, Contact, Embed, Social Media: Callout, Special List: Large,  Special List: Small 
• FLEX: Intermediate A - WYSIWYG (Video), Columns, Feature: Grid, Image Gallery, Image List
• FLEX: Intermediate B -  People: List, Social Media: Connect, Feature: Large, Feature: Medium, Feature: Quote, Image Detail: Large
• FLEX: Advanced - Event 3-up, News 3-up, News & Contact, Story 1-up, Story 3-up, Announcement 4-up
• FLEX: Special - Slide: Homepage Hero, Homepage Feature: Large, Homepage Feature: Medium, Homepage Feature: Story, Course Code, Description Code, Donor List

As with anything on the site, if you are unsure what the item is, how it looks or how to best utilize it, please see our sample pages Basic Page with all content and News article with all content or reach out to Communications for guidance at communications@brynmawr.edu.

Please note, there are corresponding training videos available that cover some of the items in these articles. Some items may require increased permission levels and special training. Please reach out to Communications for guidance at communications@brynmawr.edu.

Back to Top ^