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.

screenshot wysisyg format optionsscreenshot wysisyg format options for buttons

Left to right: Bold, Italic

screenshot wysisyg toolbar buttons

Left to right: Link, Unlink

screenshot wysisyg toolbar buttons

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

screenshot wysisyg toolbar buttons

 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.

screenshot wysisyg toolbar buttons

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

screenshot wysisyg toolbar buttons

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

screenshot wysisyg toolbar buttons


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:

screenshot wysisyg add link url


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


screenshot wysisyg link title select


When you select the title you want


screenshot wysisyg link finding content


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


screenshot wysisyg link url path


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.


screenshot wysisyg making a link


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://


screenshot wysisyg link url path


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.

screenshot wysisyg make link be a button


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


screenshot wysisyg link as button


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.

screenshot wysisyg toolbar anchor link button


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


screenshot wysisyg anchor link field


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


screenshot wysisyg anchor link url path


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>

screenshot wysisyg source code


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


screenshot wysisyg anchor link


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.

screenshot wysisyg embed image


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.


screenshot wysisyg embed image display option


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


screenshot wysisyg embed image display alignment


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.


screenshot wysisyg edit image

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

screenshot wysisyg


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


screenshot wysisyg embed video


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.


screenshot wysisyg embed video select


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


screenshot wysisyg embed video review

screenshot wysisyg embed video caption


Back to Top ^

WYSIWYG Blockquote

Learn how to add a blockquote.

Please note that blockquotes display in a very different way than you might expect. Read on to learn what it looks like on the page

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.

screenshot wysisyg blockquote


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


screenshot wysisyg blockquote display


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:

screenshot wysisyg


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


screenshot wysisyg table properties

screenshot wysisyg table header options


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


screenshot wysisyg table headers

Note: All properties may be adjusted later by right clicking (ctrl+click on a Mac) on the table and selecting “Table Properties.”

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


screenshot wysisyg table

screenshot wysisyg table

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


screenshot wysisyg table from word


This puts your data right in the table:


screenshot wysisyg table paste


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.


screenshot wysisyg different tables


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


screenshot wysisyg table cells


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.


screenshot wysisyg

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.


screenshot wysisyg table edit


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."


screenshot wysisyg 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.

 

screenshot wysisyg table headers


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.


screenshot wysisyg table header options


Back to Top ^

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

Please note that Flex Advanced and Flex Special items require training and possibly special permission levels.  

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 ^

Still need Drupal help? Have more Drupal questions?

If after reading this article or watching the training videos you still have questions, we can help!

Sign-up for any of our Drupal Drop-ins throughout the year. 

Schedule a Drupal training session for you or your whole department with our Drupal Trainer.

Questions?

If you have any additional questions or problems, don't hesitate to reach out to the Help Desk!

Phone: 610-526-7440 | Library and Help Desk hours
Email: help@brynmawr.edu | Service catalog
Location: Canaday Library 1st floor