Custom CSS classes for styling elements

Define allowed tags, allowed empty, do not wrap, remove tags Refs #2005
octobercms · May 23, 2016 · ef290df · ef290df
1 parent 7563670
commit ef290df
Show file tree

Hide file tree

Showing 9 changed files with 443 additions and 87 deletions.
diff --git a/modules/backend/formwidgets/RichEditor.php b/modules/backend/formwidgets/RichEditor.php
@@ -5,6 +5,7 @@
 use Event;
 use Request;
 use Backend\Classes\FormWidgetBase;
+use Backend\Models\EditorSetting;
 
 /**
  * Rich Editor
@@ -71,6 +72,17 @@ public function prepareVars()
         $this->vars['name'] = $this->formField->getName();
         $this->vars['value'] = $this->getLoadValue();
         $this->vars['toolbarButtons'] = $this->evalToolbarButtons();
+
+        $this->vars['allowEmptyTags'] = EditorSetting::getConfigured('html_allow_empty_tags');
+        $this->vars['allowTags'] = EditorSetting::getConfigured('html_allow_tags');
+        $this->vars['noWrapTags'] = EditorSetting::getConfigured('html_no_wrap_tags');
+        $this->vars['removeTags'] = EditorSetting::getConfigured('html_remove_tags');
+
+        $this->vars['imageStyles'] = EditorSetting::getConfiguredStyles('html_style_image');
+        $this->vars['linkStyles'] = EditorSetting::getConfiguredStyles('html_style_link');
+        $this->vars['paragraphStyles'] = EditorSetting::getConfiguredStyles('html_style_paragraph');
+        $this->vars['tableStyles'] = EditorSetting::getConfiguredStyles('html_style_table');
+        $this->vars['tableCellStyles'] = EditorSetting::getConfiguredStyles('html_style_table_cell');
     }
 
     /**

diff --git a/modules/backend/formwidgets/richeditor/assets/css/richeditor.css b/modules/backend/formwidgets/richeditor/assets/css/richeditor.css
diff --git a/modules/backend/formwidgets/richeditor/assets/js/build-min.js b/modules/backend/formwidgets/richeditor/assets/js/build-min.js
diff --git a/modules/backend/formwidgets/richeditor/assets/js/richeditor.js b/modules/backend/formwidgets/richeditor/assets/js/richeditor.js
@@ -39,7 +39,16 @@
         stylesheet: null,
         fullpage: false,
         editorLang: 'en',
-        toolbarButtons: null
+        toolbarButtons: null,
+        allowEmptyTags: null,
+        allowTags: null,
+        noWrapTags: null,
+        removeTags: null,
+        imageStyles: null,
+        linkStyles: null,
+        paragraphStyles: null,
+        tableStyles: null,
+        tableCellStyles: null
     }
 
     RichEditor.prototype.init = function() {
@@ -63,7 +72,8 @@
     RichEditor.prototype.initFroala = function() {
         var froalaOptions = {
             editorClass: 'control-richeditor',
-            language: this.options.editorLang
+            language: this.options.editorLang,
+            fullPage: this.options.fullpage
         }
 
         if (this.options.toolbarButtons) {
@@ -91,11 +101,63 @@
             ]
         }
 
+        froalaOptions.imageStyles = this.options.imageStyles
+            ? this.options.imageStyles
+            : {
+              'oc-img-rounded': 'Rounded',
+              'oc-img-bordered': 'Bordered'
+            }
+
+        froalaOptions.linkStyles = this.options.linkStyles
+            ? this.options.linkStyles
+            : {
+              'oc-link-green': 'Green',
+              'oc-link-strong': 'Thick'
+            }
+
+        froalaOptions.paragraphStyles = this.options.paragraphStyles
+            ? this.options.paragraphStyles
+            : {
+              'oc-text-gray': 'Gray',
+              'oc-text-bordered': 'Bordered',
+              'oc-text-spaced': 'Spaced',
+              'oc-text-uppercase': 'Uppercase'
+            }
+
+        froalaOptions.tableStyles = this.options.tableStyles
+            ? this.options.tableStyles
+            : {
+              'oc-dashed-borders': 'Dashed Borders',
+              'oc-alternate-rows': 'Alternate Rows'
+            }
+
+        froalaOptions.tableCellStyles = this.options.tableCellStyles
+            ? this.options.tableCellStyles
+            : {
+              'oc-cell-highlighted': 'Highlighted',
+              'oc-cell-thick-border': 'Thick'
+            }
+
         froalaOptions.toolbarButtonsMD = froalaOptions.toolbarButtons
         froalaOptions.toolbarButtonsSM = froalaOptions.toolbarButtons
         froalaOptions.toolbarButtonsXS = froalaOptions.toolbarButtons
-        froalaOptions.htmlAllowedEmptyTags = ['figure', 'textarea', 'a', 'iframe', 'object', 'video', 'style', 'script']
-        froalaOptions.htmlDoNotWrapTags = ['figure', 'script', 'style']
+
+        if (this.options.htmlAllowedEmptyTags) {
+            froalaOptions.allowEmptyTags = this.options.htmlAllowedEmptyTags.split(/[\s,]+/)
+        }
+
+        if (this.options.allowTags) {
+            froalaOptions.htmlAllowedTags = this.options.allowTags.split(/[\s,]+/)
+        }
+
+        froalaOptions.htmlDoNotWrapTags = this.options.noWrapTags
+            ? this.options.noWrapTags.split(/[\s,]+/)
+            : ['figure', 'script', 'style']
+
+        if (this.options.removeTags) {
+            froalaOptions.htmlRemoveTags = this.options.removeTags.split(/[\s,]+/)
+        }
+
         froalaOptions.lineBreakerTags = ['figure', 'table', 'hr', 'iframe', 'form', 'dl']
         froalaOptions.shortcutsEnabled = ['show', 'bold', 'italic', 'underline', 'indent', 'outdent', 'undo', 'redo']
         froalaOptions.linkInsertButtons = ['linkBack', '|']