The Content Editor is an HTML-enabled editor you can use to manage much of the content across your Higher Logic site.
It's the editor used whenever you:
- post discussion messages,
- post an announcement,
- write blog articles,
- add content to CMS pages,
- create and update community email templates,
- add comments to blog articles and library entries,
- and more...
One of the most important things to understand is the Content Editor comes in three versions (Basic, Basic Plus, and Advanced). The version you'll see depends on what you're doing in the product. For example, you'll use the Basic editor when posting a comment to a blog article or library entry, but you'll use the Advanced editor when creating a CMS page or library entry.
Each version provides a different set of options, with Basic having a more limited set and Advanced including them all. This is done to streamline editor usage for the task at hand (i.e., hiding options to reduce clutter and complexity when not needed and showing them when it is).
Let's take a closer look at each editor:
The Basic editor provides a minimal number of options, ideal for simple tasks like adding comments or posting to a discussion.
TIP: If additional functionality is needed, you can expand the Basic editor to the Basic Plus editor via the ellipsis (...) button. Click again to collapse back to Basic.
Basic Plus editor
Basic Plus provides additional paragraph options, like alignment and indentation, as well as various text-formatting styles (mostly headings) in the left-most menu.
In some cases, you'll use the Basic Plus editor by default; in others, you'll begin with the Basic editor but can expand to Basic Plus via the ellipsis (...) button.
As you'd expect, the Advanced editor provides all available options.
The notable additions are the ability to:
- access the HTML (or Source Code) editor,
- embed videos from Vimeo and YouTube, and
- use a wider array of text-formatting options in the Styles menu above the editor.
Let's a look at the editor's more notable features. Compare the numbers in the image to their corresponding number below:
NOTE: Many of these options are limited to the Advanced editor (shown). This is indicated below.
1 - Edit menu (Advanced only)
This menu includes the Paste as text option, which strips any native formatting from content pasted from other applications. When pasting content from third-party applications like Microsoft Word, this is the recommended method of doing so to ensure incompatible formatting isn't brought into the editor.
2 - View menu (Advanced only)
This menu provides a number of view options, with the most helpful being Fullscreen, which can make it easier to work in the editor when there's a lot of content (especially large images).
3 - Styles menu (Advanced only)
This menu provides numerous Heading, Inline, Block, and Alignment styles, allowing you to apply basic formatting to your content.
4 - Source Code (HTML) editor (Advanced only)
Click this to access the Source Code (HTML) editor. If you're knowledgeable in HTML, this editor gives you the power to create and edit content with a lot more freedom, flexibility, and control. Even if you're not skilled in HTML, though, you can still copy HTML from another source and easily paste it into this editor to use or re-purpose code.
5 - @mentions and #hashtags
Use these buttons (or type them directly in the editor) to initiate the @mention and #hashtag creation process.
6 - Insert/edit links
Use this options to insert and edit links to web pages and content.
7 - Insert/edit images and videos
Use these two options to when you want to insert/edit images and videos.
There are two ways to insert an image:
- Click Insert/edit Image, followed by Upload Image in the dialog, to browse for an image file from your device, network, or one of the many third-party options, like Facebook, Google Photos, etc.
- You can also simply drag-and-drop an image from your device directly into the Basic, Basic Plus, and Advanced Editor.
If you're uploading a large image and don't want to display it as such, you can reduce its size (100px, 200px, 300px, or 400px wide) via in the Image Display Settings menu. On the other hand, if you want to display the image per its original dimensions, select the Original Image option.
With videos, you're limited to inserting code from Vimeo or YouTube to embed videos directly on a page. This feature is primarily used on CMS pages, but you can embed videos in other areas as well.
NOTE: You can only embed videos using the Advanced editor.
NOTE: Some email clients (e.g., Outlook) don't support iFrames, so embedded videos won't function directly in discussion emails but will contain links to view the video on your web site.
How to work with large images
NOTE: Expandable thumbnails are only possible in discussion posts.
Do you need to share one or more large images in your discussion post but don't want to overwhelm your text and make it difficult to read?
EXAMPLE: An organization of dentists need to share X-ray images or a group of photographers want to feature their work. In both cases, these groups need to share large images; instead of uploading the original images, which are quite large and would overwhelm the body of the post, they can insert them as thumbnails which users can then click to view the full-size version.
How to insert an image in a discussion as an expandable thumbnail
Insert an image either via the Insert/edit Image button...
...or by dragging-and-dropping it from your device into the editor...
In the Edit Image dialog, choose an image size (100px, 200px, 300px, or 400px wide) from the Image Display Settings menu. This reduces the image in the discussion post to the width chosen.
You can add as many thumbnails as you want.
The end result is a discussion post with inline images that are expandable "thumbnails" of the originals. As you can see in the image below, my discussion post is not overwhelmed by my two images like it would have been otherwise. And now, these thumbnails can be clicked to display the full-size versions.