Customize tool bar in React Document editor component
29 Mar 20255 minutes to read
How to customize existing toolbar in DocumentEditorContainer
Document Editor Container allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
-
Add - New items can defined by
CustomToolbarItemModel
and with existing items intoolbarItems
property. Newly added item click action can be defined intoolbarclick
. -
Show, Hide - Existing items can be shown or hidden using the
toolbarItems
property. Pre-defined toolbar items are available withToolbarItem
. -
Enable, Disable - Toolbar items can be enabled or disable using
enableItems
import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import {
DocumentEditorContainerComponent,
CustomToolbarItemModel,
Toolbar,
} from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
let container = DocumentEditorContainerComponent;
function App() {
//Custom toolbar item.
let toolItem = {
prefixIcon: 'e-de-ctnr-lock',
tooltipText: 'Disable Image',
text: onWrapText('Disable Image'),
id: 'Custom',
};
let items = [
toolItem,
'Undo',
'Redo',
'Separator',
'Image',
'Table',
'Hyperlink',
'Bookmark',
'TableOfContents',
'Separator',
'Header',
'Footer',
'PageSetup',
'PageNumber',
'Break',
'InsertFootnote',
'InsertEndnote',
'Separator',
'Find',
'Separator',
'Comments',
'TrackChanges',
'Separator',
'LocalClipboard',
'RestrictEditing',
'Separator',
'FormFields',
'UpdateFields',
'ContentControl',
];
function onToolbarClick(args) {
switch (args.item.id) {
case 'save':
//Save the document(Download the document)
container.documentEditor.save('sample', 'Docx');
break;
default:
break;
}
}
function onToolbarClick(args) {
switch (args.item.id) {
case 'Custom':
//Disable image toolbar item.
container.toolbar.enableItems(4, false);
break;
default:
break;
}
}
function onWrapText(text) {
let content = '';
const index = text.lastIndexOf(' ');
if (index !== -1) {
content =
text.slice(0, index) +
"<div class='e-de-text-wrap'>" +
text.slice(index + 1) +
'</div>';
} else {
content = text;
}
return content;
}
return (
<div>
<DocumentEditorContainerComponent
id="container"
ref={(scope) => {
container = scope;
}}
height={'590px'}
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
toolbarItems={items}
toolbarClick={onToolbarClick.bind(this)}
enableToolbar={true}
/>
</div>
);
}
export default App;
createRoot(document.getElementById('sample')).render(<App />);
Note: Default value of
toolbarItems
is['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']
.