Import
import { RichTextEditorModule } from '@backbase/ui-ang/rich-text-editor'
Usage
Use the bb-rich-text-editor-ui component to provide users with rich text editing capabilities. The component supports various formatting options through a customizable toolbar.
<!-- Basic rich text editor usage -->
<bb-rich-text-editor-ui
[label]="'Rich Text Editor'"
[placeholder]="'Please enter some text'">
</bb-rich-text-editor-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
actions |
RichTextEditorActions[] |
[RichTextEditorActions.Bold, RichTextEditorActions.Italic, RichTextEditorActions.Underline, RichTextEditorActions.Strike, RichTextEditorActions.OrderedList, RichTextEditorActions.UnorderedList, RichTextEditorActions.Code, RichTextEditorActions.Link, RichTextEditorActions.Indent] |
|
actionsTooltipPlacement |
string |
'auto' |
|
autofocus |
boolean |
false |
|
counter |
boolean |
true |
|
disabled |
boolean |
false |
|
id |
string |
Auto-generated unique string |
|
inputClassName |
string |
undefined |
|
label |
string |
'' |
|
maxLength |
number |
Infinity |
|
minLength |
number |
0 |
|
placeholder |
string |
'' |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
role |
string |
undefined |
|
size |
number | string |
20 |
actions
The actions input defines which formatting tools are available in the editor toolbar. You can customize the toolbar by providing a subset of available actions.
<!-- Rich text editor with limited formatting options -->
<bb-rich-text-editor-ui
[actions]="[RichTextEditorActions.Bold, RichTextEditorActions.Italic, RichTextEditorActions.Link]">
</bb-rich-text-editor-ui>
Available actions include:
- RichTextEditorActions.Bold: Bold text formatting
- RichTextEditorActions.Italic: Italic text formatting
- RichTextEditorActions.Underline: Underlined text formatting
- RichTextEditorActions.Strike: Strikethrough text formatting
- RichTextEditorActions.OrderedList: Numbered lists
- RichTextEditorActions.UnorderedList: Bullet point lists
- RichTextEditorActions.Code: Inline code formatting
- RichTextEditorActions.Link: Link insertion and editing
- RichTextEditorActions.Indent: Text indentation
- RichTextEditorActions.Image: Image insertion
actionsTooltipPlacement
The actionsTooltipPlacement input sets the placement of tooltips that appear when hovering over toolbar actions. Accepts standard tooltip placement values.
<!-- Rich text editor with top-positioned tooltips -->
<bb-rich-text-editor-ui [actionsTooltipPlacement]="'top'">
</bb-rich-text-editor-ui>
Supported placements: 'auto', 'top', 'bottom', 'left', 'right'.
autofocus
The autofocus input determines whether the editor should be automatically focused when the component is rendered.
<!-- Rich text editor with autofocus enabled -->
<bb-rich-text-editor-ui [autofocus]="true">
</bb-rich-text-editor-ui>
counter
The counter input determines whether to show the character count display. When enabled and maxLength is set, displays current character count and limit.
<!-- Rich text editor without character counter -->
<bb-rich-text-editor-ui [counter]="false">
</bb-rich-text-editor-ui>
disabled
The disabled input determines whether the editor is disabled and non-interactive. When disabled, users cannot edit content or interact with toolbar actions.
<!-- Disabled rich text editor -->
<bb-rich-text-editor-ui [disabled]="true">
</bb-rich-text-editor-ui>
id
The id input sets a unique identifier for the editor element. If not provided, an auto-generated unique string is used.
<!-- Rich text editor with custom ID -->
<bb-rich-text-editor-ui [id]="'message-editor'">
</bb-rich-text-editor-ui>
inputClassName
The inputClassName input allows you to add custom CSS classes to the editor input element for additional styling.
<!-- Rich text editor with custom input classes -->
<bb-rich-text-editor-ui [inputClassName]="'custom-editor-input'">
</bb-rich-text-editor-ui>
label
The label input sets the visible label text displayed above the editor to describe its purpose.
<!-- Rich text editor with custom label -->
<bb-rich-text-editor-ui [label]="'Message Content'">
</bb-rich-text-editor-ui>
maxLength
The maxLength input sets the maximum number of characters allowed in the editor. When combined with counter, displays the character limit to users.
<!-- Rich text editor with 500 character limit -->
<bb-rich-text-editor-ui [maxLength]="500">
</bb-rich-text-editor-ui>
minLength
The minLength input sets the minimum number of characters required for validation. Used in form validation to ensure minimum content length.
<!-- Rich text editor with minimum 10 characters required -->
<bb-rich-text-editor-ui [minLength]="10">
</bb-rich-text-editor-ui>
placeholder
The placeholder input sets the placeholder text displayed when the editor is empty, providing guidance to users about what to enter.
<!-- Rich text editor with custom placeholder -->
<bb-rich-text-editor-ui [placeholder]="'Share your thoughts...'">
</bb-rich-text-editor-ui>
readonly
The readonly input sets the editor to read-only mode, where content can be viewed but not modified. Toolbar actions are disabled in this mode.
<!-- Read-only rich text editor -->
<bb-rich-text-editor-ui [readonly]="true">
</bb-rich-text-editor-ui>
required
The required input indicates whether the editor content is required for form validation. When true, empty content will trigger validation errors.
<!-- Required rich text editor -->
<bb-rich-text-editor-ui [required]="true">
</bb-rich-text-editor-ui>
size
The size input configures the minimum width to fit the specified number of characters, similar to the HTML input size attribute.
<!-- Rich text editor with custom size -->
<bb-rich-text-editor-ui [size]="50">
</bb-rich-text-editor-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent | void> |
Fired when the editor loses focus |
|
focus |
EventEmitter<FocusEvent | void> |
Fired when the editor receives focus |
Form integration
The rich text editor component implements ControlValueAccessor and Validator interfaces, making it fully compatible with Angular reactive forms and template-driven forms.
// Reactive forms example
this.messageForm = this.formBuilder.group({
content: ['', [Validators.required, Validators.minLength(10)]]
});
<!-- Template integration -->
<form [formGroup]="messageForm">
<bb-rich-text-editor-ui
formControlName="content"
[label]="'Message Content'"
[minLength]="10"
[maxLength]="1000">
</bb-rich-text-editor-ui>
</form>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
- ARIA labels: Proper ARIA labeling for the editor and toolbar buttons
- Keyboard navigation: Full keyboard support including tab navigation through toolbar actions
- Screen reader support: Content changes and formatting states are announced to assistive technologies
- Focus management: Clear focus indicators and logical focus flow throughout the editor
- Button states: Toolbar buttons include aria-pressed states to indicate active formatting
- Role attributes: Proper textbox role for the editing area
- Label association: Editor is properly associated with its label using aria-labelledby
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
aria-activedescendant |
Identifies the currently active element when focus is on a composite widget, combobox, textbox, group, or application |
string |
|
aria-autocomplete |
Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox, searchbox, or textbox |
string |
|
aria-controls |
Indicates which element or elements the user interface widget controls |
string |
|
aria-describedby |
References the ID of an element that contains a detailed description of the widget |
string |
|
aria-expanded |
Indicates if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden |
string |
|
aria-invalid |
Indicates the entered value is not in a format expected by the application |
string |
|
aria-label |
Sets the accessible label for the editor when no visible label is present |
string |
|
aria-labelledby |
References the ID of an element that labels the editor |
string |
|
aria-owns |
Identifies an element (or elements) to define a visual, functional, or contextual relationship between a parent and its child elements when the DOM hierarchy cannot be used |
string |
|
role |
Customizes the ARIA role for the editor element to improve accessibility. Only valid widget roles are accepted |
string |
The component automatically handles RTL (right-to-left) text direction and includes comprehensive keyboard shortcuts for common formatting operations. All toolbar actions are accessible via keyboard navigation and provide appropriate feedback to screen readers.