How to Add Arrow Bullet List Style in Angular Rich Text Editor?
Currently, the Angular Rich Text Editor does not natively support an arrow bullet list style. However, it is possible to achieve this functionality at the application level by customizing the bulletFormatList property and by utilizing the actionComplete event.
Initializing the Rich Text Editor
Initialize the Rich Text Editor component by configuring a simple set of tools based on your requirements. Bind the bulletFormatList property and the actionComplete event to the Rich Text Editor. The bulletFormatList property is defined to include various bullet types, including ‘Arrow’.
<ejs-richtexteditor
id="defaultRTE"
[toolbarSettings]="tools"
[bulletFormatList]="bulletFormatList"
(actionComplete)="actionComplete($event)"
>
</ejs-richtexteditor>
Configuring the bulletFormatList
Predefine the advanced list types along with custom list type Arrow that populate in the bulletFormatList dropdown list from the toolbar.
public bulletFormatList = {
types: [
{
text: 'None',
value: 'none'
},
{ text: 'Circle',
value: 'circle'
},
{
text: 'Disc',
value: 'disc',
},
// Custom list style type added here,
{
text: 'Arrow',
value: 'arrow',
},
],
};
Handling actionComplete Event
The actionComplete method checks if the request type is ‘UL’ (unordered list). If the list style type is set to ‘arrow’, it changes the list style image to an arrow icon by using the listStyleImage and sets the list style type to ‘none’.
public actionComplete(args) {
if (args.requestType == 'UL') {
if (args.elements[0].parentElement.style.listStyleType == 'arrow') {
args.elements[0].parentElement.style.listStyleImage =
"url('https://img.icons8.com/material-two-tone/10/flip-horizontal.png')";
args.elements[0].parentElement.style.listStyleType = 'none';
}
}
}
Conclusion
I hope you enjoyed learning about how to add arrow bullet list style in Angular Rich Text Editor.
You can refer to our Angular RichText Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Rich Text Editor Example to understand how to create 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, Direct-Trac, or feedback portal. We are always happy to assist you!
