Rich Editor - HL Vanilla Community
<main> <article class="userContent"> <p>The <strong>Rich Editor</strong> is <strong>Higher Logic Vanilla’s (Vanilla)</strong> default editor for formatting your posts and discussions.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/598/HG3JU66SPP4O.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/598/HG3JU66SPP4O.png" alt="image.png" height="479" width="824" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="upgrade-to-rich-editor">Upgrade to Rich Editor</h2><p>If you’re still using our Advanced Editor, you can enable the Rich Editor at any time. To do so:</p><p>1. Navigate to <strong>Dashboard > Settings > Discussion > Posting</strong>.</p><p>2. In the <strong>Post Format</strong> menu, select <strong>Rich</strong>.</p><p><strong>✔️ TIP: </strong>The Rich Editor provides the best mobile experience, so we recommend selecting it in the <strong>Mobile Format</strong> menu as well.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/LBN6MVKQJYEA/enabling-rich-editor.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/LBN6MVKQJYEA/enabling-rich-editor.png" alt="enabling_rich_editor.png" height="792" width="1215" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="if-you-don't-see-the-rich-option">If you don't see the Rich option</h3><p>This means you need to first enable the <strong>Rich Editor</strong> addon. If you're an administrator and want to enable Rich Editor for your Vanilla community:</p><p>1. Access the Dashboard.</p><p>2. Navigate to <strong>Settings > Addons > Addons</strong>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/4W8JYUYILP9O/accessing-addons.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/4W8JYUYILP9O/accessing-addons.png" alt="accessing_addons.png" height="840" width="1192" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. Enable the <strong>Rich Editor</strong> addon.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/JBCTE5BXEQSL/enable-editor.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/JBCTE5BXEQSL/enable-editor.png" alt="enable_editor.png" height="317" width="1028" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Enabling Rich Editor will automatically set the <strong>Post Format</strong> to <strong>Rich</strong> as your default post format. </p><p>To change your format back, navigate to <strong>Settings > Discussion > Posting</strong> (or navigate directly to <code class="code codeInline" spellcheck="false" tabindex="0">/vanilla/settings/posting</code> ) and set the Post Format to the desired setting.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/GRCD5P25PZQ4/enabling-rich-editor.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/GRCD5P25PZQ4/enabling-rich-editor.png" alt="enabling_rich_editor.png" height="792" width="1215" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="formatting-overview"><strong>Formatting overview</strong></h2><p>Let’s take a look at the various ways you can format your text using the Rich Editor.</p><h3 data-id="text-formatting"><strong>Text formatting</strong></h3><p>Upon selecting text, several options appear allowing you to apply the following formatting: <strong>bold</strong>, <strong>italic</strong>, <strong>strikethrough</strong>, <strong>codeblock</strong>, and <strong>hyperlink</strong>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/LCLAJPK62G1Y/text-highlight-options.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/LCLAJPK62G1Y/text-highlight-options.png" alt="text_highlight_options.png" height="167" width="531" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>✔️ TIP</strong>: With text selected, you can also use the following keyboard shortcuts:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">ctrl+b</code> or <code class="code codeInline" spellcheck="false" tabindex="0">⌘+b</code> for bold.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">ctrl+i</code> or <code class="code codeInline" spellcheck="false" tabindex="0">⌘+i</code> for italic.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">ctrl+k</code> or <code class="code codeInline" spellcheck="false" tabindex="0">⌘+k</code> for link.</li></ul><h3 data-id="paragraph-formatting">Paragraph formatting</h3><p>Click into a paragraph to display a paragraph-level formatting menu to the left, as shown below. </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/Q59YVFJSWJUD/paragraph-formatting.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/Q59YVFJSWJUD/paragraph-formatting.gif" alt="paragraph_formatting.gif" height="204" width="640" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The options in each category are as follows: </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://user-images.githubusercontent.com/1770056/55188112-fb8cb380-5170-11e9-8165-a16c2f28f83d.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://user-images.githubusercontent.com/1770056/55188112-fb8cb380-5170-11e9-8165-a16c2f28f83d.png" alt="55188112-fb8cb380-5170-11e9-8165-a16c2f28f83d.png" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="special-formatting-example">Special formatting example</h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/I78RUYA7M3XS/formatting-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/I78RUYA7M3XS/formatting-example.png" alt="formatting_example.png" height="442" width="905" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>While spoiler text is always visible while editing the post, it will automatically be collapsed when published until a user manually clicks to view it. This ensures each user can decide whether or not to view the content in question.</p><h3 data-id="lists">Lists</h3><p>Here are a few tips when working with lists:</p><ul><li>Type "<strong>-</strong>" and press <strong>space </strong>to begin a bulleted list.</li><li>Press <strong>enter/return</strong> to drop down to the next bullet.</li><li>Press <strong>enter/return</strong> twice to end the bulleted list.</li></ul><ol><li>Type "<strong>1.</strong>" and press <strong>space </strong>to begin a numbered list.</li><li>Press <strong>enter/return</strong> to drop down to the next number.</li><li>Press <strong>enter/return</strong> twice to end the numbered list. </li></ol><h4 data-id="indent-lists">Indent lists</h4><p>You can indent bulleted and numbered lists up to four levels deep:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/7SVJ51K3M46P/indent-lists.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/7SVJ51K3M46P/indent-lists.gif" alt="Indent Lists.gif" height="266" width="450" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="markdown-macros">Markdown macros</h3><p>Rich Editor supports the following markdown-based macros:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/161/BOLGAWQVVTYX.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/161/BOLGAWQVVTYX.gif" alt="BOLGAWQVVTYX.gif" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="emoji">Emoji</h3><p>At the bottom left of the Rich Editor is the <strong>Emoji Picker</strong>, which you can use to add thousands of emojis to a post. The emojis are grouped into the following eight categories:</p><ul><li>Smileys & People</li><li>Animals & Nature</li><li>Food & Drink</li><li>Travel & Places</li><li>Activities</li><li>Objects</li><li>Symbols</li><li>Flags</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/168CGZ6KYFZ2/emoji-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/168CGZ6KYFZ2/emoji-example.png" alt="emoji_example.png" height="509" width="572" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="insert-images">Insert images</h2><p>There are two ways to insert images into a post:</p><ul><li>Users with permission to upload images can do so via the <strong>Upload Image </strong>icon highlighted below. </li><li>You can also drag and drop images into the editor.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/7UZDS5PDEC50/upload-image-button.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/7UZDS5PDEC50/upload-image-button.png" alt="upload_image_button.png" height="503" width="510" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="image-management-options">Image-management options</h3><p>Select an image to enable the following management options (discussed from left to right):</p><ul><li><strong>Float </strong>- You can float the image left, center, or right.</li><li><strong>Size</strong> - Three generic sizing options are available: small, medium, and large.</li><li><strong>Alt text </strong>- 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.</li><li><strong>Delete</strong> - Click the trashcan icon to remove the image. Note that no confirmation is provided, and the action is immediate.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/43LX1724HCQO/image-options.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/43LX1724HCQO/image-options.png" alt="image_options.png" height="298" width="780" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="upload-files">Upload files</h2><p>There are two ways to upload files to a post:</p><ul><li>Users with permission to upload files can do so via the <strong>Upload File </strong>icon highlighted below. </li><li>You can also drag and drop files into the editor.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/5PWCWHC7C0LM/upload-file.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/5PWCWHC7C0LM/upload-file.png" alt="upload_file.png" height="507" width="495" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p> Once the post is published, users will be able to download any uploaded files. </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/426/Z4DS0YNZM1S3.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/426/Z4DS0YNZM1S3.png" alt="image.png" height="396" width="996" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="mentions">Mentions</h2><p><strong>Mentions </strong>are a quick and easy way to notify other users about certain comments and discussions that may interest them. </p><p>Depending on the mentioned user’s notification settings, they’ll either:</p><ul><li>see a pop-up directly in the community </li><li>or receive an email telling them that they’ve been mentioned with a link to the content.</li></ul><p>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.</p><ul><li>Mentions are sorted with case sensitivity, and accents are included to allow for more precise matching. All characters except for "@" are supported.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/666/6TGTDGZ5YALH.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/666/6TGTDGZ5YALH.png" alt="image.png" height="398" width="1016" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="faq">FAQ</h2><h3 data-id="what-do-i-do-with-my-existing-advanced-editor-posts">What do I do with my existing Advanced Editor posts?</h3><p>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.</p><h3 data-id="why-am-i-getting-an-error-message-when-i-try-to-upload-a-file">Why am I getting an error message when I try to upload a file?</h3><p>There are two common errors that can occur when uploading a file to the Rich Editor.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/Z88P73LDGH4B/file-ext-error.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/Z88P73LDGH4B/file-ext-error.png" alt="file_ext_error.png" height="180" width="1011" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>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.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/IOVAVI40316T/file-too-big.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/IOVAVI40316T/file-too-big.png" alt="file_too_big.png" height="115" width="1015" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>This error indicates that the uploaded file’s size is too large and cannot be accepted. The default maximum file size is set at <strong>50MB</strong>, 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.</p><h3 data-id="why-is-my-published-post-replaced-with-there-was-an-error-rendering-this-rich-post">Why is my published post replaced with “There was an error rendering this rich post”?</h3><p>This message appears when a published post was inserted improperly. This can happen through incorrect insertion of a post through the API.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/8I5Y2GTAG3NQ/render-rich-post-error.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/8I5Y2GTAG3NQ/render-rich-post-error.png" alt="render_rich_post_error.png" height="135" width="1127" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The <code class="code codeInline" spellcheck="false" tabindex="0">Rich</code> format must be stored in a specific way. Content from sources other than Rich Editor should not be stored with this format.</p><h2 data-id="rich-embeds">Rich Embeds</h2><p>Rich Editor supports <a href="https://success.vanillaforums.com/kb/articles/330-rich-embeds" rel="nofollow noreferrer ugc">Rich Embeds</a>, a feature that allows you to embed content from your community or other sites in Rich posts. You can use this functionality to embed images, files, summaries of other pages, discussions, comments, videos, and more.</p><h2 data-id="additional-resources">Additional Resources</h2><ul><li><a href="http://docs.vanillaforums.com/help/posting/" rel="nofollow noreferrer ugc">More information on posting</a></li><li><a href="https://success.vanillaforums.com/kb/articles/330-rich-embeds" rel="nofollow noreferrer ugc">Rich Embeds</a></li></ul><p>Click the link below to access a video expanding on what you learned in this article.</p><div class="js-embed embedResponsive" data-embedjson="{"body":"For more information, please see:","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/GXW21TRYG1JP\/share-imagevanilla-community.jpg","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/462","embedType":"link","name":"Rich Editor [video] - HL Vanilla Community"}"> <a href="https://success.vanillaforums.com/kb/articles/462" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/462 </a> </div><p><br></p> </article> </main>