Designer - change font list

Designer - change font list

Posted by: ignacy.mielniczek on 31 January 2023, 2:32 pm EST

• 

  ignacy.mielniczek

  • Post Options:
  • Link
    Copy

  Posted 31 January 2023, 2:32 pm EST - Updated 31 January 2023, 2:37 pm EST

  Hello
  
  Is there a way to change a list of fonts available in editor?
  
  I would like to remove some of those options.

  

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 1 February 2023, 8:58 am EST - Updated 1 February 2023, 9:03 am EST

  Hi Ignacy,

  It appears that you are looking to remove certain font options from the font dropdown menu in the designer. This can be done by modifying the “fontFamily” command. To do this, you can use the method GC.Spread.Sheets.Designer.getCommand(‘fontFamily’) to access the fontFamily command and its property “dropdownList”. This property displays all the available font options, and you can change it to remove the desired fonts.

  After modifying the command, you need to add it to the designer configuration map using the designer.setConfig(config) method, where config is obtained from GC.Spread.Sheets.Designer.DefaultConfig().

  Additionally, you can remove font options from the Format dialog box by modifying the FormatDialogTemplate and setting it using the GC.Spread.Sheets.Designer.registerTemplate() method.

  Please see the attached code snippet and sample for more information and clarification:

  // gets the default config of the designer
  let config = GC.Spread.Sheets.Designer.DefaultConfig;
  
  // gets the fontFamily command
  let fontFamilyCommand = GC.Spread.Sheets.Designer.getCommand('fontFamily');
  
  // removes the font options from dropdownList property of fontFamilyCommand
  fontFamilyCommand.dropdownList.splice(10);
  
  // modifies the commands
  config.commandMap = {
      fontFamily: fontFamilyCommand,
  }
  
  // sets the modified command
  designer.setConfig(config);

  Sample: https://codesandbox.io/s/solution-forked-y5z0w5?file=/src/index.js

  Doc reference

  GC.Spread.Sheets.Designer.DefaultConfig: https://www.grapecity.com/spreadjs/api/designer/modules/GC.Spread.Sheets.Designer#defaultconfig

  GC.Spread.Sheets.Designer.getCommand(): https://www.grapecity.com/spreadjs/api/designer/modules/GC.Spread.Sheets.Designer#getcommand

  desinger.setConfig(): https://www.grapecity.com/spreadjs/api/designer/classes/GC.Spread.Sheets.Designer.Designer#setconfig

  ICommand: https://www.grapecity.com/spreadjs/api/designer/interfaces/GC.Spread.Sheets.Designer.ICommand#interface-icommand

  GC.Spread.Sheets.Designer.registerTemplate(): https://www.grapecity.com/spreadjs/api/v15/designer/modules/GC.Spread.Sheets.Designer#registertemplate

  Regards,

  Ankit