Rich Text Block

In many CMS systems, everything is done within a WYSIWYG editor. Caltech Sites offers a WYSIWYG editor as well, but its features are intentionally somewhat limited. You should use the "Rich Text" block to create text, but we offer separate blocks for images, video embedding, tables, headings, etc.

The Rich Text toolbar has two modes. One hides the toolbar unless text is selected, in which case it pops up near that text. The other keeps the toolbar visible all the time at the top of the input field. Here's what those two modes look like:

Click the pin icon (circled in red) to convert from the floating toolbar to the fixed-position one. This display preference will be remembered for your personal account on that site, and should persist across logins.

Many of the options in the Rich Text Toolbar should be familiar to you from their equivalents in Microsoft Word. The options above, in order, are:

1. Bold
2. Italics
3. Strikethrough
4. Superscript
5. Subscript
6. Use Code Font
7. H1-H6 Heading levels starting from largest to smallest
8. Numbered list
9. Bulleted list
10. Preformatted Code (a.k.a. <pre> tag)
11. Indent
12. Align Center
13. Horizontal rule
14. Line break
15. Link (add or manage links)
16. Embed Video - you should probably use our Video Block instead
17. Link to a Document
18. Embed an Image

After choosing an image from your image collection (or uploading a new one using the Upload tab), you will be presented with the following screen, where you can choose the size and alignment of your image.

Image Lightbox

Download Full Image

Zoom Icon

Images added within rich text blocks automatically get a zoom icon, which allows viewers to see the original image in a popup (you can see said icon in bottom right corner of the image above). If you do not want the zoom icon on your image, the best option is to use one of our image blocks, such the Hero Image block, which will allow you to choose whether or not to add the zoom icon. Another option is to upload an image that is either narrower than 400px or shorter than 300px; images with small originals do not get the zoom icon added to them.

MathJax is a powerful formatting language for displaying mathematical formulae and symbols in webpages. For instance, to display \(\Omega(G)\) in a sentence, you would type \(\Omega(G)\) into the Rich Text field. While if you wanted to display a more complex mathematic formula on its own line, you would type $$a^2 + b^2 = c^2$$ or \[a^2 + b^2 = c^2\], which would give you this:

$$a^2 + b^2 = c^2$$

Sometimes, in-sentence MathJax is written as $\Omega(G)$, but Caltech Sites doesn't support that format, because we support mixed-context text. This makes it too easy for our code to mistake non-MathJax text that uses single dollars signs for MathJax text that should be given special formatting.

Anchor links are links that go to a different part of the same page. For example, this link leads back up to the Embedding Images section of this page.

Image Lightbox

Download Full Image

To create Anchor links in a Rich Text field, select the text that you want to turn into a link, click the Link toolbar button, and choose the "Anchor Link" tab from the dialog that appears (seen above). You'll generally want to do this after the page is mostly finished, because the target you want to link to needs to exist to be able get its anchor value.

The #: field in the Anchor Link tab is where you insert the anchor value for this link, also known as the URL fragment. Those familiar with URL fragments may be tempted to include a # at the start of the value, but when adding an Anchor Link it's not necessary. Our code will add it for you.

We add IDs to all headings - both those added via a Heading Block, and those created within a Rich Text field. These IDs are automatically generated from the contents of the heading. A Heading saying "This is a Heading!" will have an anchor value of "this-is-a-heading" (all punctuation is removed). The anchor value for the "Anchors" heading at the top of this section is simply "anchors". If you have a hard time determining the correct ID for a particular heading, preview the page and hover your mouse over the heading. That will display a light-grey # icon, which will lead you to the anchor for that heading when you click it. Copy the value in your address bar after the # to get the anchor value.

Put that ID into the #: field in the Anchor Link tab, click Insert Anchor, and you're done.

Note: If you want to go to a specific section of a different page, that requires the use of the External Link tab of the Link dialog, rather than the Anchor Link tab. To create that external anchor link, include the entire URL of the target page, plus the # character, plus the anchor value discussed above. e.g.
/blocks/rich-text-block#embedding-images