Merge pull request #4675 from lduarte1991/lduarte-harvardx-pr14

Annotations Tools: Fixing major Firefox/Tinymce bug in annotations

common/static/js/vendor/ova/richText-annotator.js

@@ -26,18 +26,18 @@ Annotator.Plugin.RichText = (function(_super) {
     __extends(RichText, _super);
     
     
-	//Default tinymce configuration
+    // default tinymce configuration
     RichText.prototype.options = {
         tinymce:{
             selector: "li.annotator-item textarea",
             skin: 'studio-tmce4',
             formats: {
                 code: {
-            	inline: 'code'
+                    inline: 'code',
                 }
             },
             codemirror: {
-          		path: "/static/js/vendor"
+                path: "/static/js/vendor",
             },
             plugins: "image link codemirror",
             menubar: false,
@@ -58,63 +58,66 @@ Annotator.Plugin.RichText = (function(_super) {
         console.log("RichText-pluginInit");
         var annotator = this.annotator,
             editor = this.annotator.editor;
-		//Check that annotator is working
+        // check that annotator is working
         if (!Annotator.supported()) {
             return;
         }
         
-		//Editor Setup
+        // editor Setup
         annotator.editor.addField({
             type: 'input',
+            submit: this.submitEditor,
             load: this.updateEditor,
         });
         
-		//Viewer setup
+        // viewer setup
         annotator.viewer.addField({
             load: this.updateViewer,
         });
         
-		
-		annotator.subscribe("annotationEditorShown", function(){
-			$(annotator.editor.element).find('.mce-tinymce')[0].style.display='block';
+        // makes sure that tinymce is hidden and shown along with the editor
+        annotator.subscribe("annotationEditorShown", function() {
+            $(annotator.editor.element).find('.mce-tinymce')[0].style.display = 'block';
             annotator.editor.checkOrientation();
         });
-		annotator.subscribe("annotationEditorHidden", function(){
-			$(annotator.editor.element).find('.mce-tinymce')[0].style.display='none';
+        annotator.subscribe("annotationEditorHidden", function() {
+            $(annotator.editor.element).find('.mce-tinymce')[0].style.display = 'none';
         });
         
-		//set listener for tinymce;
+        // set listener for tinymce;
         this.options.tinymce.setup = function(ed) {
+
+            // note that the following does not work in Firefox, fix using submitEditor function
             ed.on('change', function(e) {
-				//set the modification in the textarea of annotator
+                // set the modification in the textarea of annotator
                 $(editor.element).find('textarea')[0].value = tinymce.activeEditor.getContent();
             });
-			//New button to add Rubrics of the url https://gteavirtual.org/rubric
+            // new button to add Rubrics of the url https://gteavirtual.org/rubric
             ed.addButton('rubric', {
                 icon: 'rubric',
                 title : 'Insert a rubric',
                 onclick: function() {
                     ed.windowManager.open({
-				        title: 'Insert a public rubric of the webside https://gteavirtual.org/rubric   ',
+                        title: 'Insert a public rubric of the website https://gteavirtual.org/rubric',
                         body: [
                             {type: 'textbox', name: 'url', label: 'Url'}
                         ],
                         onsubmit: function(e) {
                             // Insert content when the window form is submitted
-				            var url = e.data.url,
-				            	name = 'irb',
-				            	irb;
-				            //get the variable 'name' from the given url
+                            var url = e.data.url;
+                            var name = 'irb';
+                            var irb;
+                            // get the variable 'name' from the given url
                             name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
-							var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
-								results = regex.exec(url);
+                            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
+                            var results = regex.exec(url);
                                 
-							//the rubric id
+                            // the rubric id
                             irb = results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
                             if (irb==''){
                                 ed.windowManager.alert('Error: The given webpage didn\'t have a irb variable in the url');
                             }else{
-								var iframeRubric = "<iframe src='https://gteavirtual.org/rubric/?mod=portal&scr=viewrb&evt=frame&irb="+irb+"' style='width:800px;height:600px;overflow-y: scroll;background:transparent' frameborder='0' ></iframe>";
+                                var iframeRubric = "<iframe src='https://gteavirtual.org/rubric/?mod=portal&scr=viewrb&evt=frame&irb=" + irb + "' style='width:800px;height:600px;overflow-y: scroll;background:transparent' frameborder='0' ></iframe>";
                                 ed.setContent(ed.getContent()+iframeRubric);
                                 $(editor.element).find('textarea')[0].value = ed.getContent();
                             }
@@ -125,23 +128,46 @@ Annotator.Plugin.RichText = (function(_super) {
                 }
             });
         };
+
+        // makes sure that tinymce is not initiated by checking if editors exist
+        if(tinymce.editors.length === 0) {
             tinymce.init(this.options.tinymce);
+        }
     };
     
+    /**
+     * Copies the content of annotation text and inserts it into the tinymce instance
+     */
     RichText.prototype.updateEditor = function(field, annotation) {
-		var text = typeof annotation.text!='undefined'?annotation.text:'';
+        var text = typeof annotation.text != 'undefined' ? annotation.text : '';
         tinymce.activeEditor.setContent(text);
-		$(field).remove(); //this is the auto create field by annotator and it is not necessary
+        $(field).remove(); // this is the auto create field by annotator and it is not necessary
     }
     
+    /**
+     * Takes the text from the annotation text and makes sure it replaces the old text field
+     * with the richtext from tinymce. 
+     */
     RichText.prototype.updateViewer = function(field, annotation) {
         var textDiv = $(field.parentNode).find('div:first-of-type')[0];
-		textDiv.innerHTML =annotation.text;
+        textDiv.innerHTML = annotation.text;
         $(textDiv).addClass('richText-annotation');
-		$(field).remove(); //this is the auto create field by annotator and it is not necessary
+        $(field).remove(); // this is the auto create field by annotator and it is not necessary
+    }
+    
+    /**
+     * Gets called before submission. It checks to make sure tinymce content is saved
+     */
+    RichText.prototype.submitEditor = function(field, annotation) {
+        var tinymceText = tinymce.activeEditor.getContent();
+        
+        // Firefox has an issue where the text is not saved ("on" function doesn't work).
+        // this helps save it anyway. 
+        if (annotation.text !== tinymceText) {
+            annotation.text = tinymce.activeEditor.getContent();
+        }
     }
     
     return RichText;
 
 })(Annotator.Plugin);
-