Common Function: Rich text editor: Details
This document provides detailed explanations about the tool of [Common Function: Rich text editor](/en/manual/richtexteditor).
## About the Term "Table" on This Page
The term "table" in this page refers to tables that can be created with the Rich text editor. Please do not confuse this with Pleasanter tables.
## Font
By default, you can select the font for the selected text from 16 different font options. Note that this requires these fonts to be available on the user's operating system. To learn how to modify the selectable fonts, see "Changing Font and Size Settings" below.
<details>
<summary>View sample</summary>

</details>
## Size
You can select the font size for the selected text from 16 predefined sizes.
<details>
<summary>View sample</summary>

</details>
## Changing Font and Size Settings
You can change fonts and sizes by modifying the parameter file TextEditorUI.json.This feature is available exclusively in on-premises environments.
<details>
<summary>TextEditorUI.json (default values)</summary>
Includes some Japanese font names.
```
{
"RichTextEditor": {
"DefaultFont": [
"Meiryo",
"Hiragino Kaku Gothic Pro",
"Yu Gothic",
"Helvetica Neue",
"Helvetica",
"Arial",
"sans-serif"
],
"FontList": [
"游ゴシック",
"BIZ UDPゴシック",
"Noto Sans",
"游明朝",
"BIZ UDP明朝",
"Noto Serif JP",
"Arial",
"Segoe UI",
"Calibri",
"Helvetica",
"Impact",
"Times New Roman",
"MS ゴシック",
"MS Pゴシック",
"MS 明朝",
"MS P明朝"
],
"FontSize": [ 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72 ]
}
}
```
Please refer to "[TextEditorUI.json](/en/manual/texteditorui-json)" for the meaning of each parameter and configuration examples. Please also ensure you check the "Confirmation When Changing Parameters" prior to changing any settings.
</details>
## Formats
Sets 9 types of paragraph formats (formatting) for the paragraph where the cursor is placed.
<details>
<summary>View sample</summary>

</details>
## Text Decoration and Text Styles
You can apply various decorations to selected text.
| Bold | Underline | Italic | Strike | Subscript | Superscript | Font Color | Hilight Color | Text style |
| :-: | :-: | :-: | :-: | :-: | :-: |:-: | :-: | :-: |
|  |  |  |  |  |  |  |  |  |
Please view the sample for the results of applying Bold, Underline, Italic, Strike, Subscript, Superscript, Font Color, Hilight Color, and the three types of text styles.
<details>
<summary>View sample</summary>

</details>
## Font Color, Hilight Color
After selecting text, clicking the Font Color or Hilight Color button displays the color palette.
| Font Color | Hilight Color |
| :-: | :-: |
|  |  |
### Color palette

You can specify the font color or hilight color (background) by selecting a color from the palette or entering a hexadecimal color code. After specifying, click the Submit button to apply the specification. Click the eraser button to return to the default color.
| Submit | Eraser |
| :-: | :-: |
|  |  |
The default colors for font color and hilight color are as follows:
| Target | Default Color |
| :-- | :-- |
| Font Color | #333333 |
| Hilight Color | #ffffff |
## Show blocks
Visualizes the block structure for easier understanding.
| Show blocks |
| :-: |
|  |
<details>
<summary>View sample</summary>

</details>
## Indent
You can increase or decrease indentation.
| Indent | Outdent |
| :-: | :-: |
|  |  |
<details>
<summary>View sample</summary>

</details>
## Align
Tools for changing the alignment of the paragraph where the cursor is positioned will be displayed.
| Align |
| :-: |
|  |
Aligns the paragraph where the cursor is placed to **Align left**, **Align center**, or **Align right**. **Align justify** automatically adjusts the space width between words.
| Align left | Align center | Align right | Align justify |
| :-: | :-: | :-: | :-: |
|  |  |  |  |
<details>
<summary>View sample</summary>

</details>
## Horizontal line
Draws a horizontal line to the full width of the parent block. Three types of horizontal lines are available: **Solid**, **Dashed**, and **Dotted**. The difference between Dashed and Dotted is the length and spacing of the dashes. Dotted has shorter and narrower dashes.
| Horizontal line |
| :-: |
|  |
<details>
<summary>View sample</summary>

