Merge pull request #19 from techdivision/bugfix/multipleClasses

Fix problems when using multiple classes

README.md

@@ -80,7 +80,7 @@ Example: [Configuration/Settings.yaml](Configuration/Settings.yaml)
 
 **What values are allowed for cssClass?**
 - **Not null** Using an empty class (cssClass: null) to unset the value might cause errors during rendering in the backend. The select boxes of this package contain an "x" button for resetting the value.
-- **No whitespace** Using multiple classes seperated by whitespaces (e.g. cssClass: 'btn btn-primary') causes problems when the saved text gets loaded (classes are removed).
+- You can add **multiple classes** by separating them with a whitespace. e.g. "btn btn-primary"
 
 **Activate the preset for your inline editable NodeType property:**
 

Resources/Private/JavaScript/CkStyles/src/BlockStyleEditing.js

@@ -24,9 +24,12 @@ export default (presetIdentifier, presetConfiguration) =>
 
             // View configuration
             Object.keys(presetConfiguration.options).forEach(optionIdentifier => {
+
+                const classes = presetConfiguration.options[optionIdentifier].cssClass.split(' ');
+
                 config.view[optionIdentifier] = {
                     key: 'class',
-                    value: presetConfiguration.options[optionIdentifier].cssClass
+                    value: classes
                 }
             });
 

Resources/Private/JavaScript/CkStyles/src/InlineStylesEditing.js

@@ -9,7 +9,7 @@ export default (presetIdentifier, presetConfiguration) =>
     class InlineStylesEditing extends Plugin {
         init() {
             this.editor.model.schema.extend(
-                '$text', 
+                '$text',
                 { allowAttributes: `inlineStyles-${presetIdentifier}` }
             );
 
@@ -24,9 +24,12 @@ export default (presetIdentifier, presetConfiguration) =>
 
             // View configuration
             Object.keys(presetConfiguration.options).forEach(optionIdentifier => {
+
+                const classes = presetConfiguration.options[optionIdentifier].cssClass.split(' ');
+
                 config.view[optionIdentifier] = {
                     name: 'span',
-                    classes: presetConfiguration.options[optionIdentifier].cssClass
+                    classes: classes
                 }
             });