Customize "format" dropdown list

[Jean-Christophe]

Hi,

I don't need the items "Quotation", "Heading 5" and "Heading 6" in the "Format" dropdown list in the Editor's toolbar. How could I achieve that?

[Martin Bechev]

Hi Jean-Christophe,

The format dropdown content can be customized, passing the desired configurations:

  public formatData: FormatItem[] = [
    { text: "Quotation", tag: "blockquote" },
    { text: "Heading 5", tag: "h5" },
    { text: "Heading 6", tag: "h6" }
  ];

the data built-in property:

 <kendo-editor [value]="value" style="height: 450px;">
      <kendo-toolbar>
        <kendo-toolbar-dropdownlist
          kendoEditorFormat
          [data]="formatData"
        ></kendo-toolbar-dropdownlist>
      </kendo-toolbar>
    </kendo-editor>

Here is an example:

https://stackblitz.com/edit/angular-k55obp?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

[Jean-Christophe]

Perfect! thanks

[Jean-Christophe]

Hi,

I've another question: could I format the style of the dropdown list items? for example, changing the color of the "Heading 1" list item

[Martin Bechev]

Hi Jean-Christophe,

Using custom CSS code is a possible way to customize the selected color. Here is an example:

https://stackblitz.com/edit/angular-yei48q-zjdrdp?file=app/app.component.ts

Another way is to update the $accent SCSS variable color, but then the selected color will be changed in the whole application. Please check the following article:

https://www.telerik.com/kendo-angular-ui/components/styling/custom-themes/#toc-using-the-build-process-of-the-application

Let me know if any further questions come up.

Regards,
Martin
Progress Telerik

[Jean-Christophe]

but is it possible to change the color of a specific list item? (in the screenshot, I'd like to display the text "Heading 1" in blue)

[Martin Bechev]

Hello Jean-Christophe,

Thank you for the provided screenshot.

Indeed there isn't a built-in mechanism that can be used to customize the Editor dropdown controls layout.

The desired styling can be achieved by using custom CSS code. Since the list of items is rendered in a popup that is generated in the DOM on the fly, we cannot distinguish the Format dropdown popup and Font family dropdown popup.

Unfortunately, if the Heading 1 is colored in blue, then the list item which is in the same position in the Font Family dropdown for example would be colored in blue as well as the used CSS specificity is applied to all rendered Editor control popups.

      .k-popup .k-list-scroller .k-list li:nth-child(3) {
        color: blue;
      }

https://stackblitz.com/edit/angular-yei48q-ruk1tb

I hope this sheds some light.

Regards,
Martin
Progress Telerik