Overview of the Text Editor (WYSIWYG)

Your site comes with a rich-text editor which functions as any standard word processor might. The term "WYSIWYG" stands for "What you see is what you get" meaning that changes you make in the text editor area will appear as they would on the page itself.

There are options for bold, italic, bulleted and numbered lists and more. Most of these you'll recognize from word processors. These are used in the same way you'd expect. Select the text you want to change, click the button and it will be bold, underlined, or colored for you. You'll also find a couple of website-specific options. 

Example of the Text Editor / WYSIWYG

new text editor


Adding Formatting

To add styling to your text, simply highlight the text and use the formatting options to make stylistic changes.

See example:

adding text formatting in the text editor

For best practices reasons, we recently removed the options to resize fonts and select different font families (read about this change), you are able to force these actions by Disabling the rich-text (see below) so you can alter the html code that controls the page you are working on.

Although not advised, here is an example of how you can alter the font family:

changing font families

Note: you should use only web safe fonts when making these changes. View a list of web safe fonts.


Disable the rich-text editor (Viewing the Code)

If you would prefer to add some HTML code to your text, select the Source icon in the text editor.  Doing this will turn your content editing window into source code view.

viewing the source code


Allowed HTML tags/attributes

Allowed HTML tags include: <a> <address> <b> <blockquote> <br> <caption> <cite> <code> <dd> <div> <dl> <dt> <em> <embed> <h2> <h3> <h4> <h5> <h6> <i> <iframe> <img> <li> <object> <ol> <p> <param> <pre> <script> <span> <strike> <strong> <sub> <sup> <table> <td> <tr> <u> <ul>

Allowed Style properties: background-color, color, display, float, font, font-family, font-size, height, margin-left, margin-right, padding, padding-bottom, padding-left, padding-right, padding-top, text-align, text-decoration, text-indent, width.

Web page addresses and e-mail addresses turn into links automatically.

Lines and paragraphs are automatically recognized. The <br/> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. If paragraphs are not recognized simply add a couple blank lines by clicking the Return key on your keyboard.


Removing Formatting

To remove formatting from your page, highlight the text and select the Remove Formatting icon. 

See example:
remove formatting in the text editor


Resizing Images

To resize an image placed on your page, follow these steps:

1. Select the image
2. Right click on the image and select Image Properties
3. Make appropriate changes to fields available:

  • alternative text
  • width/height
  • border
  • horizontal & vertical space
  • etc.

Controlling the "Teaser" Length                   

By default the system show shorter version of your post in the teaser (or list) view. This text is known as the "teaser". You can adjust length of the teaser text for each post individually by moving your cursor to the desired location and clicking the line break button.  Break

With Teaser Break

Without Teaser Break

Any text below a line break will be hidden from the teaser view.


Copying and Pasting from Other Sources

Many site owners will want to copy and paste material from other sources such as a word processor document, a PDF file, or an email. Unfortunately applications like word processors and email clients often include a lot of unwanted formatting code with each copy/paste. OpenScholar will ultimately strip away unwanted code from public view but it may appear to you in the rich text editor and may be distracting. To avoid this you can click the Paste from Word Paste from word optionwhich will open a new popup window. By pasting and inserting into this window, all unwanted formatting code is stripped away entirely. You can then continue to format the text as you like.


Other Kinds of Content (Add Media)

These are images, media, and files. The Add Media allows you to place non-text content directly in the body of your post. Clicking on this control will bring up a dialog box on the screen to guide you further.
media browser screen


Opening links in a new tab

When adding hyperlinks to your text using the link icon, you are now able to opt to open that link in a separate tab. See example below.

opening a link in a new tab option


Anchor Tag (or "Jump To" links)

You can include anchor tags within a post or page, helping you place links in the body of your post and jump to that location on the page.
anchor icon

Move the cursor to the place you would like to jump to. Click the anchor icon to insert the anchor tag name.

To jump to the new anchor link append the "#anchor tag name" at the end of the page's URL. 

You can now provide people with a link directly to your anchor on the page using this format:
siteurl#anchor or an example: hwp.harvard.edu/about#services

Example anchor link (this will take you to the top of this page): TOP


Recent Change to the Text editor - February 2017 

Removal of the custom font and sizing options

We've removed the ability to change the font family and font size from the text editor. We've done this to:

  1. encourage consistency on your site by allowing the theme you are using to drive the font styles
  2. prevent cross-browser and cross-os compatibility issues,
  3. provide semantic markup for accessibility.

Your options if you want to change the font-family: you can make a custom CSS for your site or change the font-family in the html code. For the font-size, please use the formatting drop down to select different Headings to change the size of the fonts. 

Updated: 28Mar17

See also: Page content