Customize toolbar paragraph

[Mariusz Juszkiewicz]

Just wonder if there is a possibility to customize paragraph drop down to add additional tags. For example add a <p> tag with custom class definition like <p class="custom">

thank you

Mariusz Juszkiewicz

[Buvana Sathasivam]

Hi Mariusz, 

Greetings from Syncfusion support. 

We have checked your query. You can achieve your requirement by using the actionComplete event. This event is triggered when you select the drop-down list in the last paragraph. You can add the custom class name to the paragraph element using the actionComplete event. Please find the below code for your reference. 

<ejs-richtexteditor id="default" actionComplete="actionCompleteHandler"> 

</ejs-richtexteditor> 

<script> 

    function actionCompleteHandler(e) { 

        if (e.requestType === "P") { 

            e.elements[0].setAttribute("class", "e-custom");    

        } 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE-718522797  

API link: https://ej2.syncfusion.com/documentation/api/rich-text-editor#actioncomplete  

Please let us know if you have any queries. 

Regards, 

Buvana S 

[Mariusz Juszkiewicz]

Thank for your reply.

In your answer current existing p tag is replaced with custom one. This works great.

However, Can you add more custom choices (menu items) to the drop down menu?

[Buvana Sathasivam]

Hi Mariusz, 

 

In the format selected from the toolbar, we have a predetermined collection of paragraph styles, as well as quotation and code styles. We have already provided all possible formats into dropdown list. Can you locate the predefined dropdowns shown below? 

 

format: { 

    default: "Paragraph", 

    width: "65px", 

    types: [ 

      { text: "Paragraph" }, 

      { text: "Code" }, 

      { text: "Quotation" }, 

      { text: "Heading 1" }, 

      { text: "Heading 2" }, 

      { text: "Heading 3" }, 

      { text: "Heading 4" }, 

      { text: "Heading 5" }, 

      { text: "Heading 6" } 

    ] 

  } 

 

Please provide additional information about your custom dropdown list requirements. So, we'll investigate the options and update the answer as soon as possible. 

 

Regards, 

Buvana S