MDL-44063 Atto: Set the default block element to p (if the browser supports it)

Also insert an empty paragraph by default and remove it on save.
This commit is contained in:
Damyon Wiese
2014-03-26 10:01:46 +08:00
parent b5a83da1cf
commit 86a83e3a9f
8 changed files with 133 additions and 28 deletions
@@ -36,8 +36,8 @@ M.atto_html = M.atto_html || {
if (M.atto_html.ishtml) {
M.editor_atto.enable_all_widgets(elementid);
atto.setHTML('');
atto.append(textarea.get('value'));
// Copy the text to the contenteditable div.
M.editor_atto.update_from_textarea(elementid);
textarea.hide();
atto.show();
atto.focus();
@@ -1 +1 @@
YUI.add("moodle-atto_html-button",function(e,t){M.atto_html=M.atto_html||{ishtml:!1,init:function(e){var t=function(e,t){e.preventDefault();var n=M.editor_atto.get_textarea_node(t),r=M.editor_atto.get_editable_node(t);M.atto_html.ishtml?(M.editor_atto.enable_all_widgets(t),r.setHTML(""),r.append(n.get("value")),n.hide(),r.show(),r.focus()):(M.editor_atto.disable_all_widgets(t),M.editor_atto.enable_widget(t,"html"),M.editor_atto.text_updated(t),r.hide(),n.show(),n.focus()),M.atto_html.ishtml=!M.atto_html.ishtml},n=M.util.image_url("e/source_code","core");M.editor_atto.add_toolbar_button(e.elementid,"html",n,e.group,t)}}},"@VERSION@",{requires:["node","event-valuechange"]});
YUI.add("moodle-atto_html-button",function(e,t){M.atto_html=M.atto_html||{ishtml:!1,init:function(e){var t=function(e,t){e.preventDefault();var n=M.editor_atto.get_textarea_node(t),r=M.editor_atto.get_editable_node(t);M.atto_html.ishtml?(M.editor_atto.enable_all_widgets(t),M.editor_atto.update_from_textarea(t),n.hide(),r.show(),r.focus()):(M.editor_atto.disable_all_widgets(t),M.editor_atto.enable_widget(t,"html"),M.editor_atto.text_updated(t),r.hide(),n.show(),n.focus()),M.atto_html.ishtml=!M.atto_html.ishtml},n=M.util.image_url("e/source_code","core");M.editor_atto.add_toolbar_button(e.elementid,"html",n,e.group,t)}}},"@VERSION@",{requires:["node","event-valuechange"]});
@@ -36,8 +36,8 @@ M.atto_html = M.atto_html || {
if (M.atto_html.ishtml) {
M.editor_atto.enable_all_widgets(elementid);
atto.setHTML('');
atto.append(textarea.get('value'));
// Copy the text to the contenteditable div.
M.editor_atto.update_from_textarea(elementid);
textarea.hide();
atto.show();
atto.focus();
+2 -2
View File
@@ -34,8 +34,8 @@ M.atto_html = M.atto_html || {
if (M.atto_html.ishtml) {
M.editor_atto.enable_all_widgets(elementid);
atto.setHTML('');
atto.append(textarea.get('value'));
// Copy the text to the contenteditable div.
M.editor_atto.update_from_textarea(elementid);
textarea.hide();
atto.show();
atto.focus();
@@ -563,6 +563,35 @@ M.editor_atto = M.editor_atto || {
M.editor_atto.get_editable_node(elementid).focus();
},
/**
* Copy and clean the text from the textarea into the contenteditable div.
* If the text is empty, provide a default paragraph tag to hold the content.
*
* @param string elementid of this editor
*/
update_from_textarea : function(elementid) {
var editable = M.editor_atto.get_editable_node(elementid);
var textarea = M.editor_atto.get_textarea_node(elementid);
// Clear it first.
editable.setHTML('');
// Copy text to editable div.
editable.append(textarea.get('value'));
// Clean it.
editable.cleanHTML();
// Insert a paragraph in the empty contenteditable div.
if (editable.getHTML() === '') {
if (Y.UA.ie && Y.UA.ie < 10) {
editable.setHTML('<p></p>');
} else {
editable.setHTML('<p><br></p>');
}
}
},
/**
* Initialise the editor
* @param object params for this editor instance.
@@ -600,11 +629,6 @@ M.editor_atto = M.editor_atto || {
// Style the editor.
atto.setStyle('minHeight', (1.2 * (textarea.getAttribute('rows'))) + 'em');
// Copy text to editable div.
atto.append(textarea.get('value'));
// Clean it.
atto.cleanHTML();
// Add the toolbar and editable zone to the page.
textarea.get('parentNode').insert(wrapper, textarea);
@@ -615,6 +639,9 @@ M.editor_atto = M.editor_atto || {
// Hide the old textarea.
textarea.hide();
// Copy the text to the contenteditable div.
this.update_from_textarea(params.elementid);
this.publish_events();
atto.on('atto:selectionchanged', this.save_selection, this, params.elementid);
atto.on('focus', this.restore_selection, this, params.elementid);
@@ -627,6 +654,10 @@ M.editor_atto = M.editor_atto || {
this.text_updated(params.elementid);
}, this);
// Use paragraphs not divs.
if (document.queryCommandSupported('DefaultParagraphSeparator')) {
document.execCommand('DefaultParagraphSeparator', false, 'p');
}
// Listen for Arrow left and Arrow right keys.
Y.one(Y.config.doc.body).delegate('key',
this.keyboard_navigation,
@@ -786,6 +817,11 @@ M.editor_atto = M.editor_atto || {
// Remove any and all nasties from source.
atto.cleanHTML();
// Revert untouched editor contents to an empty string.
if (atto.getHTML() === '<p></p>' || atto.getHTML() === '<p><br></p>') {
atto.setHTML('');
}
return atto.getHTML();
},
@@ -913,7 +949,6 @@ M.editor_atto = M.editor_atto || {
* @param string elementid
*/
restore_selection : function(event, elementid) {
event.preventDefault();
if (!this.focusfromclick) {
if (typeof this.selections[elementid] !== "undefined") {
this.set_selection(this.selections[elementid]);
File diff suppressed because one or more lines are too long
@@ -563,6 +563,35 @@ M.editor_atto = M.editor_atto || {
M.editor_atto.get_editable_node(elementid).focus();
},
/**
* Copy and clean the text from the textarea into the contenteditable div.
* If the text is empty, provide a default paragraph tag to hold the content.
*
* @param string elementid of this editor
*/
update_from_textarea : function(elementid) {
var editable = M.editor_atto.get_editable_node(elementid);
var textarea = M.editor_atto.get_textarea_node(elementid);
// Clear it first.
editable.setHTML('');
// Copy text to editable div.
editable.append(textarea.get('value'));
// Clean it.
editable.cleanHTML();
// Insert a paragraph in the empty contenteditable div.
if (editable.getHTML() === '') {
if (Y.UA.ie && Y.UA.ie < 10) {
editable.setHTML('<p></p>');
} else {
editable.setHTML('<p><br></p>');
}
}
},
/**
* Initialise the editor
* @param object params for this editor instance.
@@ -600,11 +629,6 @@ M.editor_atto = M.editor_atto || {
// Style the editor.
atto.setStyle('minHeight', (1.2 * (textarea.getAttribute('rows'))) + 'em');
// Copy text to editable div.
atto.append(textarea.get('value'));
// Clean it.
atto.cleanHTML();
// Add the toolbar and editable zone to the page.
textarea.get('parentNode').insert(wrapper, textarea);
@@ -615,6 +639,9 @@ M.editor_atto = M.editor_atto || {
// Hide the old textarea.
textarea.hide();
// Copy the text to the contenteditable div.
this.update_from_textarea(params.elementid);
this.publish_events();
atto.on('atto:selectionchanged', this.save_selection, this, params.elementid);
atto.on('focus', this.restore_selection, this, params.elementid);
@@ -627,6 +654,10 @@ M.editor_atto = M.editor_atto || {
this.text_updated(params.elementid);
}, this);
// Use paragraphs not divs.
if (document.queryCommandSupported('DefaultParagraphSeparator')) {
document.execCommand('DefaultParagraphSeparator', false, 'p');
}
// Listen for Arrow left and Arrow right keys.
Y.one(Y.config.doc.body).delegate('key',
this.keyboard_navigation,
@@ -786,6 +817,11 @@ M.editor_atto = M.editor_atto || {
// Remove any and all nasties from source.
atto.cleanHTML();
// Revert untouched editor contents to an empty string.
if (atto.getHTML() === '<p></p>' || atto.getHTML() === '<p><br></p>') {
atto.setHTML('');
}
return atto.getHTML();
},
@@ -913,7 +949,6 @@ M.editor_atto = M.editor_atto || {
* @param string elementid
*/
restore_selection : function(event, elementid) {
event.preventDefault();
if (!this.focusfromclick) {
if (typeof this.selections[elementid] !== "undefined") {
this.set_selection(this.selections[elementid]);
+41 -6
View File
@@ -561,6 +561,35 @@ M.editor_atto = M.editor_atto || {
M.editor_atto.get_editable_node(elementid).focus();
},
/**
* Copy and clean the text from the textarea into the contenteditable div.
* If the text is empty, provide a default paragraph tag to hold the content.
*
* @param string elementid of this editor
*/
update_from_textarea : function(elementid) {
var editable = M.editor_atto.get_editable_node(elementid);
var textarea = M.editor_atto.get_textarea_node(elementid);
// Clear it first.
editable.setHTML('');
// Copy text to editable div.
editable.append(textarea.get('value'));
// Clean it.
editable.cleanHTML();
// Insert a paragraph in the empty contenteditable div.
if (editable.getHTML() === '') {
if (Y.UA.ie && Y.UA.ie < 10) {
editable.setHTML('<p></p>');
} else {
editable.setHTML('<p><br></p>');
}
}
},
/**
* Initialise the editor
* @param object params for this editor instance.
@@ -598,11 +627,6 @@ M.editor_atto = M.editor_atto || {
// Style the editor.
atto.setStyle('minHeight', (1.2 * (textarea.getAttribute('rows'))) + 'em');
// Copy text to editable div.
atto.append(textarea.get('value'));
// Clean it.
atto.cleanHTML();
// Add the toolbar and editable zone to the page.
textarea.get('parentNode').insert(wrapper, textarea);
@@ -613,6 +637,9 @@ M.editor_atto = M.editor_atto || {
// Hide the old textarea.
textarea.hide();
// Copy the text to the contenteditable div.
this.update_from_textarea(params.elementid);
this.publish_events();
atto.on('atto:selectionchanged', this.save_selection, this, params.elementid);
atto.on('focus', this.restore_selection, this, params.elementid);
@@ -625,6 +652,10 @@ M.editor_atto = M.editor_atto || {
this.text_updated(params.elementid);
}, this);
// Use paragraphs not divs.
if (document.queryCommandSupported('DefaultParagraphSeparator')) {
document.execCommand('DefaultParagraphSeparator', false, 'p');
}
// Listen for Arrow left and Arrow right keys.
Y.one(Y.config.doc.body).delegate('key',
this.keyboard_navigation,
@@ -784,6 +815,11 @@ M.editor_atto = M.editor_atto || {
// Remove any and all nasties from source.
atto.cleanHTML();
// Revert untouched editor contents to an empty string.
if (atto.getHTML() === '<p></p>' || atto.getHTML() === '<p><br></p>') {
atto.setHTML('');
}
return atto.getHTML();
},
@@ -911,7 +947,6 @@ M.editor_atto = M.editor_atto || {
* @param string elementid
*/
restore_selection : function(event, elementid) {
event.preventDefault();
if (!this.focusfromclick) {
if (typeof this.selections[elementid] !== "undefined") {
this.set_selection(this.selections[elementid]);