</details>
## List
Tools for changing the selected line to a list will be displayed.
| List |
| :-: |
|  |
You can choose from two types: **Ordered list** (numbered list) and **Unordered list** (bulleted list).
| Ordered list | Unordered list |
| :-: | :-: |
|  |  |
When you set indentation for a list, the numbers or symbols at the beginning of lines change up to the 3rd level. From the 4th level onwards, the numbers or symbols from the 3rd level are used. After lowercase letter z comes aa, and after zz comes aaa.
<details>
<summary>View sample</summary>

</details>
## Line height
You can change the line height from the default of 1.5 to **1**, **1.15**, or **2**.
| Line height |
| :-: |
|  |
<details>
<summary>View sample</summary>

</details>
## Creating Tables
Clicking the Table button displays a menu that allows you to easily create tables up to 10 columns × 10 rows. For example, to create a 6 column × 9 row table, click in the following state:

If you want to create a table with 11 or more columns or 11 or more rows, please refer to the following to split rows or columns.
### Selecting Cells / Selecting Multiple Cells
You can select any cell in a table by clicking on it. Selected cells have blue borders.
You can select multiple cells by clicking and dragging within a table. You can also select multiple cells in a rectangular selection by clicking on two separate cells while holding the Shift key.
### Editing Existing Tables
When you select a cell in a created table, two floating toolbars appear above and below the selected cell.
#### Table-wide Settings
The upper floating toolbar allows you to edit settings that affect the entire table.

| Name | Overview |
| --- | ---- |
| Min size / Max size | Tables are initially created at maximum size (display area width). Clicking Min size fits the table width to the content size within cells. |
| Fixed column width | When Fixed column width is turned ON, it fixes the column width at the current settings. **After fixing the column width, even if you perform cell splitting or merging as described later, the once-fixed column width will not change.** |
| Table header | Adds a header (heading row) above the first row of the table. **Note that the header is treated separately from regular rows**. The header row has a gray background color. The border between the header row and regular rows is displayed thicker than normal borders. |
| Remove | Deletes the entire table. If you accidentally delete it, select Undo from the toolbar. |
#### Editing Rows, Columns, and Cells
The lower floating toolbar allows you to edit settings related to rows, columns, and cells.

*The above screen is a composite image with all buttons active for explanation purposes.
| Name | Overview |
| --- | --- |
| Insert row above | Inserts a row above the selected cell. |
| Insert row below | Inserts a row below the selected cell. |
| Insert column before | Inserts a column to the left of the selected cell. |
| Insert column after | Inserts a column to the right of the selected cell. |
| Delete row | Deletes the row containing the selected cell. If the cursor is placed in the header row, the header row is deleted. |
| Delete column | Deletes the column containing the selected cell. |
| Merge cells | When multiple cells are selected and clicked, merges the selected cells. |
| Split Cells - Vertical split | Vertically splits the selected cell (becomes 2 columns). Cannot split multiple cells. |
| Split Cells - Horizontal split | Horizontally splits the selected cell (becomes 2 rows). Cannot split multiple cells. |
## Insert Link Dialog
Clicking the Link button opens the Insert Link dialog.
| Link |
| :-: |
|  |

| Name | Overview |
| ---- | --- |
| URL to link | Enter the URL of the link destination. |
| Bookmark | Bookmarks elements within the item or calls links to existing bookmarks. **Paragraphs with Titles applied are automatically bookmarked.** |
| Text to display | Enter the text to be displayed on the Pleasanter screen. |
| Open in new window | In list view, opens in the same tab regardless of the ON/OFF state of the "Edit mode toggle" switch. In edit view, opens in a new tab when the "Edit mode toggle" switch is OFF. |
| Submit | Completes the link insertion. To cancel the link insertion, click the "×" in the upper right corner of the screen. When checking the behavior of inserted links, don't forget to turn OFF the "Edit mode toggle" switch. |
### Editing Existing Links
When you place the cursor on an existing link, a floating toolbar appears.

