diff --git a/README.md b/README.md index 9d1fdb8a..d3a3d269 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ Get the Pimcore4 Version [here](https://github.com/dachcom-digital/pimcore-toolb - removes the default `pimcore_area_*` element wrapper from each brick ### And what's not? -- It's not a Avada Theme. While the Toolbox provides some basic Javascript for you, you need to implement and mostly modifiy them by yourself. +- It's not a Avada Theme. While the Toolbox provides some basic Javascript for you, you need to implement and mostly modify them by yourself. - Toolbox supports only the twig template engine, so there is no way to activate the php template engine (and there will never be such thing). ## Asset Management @@ -80,6 +80,7 @@ The Toolbox provides a lot of [ready-to-use Bricks](docs/11_ElementsOverview.md) - [Code Style](docs/1_CodeStyle.md) - [Toolbox Elements Overview](docs/11_ElementsOverview.md) - [Conditional Logic in Configuration](docs/12_ConditionalLogic.md) +- [CK-Editor Configuration](docs/13_CkEditor.md) - [Create a Custom Brick](docs/10_CustomBricks.md) - [Theme / Layout](docs/30_ToolboxTheme.md) - [Overriding Views](docs/31_OverridingViews.md) diff --git a/docs/0_Usage.md b/docs/0_Usage.md index 69613f7a..4f633494 100644 --- a/docs/0_Usage.md +++ b/docs/0_Usage.md @@ -7,17 +7,22 @@ Some important advices if you're going to use this Bundle in your Projekt. The Toolbox Bundle will help you to display area bricks with some nice additions. -### Area Brick Configuration -Be sure, that every `pimcore_areablock` implements the `toolbox_areablock_config()` element. +#### Area Brick Configuration +**Important!** Be sure, that every `pimcore_areablock` in your project implements the `toolbox_areablock_config()` element. If you miss this, the toolbar will get messy. ```twig
- {{ pimcore_areablock('mainContentBlock', toolbox_areablock_config()) }} + {# + choose a project wide unique name to dis-/allow elements in your areablock + through the toolbox configuration (see section "allow/disallow elements" below + #} + {{ pimcore_areablock('mainContentBlock', toolbox_areablock_config('mainContentBlock')) }}
``` -Of course, you're able to extend the toolbar configuration: +## Toolbar Configuration +Of course, you're able to extend/modify the toolbar configuration: ```yaml area_block_configuration: @@ -35,6 +40,11 @@ area_block_configuration: elements: - your_custom_area_brick +``` +## Allow/Disallow Elements + +#### In Snippets +```yaml # define which elements should not appear in snippet documents disallowed_content_snippet_areas: - parallaxContainer @@ -45,4 +55,26 @@ disallowed_content_snippet_areas: - anchor - container - teaser +``` + +#### In Area-Blocks + +Use the `disallowed_subareas` config node to disable Bricks in specific Areas. + +**Example** +```yaml +toolbox: + disallowed_subareas: + container: + disallowed: + - container + - parallaxContainer + columns: + disallowed: + - container + - parallaxContainer + mainContentBlock: #this is a project related areablock example, see section "Area Brick Configuration" above. + disallowed: + - container + - yourCustomBrick ``` \ No newline at end of file diff --git a/docs/11_ElementsOverview.md b/docs/11_ElementsOverview.md index 0bc5e960..b286f05c 100644 --- a/docs/11_ElementsOverview.md +++ b/docs/11_ElementsOverview.md @@ -148,7 +148,7 @@ toolbox: ``` ### View Helper In `Download/Partial/item.html.twig`, you'll find a `toolbox_download_info()` helper. -This Twig Extension will generate some downloads info. +This Twig Extension will generate some download info. **Usage**: ```twig @@ -417,6 +417,9 @@ toolbox: config_elements: awesome_fields: type: input # all the pimcore editables + config: + # all available configuration attributes from + # https://www.pimcore.org/docs/5.0.0/Documents/Editables/Input.html#page_Configuration ``` There is also the `additionalClasses` field. This Element will help you to generate some additional classes for every toolbox element. diff --git a/docs/13_CkEditor.md b/docs/13_CkEditor.md new file mode 100644 index 00000000..7480cfc6 --- /dev/null +++ b/docs/13_CkEditor.md @@ -0,0 +1,108 @@ +# CK-Editor Configuration + +The Toolbox Bundle allows you to override and specifiy the ckeditor configuration. +There are several reasons for that: + +- Keep the editor simple, remove unwanted dangerous elements from the ckeditor +- Define custom styles via configuration +- Use the same CK-Editor Layout in every wysiwyg element (Document, Emails, Objects) + +## CK Editor Toolbar +The Toolbox Bundle already removes some (mostly dangerous) elements. Feel free to modify them according to your needs. +You may use the [online toolbar configurator](https://ckeditor.com/tmp/4.5.0-beta/ckeditor/samples/toolbarconfigurator/index.html#advanced) to do that. + +> Info: This is the global configuration for the CK-Editor Toolbar. +> If you need to provide a different configuration in objects or areas, use the object/area configuration (see below) + +> Info: It's possible to modify all the [CK-Editor Configuration](https://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-stylesSet) + +### Overriding Configuration +The config node is a variableNode, so the values **doesn't get merged** with the default ones. +If your going to define the `toolbox -> ckeditor -> config` node, you must provide the complete configuration. + +**Example** +```yaml +toolbox: + ckeditor: + # with that node all the default values from toolbox configuration are overwritten now! + config: + uiColor: yellow # change the ui color of the editor for example + toolbar: + - name: basicstyles + items: + - Bold + - "-" + - RemoveFormat + - name: clipboard + items: + - Cut + - Copy + - Redo + - name: editing + items: + - Replace + - "-" + - SelectAll + - "/" +``` + +### Area CK-Editor Configuration +If you need to modify the toolbar configuration just for document areas, add this to your configuration: + +**Example** +```yaml +toolbox: + ckeditor: + area_editor: + config: + # this will merge the iframe element into the global toolbar configuration, if set + toolbar: + - name: insert + items: + - Iframe +``` + +### Object CK-Editor Configuration +If you need to modify the toolbar configuration just for objects, add this to your configuration: + +**Example** +```yaml +toolbox: + ckeditor: + object_editor: + config: + # this will merge the iframe element into the global toolbar configuration, if set + toolbar: + - name: insert + items: + - Iframe + stylesSet: specialStyleSetForObjects # see global style sets configuration below + uiColor: green + +``` + +## CK Editor Global Style Sets +Define your custom styles here. + +**Example** +```yaml +toolbox: + ckeditor: + global_style_sets: + default: + - + name: 'Dark Grey' + element: [h1,h2,h3,h4,h5] + attributes: + class: 'grey-1' + - + name: 'Lead' + element: p + attributes: + class: 'lead' + specialStyleSetForObjects: + name: 'Secret Color' + element: p + attributes: + class: 'secret-color' +``` diff --git a/src/ToolboxBundle/Controller/Admin/SettingsController.php b/src/ToolboxBundle/Controller/Admin/SettingsController.php index e28f067c..9ea466e4 100644 --- a/src/ToolboxBundle/Controller/Admin/SettingsController.php +++ b/src/ToolboxBundle/Controller/Admin/SettingsController.php @@ -97,7 +97,7 @@ private function setData() */ private function parseToolbarConfig($defaultConfig, $userConfig) { - $config = array_merge($defaultConfig, $userConfig); + $config = array_replace_recursive($defaultConfig, $userConfig); return $config; } } \ No newline at end of file diff --git a/src/ToolboxBundle/Resources/config/pimcore/area_restrictions.yml b/src/ToolboxBundle/Resources/config/pimcore/area_restrictions.yml new file mode 100644 index 00000000..fb9a0e70 --- /dev/null +++ b/src/ToolboxBundle/Resources/config/pimcore/area_restrictions.yml @@ -0,0 +1,40 @@ +toolbox: + disallowed_subareas: + accordion: + disallowed: + - accordion + - container + - slideColumns + - parallaxContainer + columns: + disallowed: + - container + - parallaxContainer + slideColumns: + disallowed: + - slideColumns + - accordion + - container + - parallaxContainer + - columns + - anchor + container: + disallowed: + - container + - parallaxContainer + parallaxContainer: + disallowed: + - container + - parallaxContainer + image: + disallowed: + - parallaxContainer + snippet: + disallowed: + - parallaxContainer + + disallowed_content_snippet_areas: + - parallaxContainer + - teaser + - container + - snippet \ No newline at end of file diff --git a/src/ToolboxBundle/Resources/config/pimcore/ckeditor/config.yml b/src/ToolboxBundle/Resources/config/pimcore/ckeditor/config_global.yml similarity index 93% rename from src/ToolboxBundle/Resources/config/pimcore/ckeditor/config.yml rename to src/ToolboxBundle/Resources/config/pimcore/ckeditor/config_global.yml index a7f2ea06..552f69aa 100644 --- a/src/ToolboxBundle/Resources/config/pimcore/ckeditor/config.yml +++ b/src/ToolboxBundle/Resources/config/pimcore/ckeditor/config_global.yml @@ -1,8 +1,3 @@ -imports: - - { resource: global_stylesets.yml } - - { resource: config_area.yml } - - { resource: config_object.yml } - toolbox: ckeditor: config: diff --git a/src/ToolboxBundle/Resources/config/pimcore/config.yml b/src/ToolboxBundle/Resources/config/pimcore/config.yml index 18dac279..8f4ce00e 100644 --- a/src/ToolboxBundle/Resources/config/pimcore/config.yml +++ b/src/ToolboxBundle/Resources/config/pimcore/config.yml @@ -1,71 +1,9 @@ imports: - { resource: areas/*.yml } + - { resource: ckeditor/*.yml } - { resource: theme.yml } + - { resource: area_restrictions.yml } - { resource: data_attributes.yml } - - { resource: ckeditor/config.yml } - - { resource: document/editables.yml } - -toolbox: - image_thumbnails: - gallery_element: 'galleryImage' - gallery_lightbox: 'contentImage' - gallery_thumbnail: 'galleryThumb' - image_element: 'contentImage' - image_lightbox: 'lightBoxImage' - video_poster: 'videoPoster' - video_thumbnail: 'content' - teaser_element: 'standardTeaser' - teaser_lightbox: 'lightBoxImage' - parallax_background: 'parallaxBackground' - parallax_section_background: 'parallaxSectionBackground' - parallax_container_element: 'parallaxImage' - download_preview_thumbnail: 'downloadPreviewImage' - - disallowed_subareas: - accordion: - disallowed: - - accordion - - container - - slideColumns - - parallaxContainer - columns: - disallowed: - - container - - parallaxContainer - slideColumns: - disallowed: - - slideColumns - - accordion - - container - - parallaxContainer - - columns - - anchor - container: - disallowed: - - container - - parallaxContainer - parallaxContainer: - disallowed: - - container - - parallaxContainer - image: - disallowed: - - parallaxContainer - snippet: - disallowed: - - parallaxContainer - - disallowed_content_snippet_areas: - - parallaxContainer - - teaser - - container - - snippet - - area_block_configuration: - toolbar: - title: Inhaltsbausteine - width: 200 - x: 10 - y: 125 - buttonWidth: 200 - groups: ~ \ No newline at end of file + - { resource: image_thumbnails.yml } + - { resource: toolbar.yml } + - { resource: document/editables.yml } \ No newline at end of file diff --git a/src/ToolboxBundle/Resources/config/pimcore/image_thumbnails.yml b/src/ToolboxBundle/Resources/config/pimcore/image_thumbnails.yml new file mode 100644 index 00000000..5ede3e05 --- /dev/null +++ b/src/ToolboxBundle/Resources/config/pimcore/image_thumbnails.yml @@ -0,0 +1,15 @@ +toolbox: + image_thumbnails: + gallery_element: 'galleryImage' + gallery_lightbox: 'contentImage' + gallery_thumbnail: 'galleryThumb' + image_element: 'contentImage' + image_lightbox: 'lightBoxImage' + video_poster: 'videoPoster' + video_thumbnail: 'content' + teaser_element: 'standardTeaser' + teaser_lightbox: 'lightBoxImage' + parallax_background: 'parallaxBackground' + parallax_section_background: 'parallaxSectionBackground' + parallax_container_element: 'parallaxImage' + download_preview_thumbnail: 'downloadPreviewImage' \ No newline at end of file diff --git a/src/ToolboxBundle/Resources/config/pimcore/toolbar.yml b/src/ToolboxBundle/Resources/config/pimcore/toolbar.yml new file mode 100644 index 00000000..5f2dcec2 --- /dev/null +++ b/src/ToolboxBundle/Resources/config/pimcore/toolbar.yml @@ -0,0 +1,9 @@ +toolbox: + area_block_configuration: + toolbar: + title: Inhaltsbausteine + width: 200 + x: 10 + y: 125 + buttonWidth: 200 + groups: ~ \ No newline at end of file