Element Groups

Groups define the way in which elements can be combined (which elements can be placed inside of which elements). This group-based approach helps to enforce a valid document structure. It is also guiding users in what they can do and what they can't.

Use the groups option in an element definition to define which groups the element belongs to:

groups: ['group_a', 'group_b', 'group_c']

Then define which elements can be placed into a container element by using the allowedGroups option:

allowedGroups: ['group_b']

Conditional groups

When working with elements that operate in multiple definitions, conditional groups can help to prevent redundancy. For example, if you want to have the opportunity to encapsulate elements differently when defining a global element, you can use the name format [definition-id]:[group-id] to define your conditional group.

This would mean that the element has the given group (group-id), when it's in a document using the given definition (definition-id). This works for the groups option as well for allowedGroups.

groups: ['group_x', 'global_definition:group_z']

Universal Groups v3.5

Instead of defining a list of groups, an asterisk string "*" can be used in the element definition to allow the element to be placed in any group:

groups: '*'

Vice versa, the asterisk can be used in the allowedGroups option to allow any element to be placed inside.

WARNING

Usage of the asterisk for allowedGroups drastically reduces the editor's control over the document structure. Consider whether what you actually need may be inherited groups.

Inherited Groups v3.21

There may be instances where you need to define a renderless wrapper element which should be available in various places, but should be fully "transparent", i.e. it should be able to receive the same child elements as its parent node.

To achieve this, you can set the allowedGroups option to the "inherit" string:

groups: '*',
allowedGroups: 'inherit'