Delving into the features of Innoslate v4.11's new Rich Text Editor.
To further your understanding of the component discussed below, be sure you've explored the Navigation article.
To optimize and format your content effectively in the Rich Text Editor, you will engage with two key toolsets: the Toolbar and the Block Menu. The following sections will provide an in-depth exploration of the features and functionalities offered by each toolset.
Toolbar
Figure 1: Redactor Toolbar
The toolbar provides many options to enhance your content. Users may add to their content, maximzie the field to fullscreen, utilize AI integration, format their content, view the HTML source code or reference the keyboard hotkeys.
Below we will highlight more of each option provided.
Add Menu
Figure 2: Toolbar Add Menu
- AI Text Tools
- Image: Opens an "Insert Image" window to allow users to drag and drop an image, or click to access your file system to retrieve the image.
- Link: Launches a dialog box that allows users to enter a URL and define the display text that will appear as the hyperlink within the content.
- Table: Displays a modal for specifying the number of rows and columns for a table.
- Chart: Allows selection of a chart type and the corresponding target entity.
- Compilation: Provides an option to select the target entity for compilation.
- Diagram: Enables the selection of a diagram type and its associated target entity.
- Document: Allows selection document types and the relevant target entity.
- DoDAF: Facilitates the selection of a DoDAF product and its corresponding target entity.
- Test Suite: Allows you to select the target entity for the test suite.
- Entity Notation: Provides an option to select the relevant target entity for notation.
- Table Notation: Enables querying attributes, setting limits, and previewing the table.
- Code Snippet:Converts the block into a code block for code entry.
- Line: Inserts a horizontal line into your content. Will be a faint gray, similar to the Code Snippet.
Image Sizing
When you insert an image into a block, a blue indicator will appear, allowing you to easily adjust the size of the image via drag and drop. The pixel dimensions will be displayed, providing clear information about the image size.
Video 1: Image Resizing with Drag-and-Drop Functionality
Fullscreen
(Figure 3: Toolbar Fullscreen Button) Enabling the fullscreen option will expand the editor to fill your entire browser window, which is especially useful for working with fields that contain numerous blocks. To exit fullscreen mode, simply press the same button again or hit the 'ESC' key on your keyboard.
AI Integration
Toolbar Formatting Options
Figure 4: Toolbar Formatting Options
The toolbar is equipped with a diverse array of formatting options designed to enhance the presentation of your text. These options include various Formatting Styles such as Bold, Italic, Underline, Strikethrough (Deleted), Superscript, Subscript, and Code. You can also highlight text, reset all styles, and create Lists or Tables effortlessly. Furthermore, you have the ability to select different Text Styles, adjust Color and Size, insert Special Characters, and easily undo or redo your modifications as needed.
You can align your text to the Left, Center, Right, or Justify it as per your requirement.
The available Formatting Styles encompass Text, Headings 1-4, Quote, Bullet List, and Numbered List.e
For listing options, you can choose between bulleted and numbered formats.
Additionally, the toolbar features a Text and Background Color Picker to customize the appearance of your content by selecting the color or inputting the color's HEX code.
Figure 5: Toolbar Color Menu
Lastly, the toolbar offers a variety of Text Styles, including Arial, Brush Script MT, Comic Sans MS, Garamond, Georgia, Helvetica, Impact, Monospace, and Times New Roman. Users also have the option to remove the font family.
The Text Size can be adjusted from 10px to 60px directly from the toolbar, allowing for flexible presentation of your content.
Additionally, a menu for Special Characters is available for easy insertion of unique symbols and characters.
The toolbar also features convenient Undo and Redo options, enabling users to easily manage changes made to their content.
Keyboard Hot Keys:
Keyboard Hotkeys provide efficient keyboard shortcuts for users while working within a block. The Hotkeys list is conveniently located as the final option on the far right of the toolbar, allowing users to easily access and utilize these shortcuts within the tool.
CTRL+I Italic
CTRL+U Underline
CTRL+H Superscript
CTR+L Subscript
CTRL+ Alt+ 0 Normal Text
CTRL+ Alt+ 1 Heading 1
CTRL+ Alt+ 2 Heading 2
CTRL+ Alt+ 3 Heading 3
CTRL+ Alt+ 4 Heading 4
CTRL+ Shift+ 7 Ordered List
CTRL+ Shift+ 8 Unordered List
CTRL+ ] Indent
CTRL+ [ Outdent
CTRL+ K Link
CTRL+ / View HTML Source
Block Menu
Figure 6: Block Menu
The Block Menu appears on the left side of a selected block, providing a range of additional features to enhance the formatting of your content within that specific block. Users can access the Add menu by clicking on the menu icon, format the content, or rearrange the block by moving it up or down (note that there must be multiple blocks present for this function to be available). Additionally, users can set a background color for the block, apply a border, choose text color and size, adjust line height, add spacing, and easily duplicate or delete the block as needed.