Skip to content

Commit ab3bb22

Browse files
author
Sébastien HEYD
committed
feat(components): add toolbar and contextmenu customization to TinyMCE component
- Add toolbar attribute for custom toolbar configuration - Add contextmenu attribute for custom right-click menu configuration - Update component view to handle new toolbar and contextmenu parameters - Add comprehensive documentation with available toolbar and context menu items - Include usage examples and complete configuration example
1 parent 301fff2 commit ab3bb22

File tree

2 files changed

+60
-0
lines changed

2 files changed

+60
-0
lines changed

docs/docs/8.x/components/tinymce.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,67 @@ Attributes that can be used with this component :
4545
| group-id | string | null | ID that will be added to form-group |
4646
| min-height | integer | null | Minimum editor height |
4747
| max-height | integer | null | Maximum editor height |
48+
| toolbar | string | null | Custom toolbar configuration |
49+
| contextmenu | string | null | Custom context menu configuration |
4850

4951
For all non primitive values that not using a simple string you have to use the `:` character as a prefix :
5052

5153
```html
5254
<x-boilerplate::tinymce id="example" name="example" :value="$content" />
55+
```
56+
57+
## Toolbar customization
58+
59+
You can customize the toolbar by using the `toolbar` attribute:
60+
61+
```html
62+
<x-boilerplate::tinymce
63+
name="content"
64+
toolbar="undo redo | bold italic | link image"
65+
/>
66+
```
67+
68+
### Available toolbar items
69+
70+
- **Basic actions**: `undo`, `redo`, `cut`, `copy`, `paste`
71+
- **Text formatting**: `bold`, `italic`, `underline`, `strikethrough`, `subscript`, `superscript`
72+
- **Alignment**: `alignleft`, `aligncenter`, `alignright`, `alignjustify`, `customalignleft`, `customalignright`
73+
- **Lists**: `bullist`, `numlist`, `outdent`, `indent`
74+
- **Styles**: `styleselect`, `formatselect`, `fontselect`, `fontsizeselect`
75+
- **Colors**: `forecolor`, `backcolor`
76+
- **Links and media**: `link`, `unlink`, `image`, `media`, `table`
77+
- **Others**: `hr`, `removeformat`, `searchreplace`, `code`, `fullscreen`, `help`
78+
79+
Use `|` to separate toolbar groups.
80+
81+
## Context menu customization
82+
83+
You can customize the context menu (right-click menu) by using the `contextmenu` attribute:
84+
85+
```html
86+
<x-boilerplate::tinymce
87+
name="content"
88+
contextmenu="bold italic underline | link image table"
89+
/>
90+
```
91+
92+
### Available context menu items
93+
94+
- **Text formatting**: `bold`, `italic`, `underline`, `strikethrough`
95+
- **Clipboard**: `cut`, `copy`, `paste`
96+
- **Links and media**: `link`, `image`, `imagetools`, `table`
97+
- **Others**: `spellchecker`
98+
99+
## Complete example
100+
101+
```html
102+
<x-boilerplate::tinymce
103+
name="content"
104+
label="Content"
105+
toolbar="undo redo | styleselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link image table | code fullscreen"
106+
contextmenu="link image table spellchecker bold italic underline"
107+
:sticky="true"
108+
min-height="300"
109+
help="Enter your content here"
110+
/>
53111
```

src/resources/views/components/tinymce.blade.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
toolbar_sticky: {{ ($sticky ?? false) ? 'true' : 'false' }},
2323
{{ $minHeight ?? false ? 'min_height:'.$minHeight.',' : '' }}
2424
{{ $maxHeight ?? false ? 'max_height:'.$maxHeight.',' : '' }}
25+
{!! isset($toolbar) ? 'toolbar: "'.$toolbar.'",' : '' !!}
26+
{!! isset($contextmenu) ? 'contextmenu: "'.$contextmenu.'",' : '' !!}
2527
});
2628
});
2729
</script>

0 commit comments

Comments
 (0)