How to Prevent Automatic Bulleting in Angular Rich Text Editor?
This article explains how to prevent 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;
}
}
Conclusion:
We hope you enjoyed learning about how to prevent automatic bulleting in Angular Rich Text Editor.
You can refer to our Angular Rich Text Editor feature tour page to learn about its other groundbreaking feature representations and documentation to understand how to present and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
