Rich Text Editor: Image Linking, Video Embedding and Alt Text Support

What is Rich Text Editor?

A rich text editor is an interface or input field for text editing, that includes advanced styling options like heading levels, bold, italic, bullet points, font typefaces, and text size. You can also embed images, hyperlinks, and other rich media (such as videos) into a rich text editor.

How do I add an image in a text editor?

Use the 'Edit Toolbar' to add images by clicking the 'Paperclip' Icon.

Image size is automatically responsive to various screen sizes, meaning BackerKit will auto-resize the image depending on if someone opens their email on their phone, tablet, or desktop. It does max out at 540px in width for desktop, but typically you want to upload an image that is slightly larger than that for hi-res screens. We recommend testing to make sure images look good on all formats.

🔥Tip: Do not copy and paste images from other websites into the editor. We recommend you always upload images using the paperclip icon to avoid errors.

How do I link an image in a text editor?

To add a link, alt, or caption to an uploaded image, add the <url>, <alt> or <caption> tag in the “caption” field of an uploaded image:

Supported tags are:

<url>https://www.google.com/</url>
- This will make the image clickable to the given URL
<alt>This is a picture of my dog buzz</alt>
- This will add an alt text to an image
<caption>Look at this good boy</caption>
- This will supply the default caption behavior if you are using alternative tags

Note: if no tags are supplied, the caption will default to adding a text caption to the image.

How do I embed a video?

You can embed a YouTube or Vimeo video:

1. Click on the link icon on the tool bar - 🔗 2. Paste the YouTube or Vimeo link from your web browser's URL bar. Make sure it’s the full link, not a shortened share version.

Example: https://www.youtube.com/watch... - - Not the shortened version https://youtu.be... when you click 'Share'

3. This will prompt you to embed the video.

Create a bulleted list

To create a bulleted list, click the Bulleted list button.

You can type to create the first bulleted list item. To create new list items, press the enter or return key. To finish the list, press the enter or return key twice.

Create a numbered list

To create a numbered list, click the Numbered list button.

You can type to create the first numbered list items. To create new list items, press the enter or return key. To finish the list, press the enter or return key twice.

Indent text

Indenting a paragraph gives it a margin on its left side. To indent a paragraph, click the Indent button.

Unindent text

Unindenting a paragraph removes any indented margins that it has. To unindent or "outdent" a paragraph, click the Outdent button.

Additional Resources: Launch Help Articles here.