Annotations Tools: Fixing major Firefox/Tinymce bug in annotations
- fixed issue in Firefox where the init gets called multiple times - fixed spacing issues and added more comments - fixed indentation, added missing parens in comment, and fixed typo
This commit is contained in:
lduarte1991
260
common/static/js/vendor/ova/richText-annotator.js
vendored
260
common/static/js/vendor/ova/richText-annotator.js
vendored
@@ -23,125 +23,151 @@ var _ref,
|
||||
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
|
||||
|
||||
Annotator.Plugin.RichText = (function(_super) {
|
||||
__extends(RichText, _super);
|
||||
|
||||
|
||||
//Default tinymce configuration
|
||||
RichText.prototype.options = {
|
||||
tinymce:{
|
||||
selector: "li.annotator-item textarea",
|
||||
skin: 'studio-tmce4',
|
||||
formats: {
|
||||
code: {
|
||||
inline: 'code'
|
||||
}
|
||||
},
|
||||
codemirror: {
|
||||
path: "/static/js/vendor"
|
||||
},
|
||||
plugins: "image link codemirror",
|
||||
menubar: false,
|
||||
toolbar_items_size: 'small',
|
||||
extended_valid_elements : "iframe[src|frameborder|style|scrolling|class|width|height|name|align|id]",
|
||||
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image rubric | code ",
|
||||
resize: "both",
|
||||
}
|
||||
};
|
||||
__extends(RichText, _super);
|
||||
|
||||
|
||||
// default tinymce configuration
|
||||
RichText.prototype.options = {
|
||||
tinymce:{
|
||||
selector: "li.annotator-item textarea",
|
||||
skin: 'studio-tmce4',
|
||||
formats: {
|
||||
code: {
|
||||
inline: 'code',
|
||||
}
|
||||
},
|
||||
codemirror: {
|
||||
path: "/static/js/vendor",
|
||||
},
|
||||
plugins: "image link codemirror",
|
||||
menubar: false,
|
||||
toolbar_items_size: 'small',
|
||||
extended_valid_elements : "iframe[src|frameborder|style|scrolling|class|width|height|name|align|id]",
|
||||
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image rubric | code ",
|
||||
resize: "both",
|
||||
}
|
||||
};
|
||||
|
||||
function RichText(element,options) {
|
||||
_ref = RichText.__super__.constructor.apply(this, arguments);
|
||||
return _ref;
|
||||
};
|
||||
function RichText(element,options) {
|
||||
_ref = RichText.__super__.constructor.apply(this, arguments);
|
||||
return _ref;
|
||||
};
|
||||
|
||||
|
||||
RichText.prototype.pluginInit = function() {
|
||||
console.log("RichText-pluginInit");
|
||||
var annotator = this.annotator,
|
||||
editor = this.annotator.editor;
|
||||
//Check that annotator is working
|
||||
if (!Annotator.supported()) {
|
||||
return;
|
||||
}
|
||||
|
||||
//Editor Setup
|
||||
annotator.editor.addField({
|
||||
type: 'input',
|
||||
load: this.updateEditor,
|
||||
});
|
||||
|
||||
//Viewer setup
|
||||
annotator.viewer.addField({
|
||||
load: this.updateViewer,
|
||||
});
|
||||
|
||||
|
||||
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';
|
||||
});
|
||||
|
||||
//set listener for tinymce;
|
||||
this.options.tinymce.setup = function(ed) {
|
||||
ed.on('change', function(e) {
|
||||
//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
|
||||
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 ',
|
||||
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
|
||||
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
|
||||
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
|
||||
results = regex.exec(url);
|
||||
|
||||
//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>";
|
||||
ed.setContent(ed.getContent()+iframeRubric);
|
||||
$(editor.element).find('textarea')[0].value = ed.getContent();
|
||||
}
|
||||
}
|
||||
});
|
||||
ed.insertContent('Main button');
|
||||
ed.label = 'My Button';
|
||||
}
|
||||
});
|
||||
};
|
||||
tinymce.init(this.options.tinymce);
|
||||
};
|
||||
|
||||
RichText.prototype.updateEditor = function(field, annotation) {
|
||||
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
|
||||
}
|
||||
|
||||
RichText.prototype.updateViewer = function(field, annotation) {
|
||||
var textDiv = $(field.parentNode).find('div:first-of-type')[0];
|
||||
textDiv.innerHTML =annotation.text;
|
||||
$(textDiv).addClass('richText-annotation');
|
||||
$(field).remove(); //this is the auto create field by annotator and it is not necessary
|
||||
}
|
||||
|
||||
return RichText;
|
||||
RichText.prototype.pluginInit = function() {
|
||||
console.log("RichText-pluginInit");
|
||||
var annotator = this.annotator,
|
||||
editor = this.annotator.editor;
|
||||
// check that annotator is working
|
||||
if (!Annotator.supported()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// editor Setup
|
||||
annotator.editor.addField({
|
||||
type: 'input',
|
||||
submit: this.submitEditor,
|
||||
load: this.updateEditor,
|
||||
});
|
||||
|
||||
// viewer setup
|
||||
annotator.viewer.addField({
|
||||
load: this.updateViewer,
|
||||
});
|
||||
|
||||
// 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';
|
||||
});
|
||||
|
||||
// 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
|
||||
$(editor.element).find('textarea')[0].value = tinymce.activeEditor.getContent();
|
||||
});
|
||||
// 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 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;
|
||||
var name = 'irb';
|
||||
var irb;
|
||||
// get the variable 'name' from the given url
|
||||
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
|
||||
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
|
||||
var results = regex.exec(url);
|
||||
|
||||
// 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>";
|
||||
ed.setContent(ed.getContent()+iframeRubric);
|
||||
$(editor.element).find('textarea')[0].value = ed.getContent();
|
||||
}
|
||||
}
|
||||
});
|
||||
ed.insertContent('Main button');
|
||||
ed.label = 'My Button';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 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 : '';
|
||||
tinymce.activeEditor.setContent(text);
|
||||
$(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).addClass('richText-annotation');
|
||||
$(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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user