update readme for ckeditor. split config files

dachcom-digital · Sep 16, 2017 · cb4aa4e · cb4aa4e
1 parent 6850ce2
commit cb4aa4e
Show file tree

Hide file tree

Showing 10 changed files with 220 additions and 79 deletions.
diff --git 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
@@ -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
  <main>
-    {{ 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')) }}
 </main>
 ```
 
-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
 ```
diff --git 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
@@ -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
@@ -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;
     }
 }
diff --git a/src/ToolboxBundle/Resources/config/pimcore/area_restrictions.yml 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
diff --git a/...ources/config/pimcore/ckeditor/config.yml → ...config/pimcore/ckeditor/config_global.yml b/...ources/config/pimcore/ckeditor/config.yml → ...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
@@ -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: ~
+    - { resource: image_thumbnails.yml }
+    - { resource: toolbar.yml }
+    - { resource: document/editables.yml }
diff --git a/src/ToolboxBundle/Resources/config/pimcore/image_thumbnails.yml 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'
diff --git a/src/ToolboxBundle/Resources/config/pimcore/toolbar.yml 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: ~