Using the Rich Text Editor
Learn how to:
- Enhance text with Aspen's rich text editor
About TinyMCE
Aspen's rich text editor is powered by the open source editor TinyMCE. This editor is "WYSIWYG" -- What You See Is What You Get, which refers to the ability to edit and see the content as it will actually appear.
Not seeing the Rich Text Editor?
In orginal versions of Aspen, there was only the option to use Marcdown. To swtich to this editor, go to Aspen Administration > System Administration > System Variables > click into your System Variables > check Allow HTML in Markdown fields and Allow HTML in Markdown fields.
In the Allowable HTML Tags you might want to paste in this:
p|div|span|a|b|em|strong|i|ul|ol|li|br|h1|h2|h3|h4|h5|h6|table|tr|th|td|center|img|hr|tbody|iframe|head|link|style|border|section|form|input|button|path|label|svg|meta|head|class|rect|image|code|pre|script
Using the Rich Text Editor
The rich text editor in Aspen is easy to use and pretty intuitive! If you're not sure what something on the toolbar is, just hover over the icon for a tooltip.
Here's a rundown of some of the more commonly used buttons on the toolbar:
| Insert/edit image | |
| Insert/edit link | |
| Insert a horizontal line | |
| Create a table | |
| Source code editor (For advanced users who are comfortable modifying HTML) |
Text formatting and color
Lists
Text Alignment
Uploading an Image From Your Device
- Click the Insert/Edit Image icon.
- Click the Upload tab.
- Either browse for an image file on your device, or drag and drop the image to upload.
Using an Existing Web Builder Image
If you have already uploaded an image to Aspen's web builder, use the following steps to insert your image into any rich text editor. Click here to learn more about how to upload images into Aspen.
- From Aspen administration, go to Web Builder > Images.
- Find your desired image. Tip: Using the Filters will allow you to search for an image by title.
- Click the image ID or Edit button.
- Click View Image.
- Copy the image URL.
- In the text editor, click the Insert Image icon.
- Paste the URL into the Source field. The Dimensions fields should soon populate with the original image dimensions -- edit the size if you like!
- Click OK to insert the image.
Resize when uploading
After an image has been selected, you'll see the image dimensions on the General tab. You can modify the size (in pixels) of the image here. As long as "Constrain proportions" is checked, modifying the width will automatically calculate the height to keep the image in proportion (and vice versa).
Resize after uploading
Once an image has been inserted, you can always get back to the image editing screen by single-clicking the image to select it, then clicking the Image Options icon.
Resize with Drag and Drop
Inserted images can also be resized by finding one of the image corners, then dragging to the desired size.
