Customize Toolbar Groups in Site Builder

For custom components, you can customize copies of out-of-the-box toolbar groups displayed in the Site Builder toolbar.

You can create your own version of an out-of-the-box component that has a restricted set and is available on the custom tag. Any customizations do not affect the out-of-the-box components.

You can create your own version of the out-of-the-box component that has a restricted set and is available on the custom tag, but it won't affect any of the out-of-the-box components.

Toolbar groups define what you see in the toolbar when you click the Title or Paragraph component to edit it. You can remove and reorder what is supported by the Title or Paragraph component, but additional plug-ins are not allowed.

To customize toolbar groups in Site Builder, you need to use the same syntax as the rich text editor uses for its toolbarGroups configuration. TinyMCE syntax is supported.

Title and Paragraph components support the following groups:

• "basicstyles" - restricted to bold/italic/underline 

• "styles" - Font Styles 

• "colors" - Text and Background colors 

• "undo" - Undo/Redo of current instance in the rich text editor

• "links" - Custom Plugin to link dialog

• "paragraph" - bullet/numbered list and indentation support

  • "list"

  • "indent"

• "align" - left/right/center

• "cleanup" - remove any styles for selected text

The Paragraph component also supports the image and table insert plug-ins”

• "insert"

  • "image"

  • "table"

In addition, you can use the row separator entry:

• "/"

Note:

If you set any other value in the toolbar-group configuration, the value will be removed before the Site Builder toolbar is created. You cannot provide "extraPlugins". Only the "name"/"groups" configuration is supported. Any "items" entries will be ignored. 

For example, if you want to prevent your users from defining fonts, colors, styles, or sizes, you can update the toolbar configuration as follows. For the "id" values, you need to specify custom values that are different from out-of-the-box values.

[{
    "name": "<category name>",
    "list": [{
        "type": "scs-title",
        "id": "<custom-value>",
        "config": {
            "toolbarGroups": [{
                    "name": "basicstyles",
                    "groups": ["basicstyles"]
                }, {
                    "name": "undo",
                    "groups": ["undo"]
                },
                "/", {
                    "name": "links",
                    "groups": ["links"]
                }, {
                    "name": "paragraph",
                    "groups": ["list", "indent"]
                },
                "/", {
                    "name": "align",
                    "groups": ["align"]
                },
                {
                    "name": "insert",
                    "groups": ["image", "table"]
                }, {
                    "name": "cleanup",
                    "groups": ["cleanup"]
                }
            ]
        }
    }, {
        "type": "scs-paragraph",
        "id": "<scs-paragraph>",
        "config": {
            "fontSize_sizes": "16/16px;24/24px;48/48px;"
        }
    }]
}]

Validation

Replace your components.json file with the preceding code and then edit your site (refresh the browser if you are already editing).  At this point, when you edit a Title component, it will no longer show the font styles or colors for selection.  The Paragraph component will continue to show these, and the list of font sizes available will be limited to 16, 24, and 48.

Default Toolbar Groups

The default toolbar groups for Title and Paragraph follow:

• Title

  [{
          "name": "basicstyles",
          "groups": ["basicstyles"]
      }, {
          "name": "styles",
          "groups": ["styles"]
      }, {
          "name": "colors",
          "groups": ["colors"]
      }, {
          "name": "undo",
          "groups": ["undo"]
      },
      "/", {
          "name": "links",
          "groups": ["links"]
      }, {
          "name": "paragraph",
          "groups": ["list", "indent"]
      }, {
          "name": "align",
          "groups": ["align"]
      }, {
          "name": "cleanup",
          "groups": ["cleanup"]
      }
  ]

• Paragraph

  [{
          "name": "basicstyles",
          "groups": ["basicstyles"]
      }, {
          "name": "styles",
          "groups": ["styles"]
      }, {
          "name": "colors",
          "groups": ["colors"]
      }, {
          "name": "undo",
          "groups": ["undo"]
      },
      "/", {
          "name": "links",
          "groups": ["links"]
      }, {
          "name": "paragraph",
          "groups": ["list", "indent"]
      }, {
          "name": "align",
          "groups": ["align"]
      }, {
          "name": "insert",
          "groups": ["image", "table"]
      }, {
          "name": "cleanup",
          "groups": ["cleanup"]
      }
  ]