Rich Editor is the editor you'll use to write and format your text when creating posts in your Higher Logic Vanilla (Vanilla) community.
Upgrade to Rich Editor
If you’re still using one of our legacy editors, such as Advanced Editor, you can enable Rich Editor at any time. To do so:
1. Navigate to Dashboard > Settings > Discussions > Posting.
2. In the Post Format menu, select Rich.
✔️ TIP: The Rich Editor provides the best mobile experience, so we recommend selecting it in the Mobile Format menu as well.
Text formatting/links
Selecting text in the editor displays the following formatting options: 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:
📝 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 allows you to insert images and continue the numbering flow. Let's look at an example:
Links & embeds
The Link menu, which displays when pasting a URL into the editor or selecting one, allows you to display your links in three formats:
URL example
Rich Link example
Card example
📝 NOTE: If the pasted link supports Smart Embedding, the Card view will be used by default. If Smart Embedding is not supported, a Rich Link to the page is used by default.
Tables
While Rich Editor does not currently support the creation of tables natively, you can 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.
📝 NOTE: Check out this article to learn more.
- 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:
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. Rich Editor currently supports:
- 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 supports the following markdown-based macros:
Emoji
At the bottom left of 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 can function side by side with Advanced Editor. Leave Advanced Editor enabled in addition to Rich Editor, 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.
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 should not be stored with this format.
Rich embeds
Rich Editor 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
