Working with Rich Text Editor
The Umbraco Rich Text Editor (RTE) is a field where you, as an editor, can be creative. You can select how much you want to do yourself. You can work on text content, format the text, or leave it the way it is. If you want to do more, you can insert images, create tables, or create links to other pages/documents.
The functionality varies depending on how the editor is set up. Here, we describe the default editor with all the options enabled. Contact your system administrator for details regarding your editor.
Editor Buttons
By default, the following editor buttons are available. Your system administrator can determine which buttons are displayed in different templates. You therefore might have access to more or fewer buttons than those shown here.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3872888104-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FgEH4FChbCn7eDDqREvdE%252Fuploads%252Fgit-blob-79188596e1677ef45d90d9f043f40aacd8cc9b4f%252Feditor_bar_v13.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=ab4c0be2&sv=1)
Paragraph Break/Line Break
The Rich Text Editor is like any other word-processing program. You write the text and the text wraps around when the line reaches the end. Use the following keyboard shortcuts in the editor to add:
Space between paragraphs - press
ENTER
.Line breaks - press
SHIFT + ENTER
.
Shortcut Keys
To make your work easier, there are shortcut keys for certain editor functions. Use the following shortcut keys to carry out certain commands:
Shortcut | Action |
---|---|
Ctrl + A | Select all |
Ctrl + B | Bold |
Ctrl + C | Copy |
Ctrl + I | Italic |
Ctrl + U | Underline |
Ctrl + V | Paste |
Ctrl + X | Cut |
Ctrl + Y | Redo |
Ctrl + Z | Undo |
We have listed only a few keyboard shortcuts. For a detailed list of available keyboard shortcuts, see the TinyMCE Documentation.
View Source Code
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3872888104-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FgEH4FChbCn7eDDqREvdE%252Fuploads%252Fgit-blob-37760d445b5ce97fa175e8b706a3e614456e1262%252Fview-source-code-v11.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=84a5df6e&sv=1)
If you are proficient in HTML, you can switch to HTML mode to create your page. You can also check the code and make minor adjustments to get the page exactly as you want.
Certain elements such as scripts are not recognized by the HTML view of the Rich Text Editor. You can enter the scripts directly in the text view of the editor.
Formats
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3872888104-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FgEH4FChbCn7eDDqREvdE%252Fuploads%252Fgit-blob-9cf550da427c744ab946b6f095b1675a82ce7fc5%252FFormats-Button-v11.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=d5fc40c1&sv=1)
You can apply formatting via the Formats drop-down list. The Formats drop-down list provides predefined styles that can be applied to text while maintaining a consistent look and feel throughout the site.
These styles incorporate advanced formatting functionality which can be applied to provide a different look for certain elements such as links, headings, and sub-headings. For example, you can use a format style to change a link into a call-to-action button.
To apply pre-defined styles:
Select the text you want to apply the style.
Choose the style from the Format drop-down list.
For more information on how to create the Styles, see the Rich Text Editor Styles article.
Text Formatting
You do not normally need to spend much time formatting text because Umbraco takes care of the formatting. However, the editor provides some options for controlling the text styles.
Formatting Buttons
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3872888104-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FgEH4FChbCn7eDDqREvdE%252Fuploads%252Fgit-blob-d2bafa5e64f67513fa60f2764f97b420567f9f17%252FFormatting-Buttons-v11.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=7dc8d451&sv=1)
The most familiar way to control formatting is by using the formatting buttons. With these buttons, you can apply basic formatting such as Bold, Italic, aligning text, creating bulleted and numbered lists, and applying indents.
To apply a format using the formatting buttons:
Select the text you want to apply the formatting.
Click the desired format button.
Copying Content from Other Programs
When you write content in another editor and copy it into a Rich Text Editor, you may encounter style issues on your website.
While pasting content, the original text styles are preserved which can lead to different font faces, sizes, and colors displaying on the website when viewed.
To prevent formatting issues, we recommended pasting the content first into a markdown editor such as Notepad, then copying and pasting it into your Rich Text Editor.
Remove Formatting
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3872888104-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FgEH4FChbCn7eDDqREvdE%252Fuploads%252Fgit-blob-f7f9194cd05d06ba8b29c42cf24aab9b7e805e01%252FRemove-Format-v11.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=660a6371&sv=1)
If you have already formatted a paragraph or selection using the formatting buttons, you can remove the formatting rule.
To remove formatting:
Select the text you want to remove the style from.
Click the relevant formatting button to remove the formatting rule.
You can also add a Remove format button in your toolbar. To add the Remove format button:
Navigate to your Rich Text Editor in the Document Type.
Click the cog wheel.
Click Edit next to the Rich Text Editor Data Type.
Select Remove format under the Toolbar Configuration.
Click Submit.
Click Save.
Links
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3872888104-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FgEH4FChbCn7eDDqREvdE%252Fuploads%252Fgit-blob-eff09368f5abfe9b3634b04b53dea05a621c9ee1%252FLink-Button-v11.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=253250c9&sv=1)
The Insert/Edit Link button is used to add or update links to internal pages, external pages, media files, email links, and anchors. The process for inserting a hyperlink differs depending on the type of hyperlink you wish to create.
To insert different types of hyperlinks, follow these steps:
Working with Images
To display images on a page the images must be uploaded to your Umbraco media library.
Many administrators set up a media library containing images that editors can use on their pages. Others allow their editor's free use of their images. The procedure for uploading an image varies slightly depending on which method your administrators have setup. Check with your system administrator for more information about this.
Macros
Macros will be removed in the next version. Consider using Partial Views or Blocks in Rich Text Editor.
In Umbraco, Macros are small building blocks of functionality that can be dropped into an editor. Each macro encompasses a piece of functionality and provides an interface to modify the macro to your requirements. A macro can be anything from a contact form to an embedded media player. The advantage of macros is that it gives editors the ability to add complex elements to a page.
The macros available differ on each system. Kindly check with your system administrator to find out which macros are available to you and what they do. The process for adding and updating a macro is as follows:
Adding a Macro to the Page
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3872888104-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FgEH4FChbCn7eDDqREvdE%252Fuploads%252Fgit-blob-5dc3aa5ac5c6dde5117c732c21433f937ecb68a5%252FSelect-Macro-v11.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=f20d9669&sv=1)
Place the cursor in the Rich Text Editor where you want to insert your macro.
Click the Insert Macro button from the toolbar.
Select a macro to insert from the macros list.
Click Submit.
The macro is displayed in the editor with a dotted border.
Editing Macros
You can edit values after a macro has been added to the Rich Text Editor:
Select the macro in the Rich Text Editor.
Click the Insert Macro button from the toolbar.
This will open the configuration menu where you can edit any values previously added.
Removing Macros
To remove a macro:
Select the macro in the Rich Text Editor.
Press the Delete or Backspace button on your keyboard.
Tables
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3872888104-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FgEH4FChbCn7eDDqREvdE%252Fuploads%252Fgit-blob-8020e292d180dd61315fca9b8b40a12d36bd0183%252FInsert-a-table-v11.png%3Falt%3Dmedia%26token%3D39120647-96fe-49ce-8c6e-5f1ec444f5fb&width=768&dpr=4&quality=100&sign=3d024b8e&sv=1)
Tables are used to format information in a grid-based structure. When you insert a table, you select how many rows and columns the table should comprise of. Additionally, you can fill in some optional formatting properties. These values can be changed later, so it is not important to know exactly what your table will look like when you create it.
Editing an Existing Table
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3872888104-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FgEH4FChbCn7eDDqREvdE%252Fuploads%252Fgit-blob-259f12eb87ab1879969fccaab2aa6273cb911915%252FEditing-an-existing-table-v11.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=ee7d6058&sv=1)
To edit the table after creating it, click on the table. A pop-up appears with different table properties and options. Alternatively, you can click on the Table button in the Rich Text Editor toolbar.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3872888104-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FgEH4FChbCn7eDDqREvdE%252Fuploads%252Fgit-blob-b52931a72f02d8d2da5bcf6deb2aa80300a54547%252Ftable-properties-v11.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=7556956c&sv=1)
Clicking on Table Properties gives you different options for modifying the table’s appearance. However, the developer of the website may have already created table styles for you so you may not need to adjust these settings.
There are other options available for modifying cells, rows, and columns such as width, height, alignment, border, and so on.
Configuring a Rich Text Editor
The Rich Text Editor in Umbraco can be configured in many different ways.
For more information, see the Rich Text Editor Configuration article.
Last updated