Content editing

When editing pages or textblocks, or maybe something else that is part of a plugin, you will be presented with a Word-style content editor. This is also called a WYSIWYG (what you see is what you get) editor. The content editor of USM is provided by Jodit.

Editor toolbar options

The toolbar of the USM content editor gives you the following options:

1. Undo and redo buttons, to respectively undo and redo changes.

2. Style editors

   1. Copy style. Select some text, than click the button. The button will become highlighted. Now, select some other text. The second text will get the same style as the first text.

   2. Clear style

3. Text styles. Select some text and than click the button to apply the style to your selection. Or just click the button to start typing in the selected style.

   1. Bold text

   2. Italic text

   3. Underlined text

   4. Strike-through text

   5. Superscript

   6. Subscript

   7. Text color

4. Additional text options

   1. Heading style

   2. Text font

   3. Font size

5. Paragraph style

   1. Alignment of the text: left, center, right, or justified.

   2. Move text one tab to the left

   3. Move text one tab to the right

   4. Unordered list

   5. Ordered list

6. Additional objects

   1. Insert table. Learn more about editing tables.
   2. Insert link. Learn more about editing links.
   3. Insert image. Learn more about editing images.
   4. Insert video.

Most options on the toolbar will work in two different ways:

1. First select some text, than click the button. Now the selected style will be applied to the selected text.

2. Click the button without selected texts. Now when you start typing, the selected style will be applied to the new text.

Insert and editing tables

To insert table to your content, you click the "Insert table" button. This will open a popup where you can select the initial size of your table.

Edit existing table

After selecting the initial size, the table will be added to your content at the place of your cursor.

Now you can start editing the table in various ways, as indicated in the screenshot above:

1. Simply click on the table cell you want to edit and start typing to add text.

2. After selecting a table cell, the action menu will appear. With this, you can edit the appearance of the cell, or the table in general.

   1. On the first row of the action menu you can:

      1. Edit the background color of the cell.

      2. Edit the vertical alignment of text in the cell.

      3. Split the cell.

      4. Edit the horizontal text alignment of the cell.

   2. On the second row of the action menu you can:

      1. Merge cells (for this to work, you have to select multiple cells)

      2. Add a column to the table.

      3. Add a row to the table.

      4. Remove certain parts of the table.

3. Click and drag the border between two cells to adjust the width of your table columns.

4. Click and drag the corners of the table to resize the complete table.

You can also select multiple table cells and perform an action from the action menu on these cells at once.

Insert and editing links

To insert a link, you have to use the "Insert link" button from the toolbar.

The popup that opens, offers you the following options:

• URL - The link that should be added to your content. You can just copy-paste one from the address bar of your browser.

• Text - The text that should be visible in the text containing the link

• Class name - Optional technical value to change the appearance of the link. Your developer will provide a class name if required.

• Open in new tab - Whether the link should be opened in a new tab in the browser if a visitor clicks on it.

• No follow - Optional technical option. Can be used to tell search engines that the destination of the link does not belong to this website.

When you are done, click Insert to add the link to the content.

Edit existing link

An existing link can be easily edited. Just click once on the link and the link action menu will show.

The link action menu offers you the following options:

• Open the link yourself

• Edit the link - this will open the same popup for when inserting a new link.

• Unlink - this removes the link from the text.

• Change text color

• Add file to link - this allows you to add an image to the link. For more information, read Insert and editing images.

Insert and editing images

It is possible to add images to your content. For this, click the "Insert image" button in the toolbar. This will give you two different options to add images:

Upload	URL
Drop and image file on the bordered box shown in the popup, or click and search your image file, to upload a new file. After completion, your image is directly added to your content.	If the image you want to add to your content is already on the internet, you can enter the URL of the image as well. Optionally, add an alternative text that is displayed if the image cannot be loaded. Click Insert to add the image to your content.

Images that are already uploaded to USM Files can be added to your content by using the URL method as described above. Just use the File referencing information for in your website from the File detail view.

Edit existing image

Simply click on an image in your content to open the image action menu. You can also resize the image by dragging the corners of the image.

The image action menu allows you to:

1. Remove the image.

2. Edit the image.

3. Edit the vertical alignment of the image compare to the text it is inline with.

4. Edit the horizontal alignment of the image.

When you edit an existing image, you are presented with the following popup:

Here you can:

1. Edit the size of the image (but it is easier to just pull the corners of the image when you simply select it in your content as described above)

2. Delete the image

3. Edit properties of the image

   1. Edit the file URL directly, or upload a new file by clicking the image icon.

   2. Edit the title of the image, that people will see when they hover their cursor over the image.

   3. Edit the alternative title of the image, which will be shown if the image doesn't load

   4. Add an optional link to your image what people will visit when they click the image.

   5. Choose whether the link should open in a new tab

4. Edit advanced options

5. Apply the changes

Useful tips

• Do you want to create a new line, but don't want to have additional space between the new line and the previous line? Use Shift + Enter to create this new line.

• Made an error? Just do Ctrl + Z to undo your action.