Moving Text Style Toolbar (properties pane) to the Top in DocumentEditor

[Anuj Vijjan]

     Greetings.

I’m working with the DocumentEditor and I need some help with customizing the toolbar layout. Currently, the text style toolbar is positioned on the right side of the DocumentEditor, but I would like to move it to the top of the editor.

Is there a way to reposition the text style toolbar from the right side to the top of the document editor? Any guidance or examples on how to achieve this would be greatly appreciated!

Thanks,

Anuj

[Suresh Iyappan]

Hi Anuj Vijayan,

In DocumentEditor container component, we cannot modify the toolbar layout. The toolbar and properties pane are predefined in documenteditor container component. But in DocumentEditor component, only the editor area will be in default and we can customize the toolbar and properties pane. Using DocumentEditor component we can customize the toolbar options. Please find the attached sample in which the text style properties pane options are moved to the top of the editor.

Sample link : https://stackblitz.com/edit/7gfwkg-vx7x8e?file=index.ts,package.json 

Regards,
Suresh I

[Kevin]

Hello, 

Sorry to reopen a not so old thread.

It is very interesting  Suresh, I was totally looking for that ! Would you have the same example with angular and using standalone component ?

I would also like to use event like onCreate, onDrop etc... is it possible ?

Best,

Kevin

[Mohammed Affan Saqib Hussain]

Hi Anuj Vijjan,

Currently, we are preparing the sample for meeting your requirements and we will update detail by March 19, 2025.

Regards,

Mohammed Affan C

[Kavitha Muralitharan]

Hi Anuj Vijjan,

We have provided a sample in angular to meet your requirement for your reference. Please check this and let us know if you need any other assistance.

Sample: https://stackblitz.com/edit/angular-gmlgx8ii-eszk6ewn?file=src%2Fapp.component.ts

Regards,

Kavitha M