Search results

Customize the font family drop down in React DocumentEditor component

25 Jan 2022 / 1 minute to read

Document editor provides an options to customize the font family drop down list values using fontfamilies in Document editor settings. Fonts which are added in fontFamilies of documentEditorSettings will be displayed on font drop down list of text properties pane and font dialog.

Similarly, you can use documentEditorSettings property for DocumentEditor also.

The following example code illustrates how to change the font families in Document editor container.

Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
export class App extends React.Component<{}, {}> {
  // Add required font families to list it in font drop down
  public fontFamilies = {
    fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria'],
  };
  render() {
    return (
      <DocumentEditorContainerComponent
        id="container"
        height={'590px'}
        serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        enableToolbar={true}
        documentEditorSettings={this.fontFamilies}
      />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

Output will be like below:

Font