Is possible to change NumberFormatList and BulletFormatList style?

[Kyung-hyun Roh]

I use BulletFormatList and NumberFormatList items on my RichTextEditor Toolbar.

Question is that is it possible to change these list's style?

I want to add some small icon and change text to my locale (korean).

example:

[Vinitha Jeyakumar]

Hi Kyung,

Currently, we are validating your reported query. we will update you the further details on or before 29th August 2022.

Regards,

Vinitha

[Kyung-hyun Roh]

Hi Vinnitha,

How's it going about validating this query?

Please inform me about the progress.

Thanks.

[Vinitha Jeyakumar]

Hi Kyung,

Query 1. "I want to add some small icon"

Still, we are validating the requirement. we will update you the further details on 2^nd September 2022.

Query 2. "I want to change text to my locale (Korean)"

You can use our localization feature of the Rich Text Editor control to change the locale texts to Korean. please refer to the below documentation for your reference,

https://ej2.syncfusion.com/vue/documentation/common/localization/

https://ej2.syncfusion.com/vue/documentation/rich-text-editor/globalization/

Localization strings for Number and Bullet format list items,

    'numberFormatListNumber': 'Number',

    'numberFormatListLowerAlpha': 'LowerAlpha',

    'numberFormatListUpperAlpha': 'UpperAlpha',

    'numberFormatListLowerRoman': 'LowerRoman',

    'numberFormatListUpperRoman': 'UpperRoman',

    'numberFormatListLowerGreek': 'LowerGreek',

    'bulletFormatListDisc': 'Disc',

    'bulletFormatListCircle': 'Circle',

    'bulletFormatListSquare': 'Square',

    'numberFormatListNone': 'None',

    'bulletFormatListNone':'None'

Regards,

Vinitha

[Vinitha Jeyakumar]

Hi Kyung,

Query 1. "I want to add some small icon"

Your requirement can be achieved by using the bulletFormatList and numberFormatList models. here we have used the iconCss property to define the icons for the list items.

Code snippet:

let defaultRTE: RichTextEditor = new RichTextEditor({

  toolbarSettings: {

    items: ['NumberFormatList', 'BulletFormatList'],

  },

  numberFormatList: {

    types: [

      {

        text: 'None',

        value: 'none',

      },

      {

        text: 'Number',

        value: 'decimal',

        iconCss: 'e-icons e-number',

      },

      {

        text: 'Lower Greek',

        value: 'lowerGreek',

        iconCss: 'e-icons e-lgreek',

      },

      {

        text: 'Lower Alpha',

        value: 'lowerAlpha',

        iconCss: 'e-icons e-lalpha',

      },

      {

        text: 'Upper Alpha',

        value: 'upperAlpha',

        iconCss: 'e-icons e-ualpha',

      },

      {

        text: 'Upper Roman',

        value: 'upperRoman',

        iconCss: 'e-icons e-uroman',

      },

    ],

  },

  bulletFormatList: {

    types: [

      {

        text: 'None',

        value: 'none',

      },

      {

        text: 'Disc',

        value: 'disc',

        iconCss: 'e-icons e-disc',

      },

      {

        text: 'Circle',

        value: 'circle',

        iconCss: 'e-icons e-circle',

      },

      {

        text: 'Square',

        value: 'square',

        iconCss: 'e-icons e-square',

      },

    ],

  },

  showCharCount: true,

});

defaultRTE.appendTo('#defaultRTE');

Sample: https://stackblitz.com/edit/g54man-cmrs84?file=index.ts,index.html

Regards,

Vinitha

[Kyung-hyun Roh]

Thanks Vinitha!

This is what I want!

[Vinitha Jeyakumar]

Hi Kyung,

You are always welcome.

Regards,

Vinitha