Skip to content

E
edx-platform
Commit 1184cc06 by Sarina Canelake
Options

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

Annotations Tools: Fixing major Firefox/Tinymce bug in annotations
parents 246a4317 0b770e1d
Showing with 143 additions and 117 deletions
common/static/js/vendor/ova/richText-annotator.js
...@@ -23,125 +23,151 @@ var _ref, ...@@ -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; }; __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) { Annotator.Plugin.RichText = (function(_super) {
__extends(RichText, _super); __extends(RichText, _super);
//Default tinymce configuration // default tinymce configuration
RichText.prototype.options = { RichText.prototype.options = {
tinymce:{ tinymce:{
selector: "li.annotator-item textarea", selector: "li.annotator-item textarea",
skin: 'studio-tmce4', skin: 'studio-tmce4',
formats: { formats: {
code: { code: {
inline: 'code' inline: 'code',
} }
}, },
codemirror: { codemirror: {
path: "/static/js/vendor" path: "/static/js/vendor",
}, },
plugins: "image link codemirror", plugins: "image link codemirror",
menubar: false, menubar: false,
toolbar_items_size: 'small', toolbar_items_size: 'small',
extended_valid_elements : "iframe[src|frameborder|style|scrolling|class|width|height|name|align|id]", 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 ", toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image rubric | code ",
resize: "both", resize: "both",
} }
}; };
function RichText(element,options) { function RichText(element,options) {
_ref = RichText.__super__.constructor.apply(this, arguments); _ref = RichText.__super__.constructor.apply(this, arguments);
return _ref; return _ref;
}; };
RichText.prototype.pluginInit = function() { RichText.prototype.pluginInit = function() {
console.log("RichText-pluginInit"); console.log("RichText-pluginInit");
var annotator = this.annotator, var annotator = this.annotator,
editor = this.annotator.editor; editor = this.annotator.editor;
//Check that annotator is working // check that annotator is working
if (!Annotator.supported()) { if (!Annotator.supported()) {
return; return;
} }
//Editor Setup // editor Setup
annotator.editor.addField({ annotator.editor.addField({
type: 'input', type: 'input',
load: this.updateEditor, submit: this.submitEditor,
}); load: this.updateEditor,
});
//Viewer setup
annotator.viewer.addField({ // viewer setup
load: this.updateViewer, annotator.viewer.addField({
}); load: this.updateViewer,
});
annotator.subscribe("annotationEditorShown", function(){ // makes sure that tinymce is hidden and shown along with the editor
$(annotator.editor.element).find('.mce-tinymce')[0].style.display='block'; annotator.subscribe("annotationEditorShown", function() {
annotator.editor.checkOrientation(); $(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;
this.options.tinymce.setup = function(ed) { // set listener for tinymce;
ed.on('change', function(e) { this.options.tinymce.setup = function(ed) {
//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;
})(Annotator.Plugin); // 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);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment