Preventing Automatic Bulleting in Angular Rich Text Editor
In the Angular Rich Text Editor component, there may be instances where you want to prevent the automatic creation of bullet points when typing certain characters, such as “-” or “*”, followed by a space. This article outlines how to implement a solution to achieve this behavior.
Implementation Steps
To prevent automatic bulleting when pressing space after “-” or “*” at the start of the text, you can utilize the actionBegin event of the Rich Text Editor. The following code snippet demonstrates how to set args.cancel = true to stop the default behavior.
Rich Text Editor Configuration
The editor is equipped with an actionBegin event listener. This captures any action initiation within the editor, such as key presses or format changes.
<ejs-richtexteditor
id="defaultRTE"
(actionBegin)="actionBeginHandler($event)"
>
<ng-template #valueTemplate>
<p>
The Rich Text Editor component is a WYSIWYG ("what you see is what you
get") editor that provides the best user experience to create and update
the content. Users can format their content using standard toolbar
commands.
</p>
</ng-template>
</ejs-richtexteditor>
Set Up the Action Begin Event Handler
In your TypeScript file, define the actionBeginHandler function. This function will handle the prevention of the automatic bullet creation:
public actionBeginHandler(e: ActionBeginEventArgs): void {
const targetElement = e.originalEvent.target as HTMLElement;
const instance = (targetElement as any).ej2_instances?.[0];
if (
instance &&
(instance.element.innerText.startsWith('-') ||
instance.element.innerText.startsWith('*')) &&
e.item.subCommand === 'UL'
) {
e.cancel = true;
}
}
This code works by first identifying the element that triggered the event. It then retrieves the instance of the Rich Text Editor associated with the target element. The function checks if the text starts with specific characters (“-” or “*”) and whether the action is intended to create an unordered list. If both conditions are true, the default action is canceled, preventing the automatic bulleting.