| Name | Overview |
| ---------- | -------------------------------------------------- |
| Edit | Displays the Insert Link dialog. |
| Unlink | Removes the configured link. |
| Remove | Deletes both the link and the text with the link. **If you accidentally delete it, select Undo from the toolbar.** |
## Insert Image Dialog
Clicking the Image button opens the Insert Image dialog.
| Image |
| :-: |
|  |

| Name | Overview |
| ---- | ---- |
| Select from files | Clicking displays a dialog box for selecting the image to insert. |
| × | Clicking the "×" button (to the right of "Choose File") allows you to deselect. |
| Image URL | Specifies the image address (URL). Cannot be used when selecting an image file with "Select from files". |
| Alternative text | Allows you to specify alternative text for when the image cannot be displayed. |
| Width | Allows you to specify the width for displaying the image. If not specified, the original image width is automatically set (auto). |
| Height | Allows you to specify the height for displaying the image. If not specified, the original image height is automatically set (auto). |
| Constrain proportions | When turned on, if you specify either Width or Height and set the other to auto, the image will be enlarged or reduced while maintaining the original aspect ratio. |
| Revert | Cancels the most recent changes to Width and Height. |
| Insert description | When turned on, you can add a description to the image. This description is different from the alternative text and is a caption displayed directly below the image. |
| Basic | Inserts the image as a standard block element (left-aligned). No text wrapping occurs on the right side of the image. |
| Left | Left-aligns the image within the line. Subsequent elements of the image are displayed wrapping to the right side of the image (float effect). |
| Center | Inserts the image as a standard block element (center-aligned). No text wrapping occurs on either side of the image. |
| Right | Right-aligns the image within the line. Subsequent elements of the image are displayed wrapping to the left side of the image (float effect). |
| Submit | Completes the image insertion. To cancel the image insertion, click the "×" button in the upper right corner of the screen. |
### Editing Existing Images
When you select an inserted image, a floating toolbar appears.

| Name | Overview |
| ------------ | ---------------------------------------------------------------------------------------------------- |
| Resize 100% | Sets the width of the selected image to 100% (full display area width). |
| Resize 75% | Sets the width of the selected image to 75% (of display area width). |
| Resize 50% | Sets the width of the selected image to 50% (of display area width). |
| Auto size | Sets the width of the selected image to auto. |
| Rotate left | Rotates the selected image 90 degrees counterclockwise. |
| Rotate right | Rotates the selected image 90 degrees clockwise. |
| Mirror, Horizontal | Flips the selected image horizontally. |
| Mirror, Vertical | Flips the selected image vertically. |
| Align - Basic | Inserts the image as a standard block element (left-aligned). No text wrapping occurs on the right side of the image. |
| Align - Left | Left-aligns the image within the line. Subsequent elements of the image are displayed wrapping to the right side of the image (float effect). |
| Align - Center | Inserts the image as a standard block element (center-aligned). No text wrapping occurs on either side of the image. |
| Align - Right | Right-aligns the image within the line. Subsequent elements of the image are displayed wrapping to the left side of the image (float effect). |
| Insert description | This description is different from the alternative text and is a caption displayed directly below the image. |
| Revert | Cancels the most recent changes to Width and Height. |
| Edit | Displays the Insert Image dialog. |
| Remove | Deletes the selected image. If you accidentally delete it, select Undo from the toolbar. |
## Image Preview
When you click on an image in Rich text in either of the following states, the image will pop up and be displayed in an enlarged view.
1. [Record Screen Index](/manual/table-grid)
2. [Record editor screen](/manual/table-editor) with Edit mode turned OFF
When multiple images are inserted in a single item, controls for viewing previous and next images are displayed at the bottom right of the popped-up image. Please note that the display position of the controls changes depending on the size of the image. To close the enlarged image display, click the "X" button at the top right of the image.
<details>
<summary>Operation details</summary>

</details>
## Related Information
[Common Function: Rich text editor](/en/manual/richtexteditor)