MDL-28987 Forms Library: Added tinyMCE onblur event callback for required tinymce fields

lib/editor/tinymce/lib.php

@@ -172,7 +172,10 @@ class tinymce_texteditor extends texteditor {
                 $params['file_browser_callback'] = "M.editor_tinymce.filepicker";
             }
         }
-
+        //Add onblur event for client side text validation
+        if (!empty($options['required'])) {
+            $params['init_instance_callback'] = 'M.editor_tinymce.onblur_event';
+        }
         return $params;
     }
 }

lib/editor/tinymce/module.js

@@ -72,3 +72,28 @@ M.editor_tinymce.filepicker = function(target_id, url, type, win) {
     });
 };
 
+M.editor_tinymce.onblur_event = function(ed) {
+    //Attach event only after tinymce is intialized.
+    if (ed.onInit != undefined) {
+        var s = ed.settings;
+        //Save before event is attached, so that if this event is not generated then textarea should
+        //have loaded contents and submitting form should not throw error.
+        ed.save();
+
+        //Attach blur event for tinymce to call onchange validation function of textarea.
+        var doc = s.content_editable ? ed.getBody() : (tinymce.isGecko ? ed.getDoc() : ed.getWin());
+        tinymce.dom.Event.add(doc, 'blur', function() {
+            //save contents to textarea before calling validation script.
+            ed.save();
+            var element = document.getElementById(ed.id);
+            element.onchange(element);
+        });
+
+        //Add an extra event to make sure after window is blurred because of user clicking
+        //out of tinymce or any popup occured, then error should be cleaned on focusing back.
+        tinymce.dom.Event.add(doc, 'focus', function() {
+            var element = document.getElementById(ed.id);
+            qf_errorHandler(element, '');
+        });
+    };
+};

lib/form/editor.php

@@ -86,13 +86,22 @@ class MoodleQuickForm_editor extends HTML_QuickForm_element {
         $this->_options['subdirs'] = $allow;
     }
 
+    /**
+     * Returns editor format
+     *
+     * @return int.
+     */
+    function getFormat() {
+        return $this->_values['format'];
+    }
+
     /**
      * Checks if editor used is tinymce and is required field
      *
      * @return true if required field.
      */
-    function isRequiredTinymce() {
-        return (isset($this->_options['required_tinymce']) && $this->_options['required_tinymce']);
+    function isRequired() {
+        return (isset($this->_options['required']) && $this->_options['required']);
     }
 
     function setHelpButton($_helpbuttonargs, $function='_helpbutton') {
@@ -209,7 +218,7 @@ class MoodleQuickForm_editor extends HTML_QuickForm_element {
 
         //If editor is required and tinymce, then set required_tinymce option to initalize tinymce validation.
         if (($editor instanceof tinymce_texteditor)  && !is_null($this->getAttribute('onchange'))) {
-            $this->_options['required_tinymce'] = true;
+            $this->_options['required'] = true;
         }
 
     /// print text area - TODO: add on-the-fly switching, size configuration, etc.
@@ -221,7 +230,7 @@ class MoodleQuickForm_editor extends HTML_QuickForm_element {
         //Apply editor validation if required field
         $editorrules = '';
         if (!is_null($this->getAttribute('onblur')) && !is_null($this->getAttribute('onchange'))) {
-            $editorrules = 'onblur="'.$this->getAttribute('onblur').'" onchange="'.$this->getAttribute('onchange').'"';
+            $editorrules = 'onblur="'.htmlspecialchars($this->getAttribute('onblur')).'" onchange="'.htmlspecialchars($this->getAttribute('onchange')).'"';
         }
         $str .= '<div><textarea id="'.$id.'" name="'.$elname.'[text]" rows="'.$rows.'" cols="'.$cols.'"'.$editorrules.'>';
         $str .= s($text);

lib/formslib.php

@@ -1710,11 +1710,16 @@ class MoodleQuickForm extends HTML_QuickForm_DHTMLRulesTableless {
                             }
                         }
                     }
-                    // Fix for bug displaying errors for elements in a group
-                    //$test[$elementName][] = $registry->getValidationScript($element, $elementName, $rule);
-                    if ($element->_type == 'editor') {
+                    //for editor element, [text] is appended to the name.
+                    if ($element->getType() == 'editor') {
                         $elementName .= '[text]';
+                        //Add format to rule as moodleform check which format is supported by browser
+                        //it is not set anywhere... So small hack to make sure we pass it down to quickform
+                        if (is_null($rule['format'])) {
+                            $rule['format'] = $element->getFormat();
+                        }
                     }
+                    // Fix for bug displaying errors for elements in a group
                     $test[$elementName][0][] = $registry->getValidationScript($element, $elementName, $rule);
                     $test[$elementName][1]=$element;
                     //end of fix
@@ -1787,10 +1792,6 @@ function qf_errorHandler(element, _qfMsg) {
                 '/[_\[\]]/',
                 create_function('$matches', 'return sprintf("_%2x",ord($matches[0]));'),
                 $elementName);
-            //If editor is tinymce then tinymce should save contents before textarea can be validated.
-            if (($element->_type == 'editor') && $element->isRequiredTinymce()) {
-                array_unshift($jsArr, "tinyMCE.get('{$element->getAttribute('id')}').save();");
-            }
             $js .= '
 function validate_' . $this->_formName . '_' . $escapedElementName . '(element) {
   if (undefined == element) {
@@ -2401,17 +2402,18 @@ class MoodleQuickForm_Rule_Required extends HTML_QuickForm_Rule {
     /**
      * This function returns Javascript code used to build client-side validation.
      * It checks if an element is not empty.
-     * Note, that QuickForm does not know how to work with editor text field and builds not correct
-     * JS code for validation. If client check is enabled for editor field it will not be validated
-     * on client side no matter what this function returns.
      *
-     * @param     mixed     $options    Not used yet
+     * @param int $format
      * @return array
      */
-    function getValidationScript($options = null) {
+    function getValidationScript($format = null) {
         global $CFG;
         if (!empty($CFG->strictformsrequired)) {
-            return array('', "{jsVar}.replace(/^\s+$/g, '') == ''");
+            if (!empty($format) && $format == FORMAT_HTML) {
+                return array('', "{jsVar}.replace(/(<[^img|hr|canvas]+>)|&nbsp;|\s+/ig, '') == ''");
+            } else {
+                return array('', "{jsVar}.replace(/^\s+$/g, '') == ''");
+            }
         } else {
             return array('', "{jsVar} == ''");
         }