Edit Content in the WYSIWYG
SWT

SJU Web Team

Created Apr 17, 2025

Edit Content in the WYSIWYG

69
    d

Edit Content in the WYSIWYG

3 Steps
1

I'm adding a WYSIWYG component

This is just to get us started so we'll have a WYWIWYG to work on.

I'm adding a WYSIWYG component
2

Click on Add WYSIWYG

Click on Add WYSIWYG
3

Enter the editing area and begin type in some text

Although our components do a good job of allowing you to put a heading on a section, sometimes you'll want a heading to go at the top of a WYSIWYG. It's easy to do.

Enter the editing area and begin type in some text

#

Adding a Heading

4 Steps
4

Highlight the text you want to turn into a heading

Highlight the text you want to turn into a heading
5

Click on Paragraph

Click on Paragraph
6

Select Heading 2 from the dropdown

In most case, you are going to be picking <H2> unless you are creatiung a head that would naturally fall under the same topic as you <H2>, In this case, you'd make it an <H3>.

Select Heading 2 from the dropdown
7

Review the heading in your editor.

Note: The heading in the editor is in a different font and weight from what your heading will look like on your page.

Review the heading in your editor.

#

Msking a Link

7 Steps
8

Let's make a link! Create the text you wish to make a link

Let's make a link! Create the text you wish to make a link
9

Highlight the text

Highlight the text
10

Click on the link icon

Click on the link icon
11

Enter the URL path of your link or the full URL if outside of www.sju.edu

Enter the URL path of your link or the full URL if outside of www.sju.edu
12

Click the green checkmark

Click the green checkmark
13

Save it as a draft to preview

Save it as a draft to preview
14

Review your new H2 heading, content and link.

That link could use some dressing up. What if we wanted to make it a red button?

Review your new H2 heading, content and link.

#

Making a Button in the WYSIWYG Editor

9 Steps
15

Click Edit

Click Edit
16

Click the Edit button on the WYSIWYG component containing your link

Click the Edit button on the WYSIWYG component containing your link
17

Select Full HTML from Text format dropdown

For use to make a red button, this toggle has to be set to Full HTML.

Select Full HTML from Text format dropdown
18

Click Continue

You can you click it without worrying about the warning.

Click Continue
19

Highlight your link text

Highlight your link text
20

Click on Styles

Click on Styles
21

Select Red Button from the dropdown.

Select Red Button from the dropdown.
22

Click on Save to preview

Click on Save to preview
23

Preview your new red button.

It looks OK. But what if we wanted to center it the head and the button?

Preview your new red button.

#

Centering Heading and Buttons in the WYSIWYG Editor

10 Steps
24

Click Edit

Click Edit
25

Click Edit to edit the WYSIWYG component

Click Edit to edit the WYSIWYG component
26

Highlight your heading

Highlight your heading
27

Click on the Text Alignment dropdown

Click on the Text Alignment dropdown
28

Select the Align Center option.

Select the Align Center option.
29

Highlight the text of your button

Highlight the text of your button
30

Click the Text Alignment icon

Click the Text Alignment icon
31

Click the Align Center icon

Click the Align Center icon
32

Click Save to preview your centered heading and red button

What if we wanted to add an image to the WYSIWYG?

Click Save to preview your centered heading and red button
33

Untitled step

#

Adding an Image to the WYSIWYG Editor

8 Steps
34

Click Edit

Click Edit
35

Open your WYSIWYG and click the icon for inserting media

Open your WYSIWYG and click the icon for inserting media
36

Select your image from the pop-up that comes up

You can either choose to upload your own image or choose one from the media library.

Select your image from the pop-up that comes up
37

Click the image to select it and bring up a floating menu

Click the image to select it and bring up a floating menu
38

Select the icon with the image to the left if you want the image to be to the left with the text wrapping around it on the right.

NOTE: There is a known issue with Drupal that prevents text wrapping around an image right out of the gate. If you want to have it wrap, please shoot the Web Team a ticket.

Select the icon with the image to the left if you want the image to be to the left with the text wrapping around it on the right.
39

Select the image, then click the icon with the image centered to center it.

Select the image, then click the icon with the image centered to center it.
40

Save and preview

Save and preview
41

We now have a much nicer look!

If you need more help, see our section on images in our Web Guide: https://www.sju.edu/offices/marcomm/web-guide/working-with-files

We now have a much nicer look!
Well done!
Create how-to guides like this in a snap. Get Tango now.