diff --git a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/images/adding-style-select-to-toolbar.png b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/images/adding-style-select-to-toolbar.png new file mode 100644 index 00000000000..546ec7c47ba Binary files /dev/null and b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/images/adding-style-select-to-toolbar.png differ diff --git a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md index 5f6892a81c5..5534053968d 100644 --- a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md +++ b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md @@ -1,16 +1,30 @@ -# Style Menu +# Style Select Menu -A Style Menu is a configurable extension that adds a cascading menu to the toolbar for applying text styles and formatting. +A Style Select Menu is a configurable extension that adds a cascading menu to the toolbar for applying text styles and formatting. ![Rich Text Editor cascading style menu](images/rte-tiptap-stylemenu.png) {% hint style="info" %} -Any custom stylesheets associated with the Rich Text Editor will not auto generate a style menu in the toolbar. +Any custom stylesheets associated with the Rich Text Editor will not auto generate a style select menu in the toolbar. {% endhint %} -### Creating a Style Menu +## Adding Style Select to Rich Text Editor -In this article, you can find an example of how to set up a Style Menu using the package manifest file. +To add Style Select to the Rich Text Editor: + +1. Go to **Settings**. +2. Navigate to **Data Types**. +3. Select the relevant Data Type. +4. Drag **Style Select** from **Available Actions** into the **Toolbar** section. +5. Click **Save**. + +Alternatively, while configuring an editor on a Document Type, you can drag **Style Select** from **Available Actions** into the **Toolbar** section. + +![Adding Style Select to the Rich Text Editor](images/adding-style-select-to-toolbar.png) + +## Creating a Style Select Menu + +In this article, you can find an example of how to set up a Style Select Menu using the package manifest file. {% code title="umbraco-package.json" %} ```json @@ -72,27 +86,24 @@ In this article, you can find an example of how to set up a Style Menu using the ``` {% endcode %} - -The `items` property defines the structure of the style menu. Each menu item has the following options: +The `items` property defines the structure of the style select menu. Each menu item has the following options: - `label`: _(required)_ The label of the menu item. This supports localization keys. - `appearance`: This defines the appearance of the menu item. The value has 2 optional properties: - `icon`: To prefix an icon to the menu item. - `style`: To apply CSS rules to the menu item. -- `data`: To configure the function of the style menu item. The value has 3 optional properties: +- `data`: To configure the function of the style select menu item. The value has 3 optional properties: - `tag`: A [supported HTML tag](#supported-html-tags) name. This will be applied to the selected text. - `class`: Applies a class attribute with the defined class name to the containing tag of the selected text. - `id`: Applies an ID attribute with the defined ID value to the containing tag of the selected text. - `separatorAfter`: When `true`, it will add a line separator after the menu item. - `items`: To enable a cascading menu, an array of nested menu items may be added. +Once configured, all custom style select menus will appear in the Rich Text Editor toolbar options, as described in the [Rich Text Editor Configuration](configuration.md) article. -Once configured, all custom style menus will appear in the Rich Text Editor toolbar options, as described in the [Rich Text Editor Configuration](configuration.md) article. - - -#### Supported HTML tags +### Supported HTML tags -Since the Tiptap has a strict rich-text schema, only supported HTML tags can be used in the style menu, _(arbitrary markup will be excluded)._ The following HTML tag names are supported: +Due to Tiptap’s strict rich-text schema, only supported HTML tags are allowed in the style select menu, _(arbitrary markup will be excluded)._ The following HTML tag names are supported: - `h1` - `h2` @@ -100,7 +111,7 @@ Since the Tiptap has a strict rich-text schema, only supported HTML tags can be - `h4` - `h5` - `h6` -- `p` +- `p` - `blockquote` - `code` - `codeBlock` diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/images/adding-style-select-to-toolbar.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/images/adding-style-select-to-toolbar.png new file mode 100644 index 00000000000..546ec7c47ba Binary files /dev/null and b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/images/adding-style-select-to-toolbar.png differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md index 1f39baa52b9..5534053968d 100644 --- a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md +++ b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md @@ -1,16 +1,30 @@ -# Style Menu +# Style Select Menu -A Style Menu is a configurable extension that adds a cascading menu to the toolbar for applying text styles and formatting. +A Style Select Menu is a configurable extension that adds a cascading menu to the toolbar for applying text styles and formatting. ![Rich Text Editor cascading style menu](images/rte-tiptap-stylemenu.png) {% hint style="info" %} -Any custom stylesheets associated with the Rich Text Editor will not auto generate a style menu in the toolbar. +Any custom stylesheets associated with the Rich Text Editor will not auto generate a style select menu in the toolbar. {% endhint %} -### Creating a Style Menu +## Adding Style Select to Rich Text Editor -In this article, you can find an example of how to set up a Style Menu using the package manifest file. +To add Style Select to the Rich Text Editor: + +1. Go to **Settings**. +2. Navigate to **Data Types**. +3. Select the relevant Data Type. +4. Drag **Style Select** from **Available Actions** into the **Toolbar** section. +5. Click **Save**. + +Alternatively, while configuring an editor on a Document Type, you can drag **Style Select** from **Available Actions** into the **Toolbar** section. + +![Adding Style Select to the Rich Text Editor](images/adding-style-select-to-toolbar.png) + +## Creating a Style Select Menu + +In this article, you can find an example of how to set up a Style Select Menu using the package manifest file. {% code title="umbraco-package.json" %} ```json @@ -72,34 +86,32 @@ In this article, you can find an example of how to set up a Style Menu using the ``` {% endcode %} - -The `items` property defines the structure of the style menu. Each menu item has the following options: +The `items` property defines the structure of the style select menu. Each menu item has the following options: - `label`: _(required)_ The label of the menu item. This supports localization keys. - `appearance`: This defines the appearance of the menu item. The value has 2 optional properties: - `icon`: To prefix an icon to the menu item. - `style`: To apply CSS rules to the menu item. -- `data`: To configure the function of the style menu item. The value has 3 optional properties: +- `data`: To configure the function of the style select menu item. The value has 3 optional properties: - `tag`: A [supported HTML tag](#supported-html-tags) name. This will be applied to the selected text. - `class`: Applies a class attribute with the defined class name to the containing tag of the selected text. - `id`: Applies an ID attribute with the defined ID value to the containing tag of the selected text. - `separatorAfter`: When `true`, it will add a line separator after the menu item. - `items`: To enable a cascading menu, an array of nested menu items may be added. +Once configured, all custom style select menus will appear in the Rich Text Editor toolbar options, as described in the [Rich Text Editor Configuration](configuration.md) article. -Once configured, all custom style menus will appear in the Rich Text Editor toolbar options, as described in the [Rich Text Editor Configuration](configuration.md) article. - +### Supported HTML tags -#### Supported HTML tags +Due to Tiptap’s strict rich-text schema, only supported HTML tags are allowed in the style select menu, _(arbitrary markup will be excluded)._ The following HTML tag names are supported: -Since the Tiptap has a strict rich-text schema, only supported HTML tags can be used in the style menu, _(arbitrary markup will be excluded)._ The following HTML tag names are supported: - `h1` - `h2` - `h3` - `h4` - `h5` - `h6` -- `p` +- `p` - `blockquote` - `code` - `codeBlock`