Merge pull request #11752 from colemanw/CKEditor

CKEditor Advanced Options - Better validation of options
civicrm · Mar 5, 2018 · 6e6fff4 · 6e6fff4
2 parents 45ae072 + 4ce3e89
commit 6e6fff4
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 3 deletions.
diff --git a/CRM/Admin/Page/CKEditorConfig.php b/CRM/Admin/Page/CKEditorConfig.php
@@ -134,6 +134,12 @@ public function save($params) {
         if ($val != 'true' && $val != 'false' && $val != 'null' && $val[0] != '{' && $val[0] != '[' && !is_numeric($val)) {
           $val = json_encode($val, JSON_UNESCAPED_SLASHES);
         }
+        elseif ($val[0] == '{' || $val[0] == '[') {
+          if (!is_array(json_decode($val, TRUE))) {
+            // Invalid JSON. Do not save.
+            continue;
+          }
+        }
         $pos = strrpos($config, '};');
         $key = preg_replace('/^config_/', 'config.', $key);
         $setting = "\n\t{$key} = {$val};\n";

diff --git a/css/civicrm.css b/css/civicrm.css
@@ -3124,6 +3124,10 @@ div.m ul#civicrm-menu,
 .crm-container .select2-container[class*=" fa-"]:before {
   display: none;
 }
+.crm-container .select2-results .select2-result.select2-disabled > .select2-result-label {
+  opacity: .6;
+  cursor: default;
+}
 
 /* Restore this property otherwise our css overrides it */
 .select2-search input {

diff --git a/js/wysiwyg/admin.ckeditor-configurator.js b/js/wysiwyg/admin.ckeditor-configurator.js
@@ -45,16 +45,41 @@
       }
       else {
         $el.after('<span>&nbsp; = &nbsp;<input class="crm-form-text ' + (type==='Number' ? 'eight" type="number"' : 'huge" type="text"') + ' name="config_' + name + '"/></span>');
+        $el.next('span').find('input.crm-form-text[type=text]').change(validateJson);
       }
     } else {
       $el.closest('div').remove();
     }
   }
 
+  function getOptionList() {
+    var list = [];
+    _.forEach(options, function(option) {
+      var opt = _.cloneDeep(option);
+      if ($('[name="config_' + opt.id + '"]').length) {
+        opt.disabled = true;
+      }
+      list.push(opt);
+    });
+    return {results: list, text: 'id'};
+  }
+
+  function validateJson() {
+    var val = $(this).val();
+    $(this).parent().removeClass('crm-error');
+    if (val[0] === '[' || val[0] === '{') {
+      try {
+        JSON.parse(val);
+      } catch (e) {
+        $(this).parent().addClass('crm-error');
+      }
+    }
+  }
+
   function addOption() {
     $('#crm-custom-config-options').append($(configRowTpl({})));
-    $('div:last input.crm-config-option-name', '#crm-custom-config-options').crmSelect2({
-      data: {results: options, text: 'id'},
+    $('.crm-config-option-row:last input.crm-config-option-name', '#crm-custom-config-options').crmSelect2({
+      data: getOptionList,
       formatSelection: function(field) {
         return '<strong>' + field.id + '</strong> (' + field.type + ')';
       },

diff --git a/templates/CRM/Admin/Page/CKEditorConfig.tpl b/templates/CRM/Admin/Page/CKEditorConfig.tpl
@@ -60,6 +60,10 @@
     border-bottom: 0 none;
     padding: 3px 10px 1px !important;
   }
+  .crm-config-option-row span.crm-error:after {
+    font-family: FontAwesome;
+    content: " \f071 Invalid JSON"
+  }
 {/literal}</style>
 {* Force the custom config file to reload by appending a new query string *}
 <script type="text/javascript">
@@ -105,7 +109,7 @@
     <div class="crm-block crm-form-block">
       <fieldset>
         <legend>{ts}Advanced Options{/ts}</legend>
-        <div class="description">{ts 1='href="http://docs.ckeditor.com/#!/api/CKEDITOR.config" target="_blank"'}Refer to the <a %1>CKEditor Api Documentation</a> for details.{/ts}</div>
+        <div class="description">{ts 1='href="https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html" target="_blank"'}Refer to the <a %1>CKEditor Api Documentation</a> for details.{/ts}</div>
         <div id="crm-custom-config-options"></div>
       </fieldset>
     </div>