How can we add the insert table, breaks, image buttons into the main ribbon? We do not want a dedicated Insert section.
1 Like
Hello, I’m AiRon, an automated tech support bot 
While you wait for one of our customer support representatives, I can help you with your question.
To modify the DOCX editor interface and customize the ribbon to move specific insert options (like table, breaks, image) into the main ribbon, you will need to manipulate the toolbar configuration. Apryse’s APIs provide ways to customize the toolbar and menu items, allowing you to tailor the editor’s UI to your needs.
Some things you can try:
- Use the Apryse WebViewer’s UI customization options to modify the toolbar configuration.
- Identify the default location of the insert menu items and reassign them to the main ribbon by editing the toolbar configuration.
- Ensure that any customizations to the toolbar maintain the necessary functionality and do not conflict with other UI elements.
Here are some resources that might help you:
- Customize Toolbar in WebViewer: This guide explains how to customize the toolbar in the WebViewer, allowing you to move, add, or remove buttons.
- UI Customization in WebViewer: Learn about various UI customization options available in WebViewer, including modifying the ribbon and menus.
- Annotations in WebViewer: Understand how to manage and customize annotations, which might intersect with your toolbar modifications.
- Getting Started with WebViewer: A comprehensive introduction that might provide additional context for your customization needs.
Hopefully, this helps you solve your problem while you wait for a human to get back to you.
1 Like
Hello Jaffster,
Here is some sample code that will take all those buttons and put them in the made top header.
const header = instance.UI.getModularHeader('default-top-header');
const toolsHeader = instance.UI.getModularHeader('tools-header');
const toolsHeaderGroupedItems = toolsHeader.getGroupedItems();
const insertGroupedItems = toolsHeaderGroupedItems[1];
const insertToolsGroupedItems = insertGroupedItems.items;
header.setItems([...header.getItems(), insertGroupedItems]);
Best Regards,
Darian
1 Like
This is how it currently looks. We want to include the insert image/table/break next to the B/I/U…but it’s not working, even using the snippet you provided, they’re not being added.
1 Like
What version of WebViewer are you using? Are you running the modular UI?
I was able to get the tools showing by loading the viewer with office editor mode enabled.
initialMode: "docxEditor",
UI.addEventListener('viewerLoaded', async () => {
const toolsHeader = instance.UI.getModularHeader('tools-header');
const toolsHeaderGroupedItems = toolsHeader.getGroupedItems();
const homeGroupedItems = toolsHeaderGroupedItems[0];
const insertGroupedItems = toolsHeaderGroupedItems[1];
const homeToolsGroupedItems = homeGroupedItems.items;
homeToolsGroupedItems.splice(7, 0, insertGroupedItems);
homeGroupedItems.setItems([...homeToolsGroupedItems]);
});
1 Like
OK, we got that working finally…required going deeper into various documentation to show where this had to be done during the initialization steps.
But not our custom css isn’t being applied to the toolbar items. We want to change the width of the dropdown for “office-editor-text-format” to 120px instead opf 180px (its way too wide by default), and the same for office-editor-font.
1 Like
But not our custom css isn’t being applied to the toolbar items.
Are you saying this stopped working after using the code above to change the header items? When using web component you will need to use the host css class selector discussed here:Custom JavaScript PDF Viewer UI Style: Buttons, Panel, Modal | Apryse documentation
Can you provide your css and code used to change the button locations?
1 Like