The Rich Editor 2 is Higher Logic Vanilla’s (Vanilla) latest editor for formatting your posts and discussions.
Upgrade to Rich Editor 2
If you’re still using one of our other editors, such as the Advanced Editor or Rich Editor 1, you can enable Rich Editor 2 at any time. To do so:
1. Navigate to Dashboard > Settings > Discussions > Posting.
2. In the Post Format menu, select Rich2.
✔️ TIP: The Rich Editor 2 provides the best mobile experience, so we recommend selecting it in the Mobile Format menu as well.
Rich Editor 1 vs Rich Editor 2: What's new?
All of Rich Editor 2's functionality is explained in detail in the sections below; however, if you've been using Rich Editor 1 and simply want a high-level overview of what's new, this section is for you.
- Table support - You can now paste tables directly into the editor from another source (e.g., Word or Excel). Once pasted, the table's content is fully editable.
- Enhanced list support - A few improvements have been made to lists:
- You can now insert images within numbered and bulleted lists.
- You can now insert images without breaking the "numbering flow." (More detail on this below.)
- Bulleted lists now feature formatting to better represent indentation
- Keyboard shortcuts make indenting/outdenting lists easier: In addition to the List menu from Rich Editor 1, you can now press tab to indent and enter/return to outdent.
- Improved link/embed support - The new Embed menu allows you to display links as:
- Regular URLs
- Rich Links
- Cards
- Press
ctrl+k or ⌘+k to display the Link menu, where you can enter a URL and the link text to display. - You can also quickly create a link by copying a URL (e.g., from your browser), selecting text in the editor, and pressing
ctrl+v or ⌘+V to replace the highlighted text with the link.
- Quicker link creation - Two improvements make creating links easier:
- Smart Embedding is supported for applicable links (e.g., pasting YouTube links will automatically embed the video in your post).
Text formatting/links
Upon selecting text, several options appear allowing you to apply the following formatting: bold, italic, strikethrough, inline code, and hyperlink.
In addition, you can use the following keyboard shortcuts:
ctrl+b or ⌘+b for bold.ctrl+i or ⌘+i for italic.ctrl+k or ⌘+k to display the link menu, where you can enter a URL and text to display.
✔️ TIP: You can also quickly create a link by copying a URL (e.g., from your browser), selecting text in the editor, and pressing ctrl+v or ⌘+V to replace the highlighted text with the link.
Paragraph formatting
Click into a paragraph to display a paragraph-level formatting menu to the left, as shown below.
The options in each category are as follows:
Special formatting examples
While spoiler text is always visible when editing the post, it will automatically be collapsed when the post is published, until a user clicks to view it. This ensures that each user can decide whether or not to view the content.
Lists
Here are a few tips when working with lists:
- Type "-" and press space to begin a bulleted list.
- Press enter/return to drop down to the next bullet.
- Press enter/return twice to end the list and resume standard paragraph text.
- Type "1." and press space to begin a numbered list.
- Press enter/return to drop down to the next number.
- Press enter/return twice to end the list and resume standard paragraph text.
Indent & outdent lists
Indenting/outdenting is possible in two ways:
- Via the list menu shown below:
- Via the following keyboard shortcuts:
- Press tab to indent
- Press enter/return to outdent
📝 NOTE: To outdent via the enter/return key, the paragraph must be blank.
List indentation example
Images in lists
You can include images in bulleted and numbered lists.
For numbered lists, specifically, Rich Editor 2 allows you to insert images and continue the numbering flow. Let's look at an example:
By comparison, Rich Editor 1 does not allow images within lists at all, nor does it provide any way to construct a numbered flow while including images between numbers.
Links & embeds
The Link menu and embedding options have been improved over Rich Editor 1. Now, you can display your links in three formats:
URL example
Rich Link example
Card example
If the pasted link supports Smart Embedding, the Card view will be used by default. For example, adding a link to https://www.youtube.com/watch?v=ucO5iSV-pawwill automatically embed the video in your post:
If Smart Embedding is not supported, a Rich Link to the page is used by default. For example, adding a link to our customer community (https://success.vanillaforums.com) will look like this:
Tables
Rich Editor 2 allows you to copy and paste tables into the editor from another source, such as Word or Excel.
Table overview
Once pasted, you can then edit the table content. Keep the following in mind:
- The format of your tables is controlled by your Theme. With variables, you can control formatting like alternating row colors and whether column lines display.
- Currently, when pasting a table containing images, those images will not be included. You must manually insert images into the table after it's pasted.
- Unlike images, you cannot click to select a table and delete it via a button. To delete a table, you must select the entire table and click
delete or backspace, as shown below:
📝 NOTE: In the future, you'll be able to create tables natively within the editor.
Format your tables
Check out the article below to learn how to use theme variables in your Style Guide to change the look of your tables.
Code blocks
The code block format option formats your text as code and includes syntax highlighting for some of the more common coding languages. When you input code, the coding language is automatically detected and the syntax is highlighted accordingly. We currently support this for:
- ADA
- Apache
- AppleScript
- C++
- Bash
- BASIC
- Clojure
- CMake
- CSS
- Dart
- Dockerfile
- Excel
- Go
- Haskell
- HTTP
- Java
- JavaScript
- JSON
- Kotlin
- Less
- Lua
- Makefile
- Markdown
- NGINX
- Objective-C
- Perl
- PHP
- PowerShell
- Python
- Ruby
- Rust
- SCSS
- SQL
- Swift
- Twig
- TypeScript
- XML
- YAML
Markdown macros
Rich Editor 2 supports the following markdown-based macros:
Emoji
At the bottom left of the Rich Editor is the Emoji Picker, which you can use to add thousands of emojis to a post. The emojis are grouped into the following eight categories:
- Smileys & People
- Animals & Nature
- Food & Drink
- Travel & Places
- Activities
- Objects
- Symbols
- Flags
Insert images
There are two ways to insert images into a post:
- Users with permission to upload images can do so via the Upload Image icon highlighted below.
- You can also drag and drop images into the editor.
Image-management options
Select an image to enable the following management options (discussed from left to right):
- Float - You can float the image left, center, or right.
- Size - Three generic sizing options are available: small, medium, and large.
- Alt text - Click this icon to display the Alt Text dialog where you can update an image's alt text to help with accessibility and improve SEO.
- Delete - Click the trashcan icon to remove the image. Note that no confirmation is provided, and the action is immediate.
Upload files
There are two ways to upload files to a post:
- Users with permission to upload files can do so via the Upload File icon highlighted below.
- You can also drag and drop files into the editor.
Once the post is published, users will be able to download any attached files, as you see below.
Mentions
Mentions are a quick and easy way to notify other users about certain comments and discussions that may interest them.
Depending on the mentioned user’s notification settings, they’ll either:
- see a pop-up directly in the community
- or receive an email telling them that they’ve been mentioned with a link to the content.
To mention someone, simply type “@” and then start typing the user’s name. As you type, a list of suggested users will display; continue typing to narrow down this list.
- Mentions are sorted with case sensitivity, and accents are included to allow for more precise matching. All characters except for "@" are supported.
FAQ
What do I do with my existing Advanced Editor posts?
Rich Editor 2 can function side by side with Advanced Editor. Leave Advanced Editor enabled in addition to Rich Editor 2, and older posts will still be editable using Advanced Editor.
Why am I getting an error message when I try to upload a file?
There are two common errors that can occur when uploading a file to the Rich Editor 2.
This error indicates that the file being uploaded is not currently supported. If there is a specific file type that your community needs supported, please reach out to Vanilla Support or your CSM to make the necessary change in your site’s configuration.
This error indicates that the uploaded file’s size is too large and cannot be accepted. The default maximum file size is set at 50MB, but this can be changed to suit a site’s needs. If you need to increase or decrease the maximum allowed file size limit, reach out to Vanilla Support or your CSM to make the necessary change in your site’s configuration.
Why is my published post replaced with “There was an error rendering this rich post”?
This message appears when a published post was inserted improperly. This can happen through incorrect insertion of a post through the API.
The Rich format must be stored in a specific way. Content from sources other than Rich Editor 2 should not be stored with this format.
Rich embeds
Rich Editor 2 supports Rich Embeds, a feature that allows you to embed content from your community and other sites in Rich posts. You can use this functionality to embed images, files, summaries of other pages, discussions, comments, videos, and more.
Additional resources
