This plugin provides PasteFromWord cabability to the editor. When
clicked, a dialog opens with a spartan RichText instance to paste
word content into via the keyboard commands. The contents are
then filtered to remove word style classes and other meta-junk
that tends to cause issues.
The CSS class name for the button node is formed from `iconClassPrefix`
and `command`
dojox.editor.plugins.PasteFromWord.width
tags: public
type
String
summary
The width to use for the rich text area in the copy/pate dialog, in px. Default is 400px.
dojox.editor.plugins.PasteFromWord.height
tags: public
type
String
summary
The height to use for the rich text area in the copy/pate dialog, in px. Default is 300px.
dojox.editor.plugins.PasteFromWord._template
summary
dojox.editor.plugins.PasteFromWord._filters
tags: private
type
Array
summary
The filters is an array of regular expressions to try and strip out a lot
of style data MS Word likes to insert when pasting into a contentEditable.
Prettymuch all of it is junk and not good html. The hander is a place to put a function
for match handling. In most cases, it just handles it as empty string. But the option is
there for more complex handling.
this._dialog = new dijit.Dialog({title: strings["pasteFromWord"]}).placeAt(dojo.body()); this._dialog.set("content", dojo.string.substitute(this._template, strings));
// Make it translucent so we can fade in the window when the RTE is created. // the RTE has to be created 'visible, and this is a ncie trick to make the creation // 'pretty'. dojo.style(dojo.byId(this._uId + "_rte"), "opacity", 0.001);
// Link up the action buttons to perform the insert or cleanup. this.connect(dijit.byId(this._uId + "_paste"), "onClick", "_paste"); this.connect(dijit.byId(this._uId + "_cancel"), "onClick", "_cancel"); this.connect(this._dialog, "onHide", "_clearDialog");
this._dialog.show(); if(!this._rte){ // RTE hasn't been created yet, so we need to create it now that the // dialog is showing up. setTimeout(dojo.hitch(this, function() { this._rte = new dijit._editor.RichText({height: this.height || "300px"}, this._uId + "_rte"); this._rte.onLoadDeferred.addCallback(dojo.hitch(this, function() { dojo.animateProperty({ node: this._rte.domNode, properties: { opacity: { start: 0.001, end: 1.0 } } }).play(); })); }), 100); }
dojo.declare("dojox.editor.plugins.PasteFromWord",dijit._editor._Plugin,{ // summary: // This plugin provides PasteFromWord cabability to the editor. When // clicked, a dialog opens with a spartan RichText instance to paste // word content into via the keyboard commands. The contents are // then filtered to remove word style classes and other meta-junk // that tends to cause issues.
// iconClassPrefix: [const] String // The CSS class name for the button node is formed from `iconClassPrefix` // and `command` iconClassPrefix: "dijitAdditionalEditorIcon",
// width: [public] String // The width to use for the rich text area in the copy/pate dialog, in px. Default is 400px. width: "400px",
// height: [public] String // The height to use for the rich text area in the copy/pate dialog, in px. Default is 300px. height: "300px",
_template: ["
", "
${instructions}
", "", "
", "", "
", "
", "", " ", "", "
", "
", "", "
", "
"].join(""),
// _filters: [private] Array // The filters is an array of regular expressions to try and strip out a lot // of style data MS Word likes to insert when pasting into a contentEditable. // Prettymuch all of it is junk and not good html. The hander is a place to put a function // for match handling. In most cases, it just handles it as empty string. But the option is // there for more complex handling. _filters: [ // Meta tags, link tags, and prefixed tags {regexp: /(]*\s*>)|(<\s*link\s* href="file:[^>]*\s*>)|(<\/?\s*\w+:[^>]*\s*>)/gi, handler: ""}, // Style tags {regexp: /(?:]*)>([\s\S]*?)<\/style>|]*rel=['"]?stylesheet)([^>]*?href=(['"])([^>]*?)\4[^>\/]*)\/?>)/gi, handler: ""}, // MS class tags and comment tags. {regexp: /(class="Mso[^"]*")|()/gi, handler: ""}, // blank p tags {regexp: /(]*>\s*(\ |\u00A0)*\s*<\/p[^>]*>)|(]*>\s*]*>\s*(\ |\u00A0)*\s*<\/\s*font\s*>\s<\/p[^>]*>)/ig, handler: ""}, // Strip out styles containing mso defs and margins, as likely added in IE and are not good to have as it mangles presentation. {regexp: /(style="[^"]*mso-[^;][^"]*")|(style="margin:\s*[^;"]*;")/gi, handler: ""}, // Scripts (if any) {regexp: /(<\s*script[^>]*>((.|\s)*?)<\\?\/\s*script\s*>)|(<\s*script\b([^<>]|\s)*>?)|(<[^>]*=(\s|)*[("|')]javascript:[^$1][(\s|.)]*[$1][^>]*>)/ig, handler: ""} ],
_initButton: function(){ // summary: // Over-ride for creation of the save button. var strings = dojo.i18n.getLocalization("dojox.editor.plugins", "PasteFromWord"); this.button = new dijit.form.Button({ label: strings["pasteFromWord"], showLabel: false, iconClass: this.iconClassPrefix + " " + this.iconClassPrefix + "PasteFromWord", tabIndex: "-1", onClick: dojo.hitch(this, "_openDialog") });
this._dialog = new dijit.Dialog({title: strings["pasteFromWord"]}).placeAt(dojo.body()); this._dialog.set("content", dojo.string.substitute(this._template, strings));
// Make it translucent so we can fade in the window when the RTE is created. // the RTE has to be created 'visible, and this is a ncie trick to make the creation // 'pretty'. dojo.style(dojo.byId(this._uId + "_rte"), "opacity", 0.001);
// Link up the action buttons to perform the insert or cleanup. this.connect(dijit.byId(this._uId + "_paste"), "onClick", "_paste"); this.connect(dijit.byId(this._uId + "_cancel"), "onClick", "_cancel"); this.connect(this._dialog, "onHide", "_clearDialog"); },
updateState: function(){ // summary: // Over-ride for button state control for disabled to work. this.button.set("disabled", this.get("disabled")); },
setEditor: function(editor){ // summary: // Over-ride for the setting of the editor. // editor: Object // The editor to configure for this plugin to use. this.editor = editor; this._initButton(); },
_openDialog: function(){ // summary: // Function to trigger opening the copy dialog. // tags: // private this._dialog.show(); if(!this._rte){ // RTE hasn't been created yet, so we need to create it now that the // dialog is showing up. setTimeout(dojo.hitch(this, function() { this._rte = new dijit._editor.RichText({height: this.height || "300px"}, this._uId + "_rte"); this._rte.onLoadDeferred.addCallback(dojo.hitch(this, function() { dojo.animateProperty({ node: this._rte.domNode, properties: { opacity: { start: 0.001, end: 1.0 } } }).play(); })); }), 100); } },
_paste: function(){ // summary: // Function to handle setting the contents of the copy from dialog // into the editor. // tags: // private
// Gather the content and try to format it a bit (makes regexp cleanup simpler). // It also normalizes tag names and styles, so regexps are the same across browsers. var content = dojox.html.format.prettyPrint(this._rte.get("value"));
//Close up the dialog and clear old content. this._dialog.hide();
// Apply all the filters to remove MS specific injected text. var i; for(i = 0; i < this._filters.length; i++){ var filter = this._filters[i]; content = content.replace(filter.regexp, filter.handler); }
// Format it again to make sure it is reasonably formatted as // the regexp applies will have likely chewed up the formatting. content = dojox.html.format.prettyPrint(content);
// Paste it in. this.editor.execCommand("inserthtml", content);
summary
Function to handle setting the contents of the copy from dialog
into the editor.
dojo.declare("dojox.editor.plugins.PasteFromWord",dijit._editor._Plugin,{ // summary: // This plugin provides PasteFromWord cabability to the editor. When // clicked, a dialog opens with a spartan RichText instance to paste // word content into via the keyboard commands. The contents are // then filtered to remove word style classes and other meta-junk // that tends to cause issues.
// iconClassPrefix: [const] String // The CSS class name for the button node is formed from `iconClassPrefix` // and `command` iconClassPrefix: "dijitAdditionalEditorIcon",
// width: [public] String // The width to use for the rich text area in the copy/pate dialog, in px. Default is 400px. width: "400px",
// height: [public] String // The height to use for the rich text area in the copy/pate dialog, in px. Default is 300px. height: "300px",
_template: ["
", "
${instructions}
", "", "
", "", "
", "
", "", " ", "", "
", "
", "", "
", "
"].join(""),
// _filters: [private] Array // The filters is an array of regular expressions to try and strip out a lot // of style data MS Word likes to insert when pasting into a contentEditable. // Prettymuch all of it is junk and not good html. The hander is a place to put a function // for match handling. In most cases, it just handles it as empty string. But the option is // there for more complex handling. _filters: [ // Meta tags, link tags, and prefixed tags {regexp: /(]*\s*>)|(<\s*link\s* href="file:[^>]*\s*>)|(<\/?\s*\w+:[^>]*\s*>)/gi, handler: ""}, // Style tags {regexp: /(?:]*)>([\s\S]*?)<\/style>|]*rel=['"]?stylesheet)([^>]*?href=(['"])([^>]*?)\4[^>\/]*)\/?>)/gi, handler: ""}, // MS class tags and comment tags. {regexp: /(class="Mso[^"]*")|()/gi, handler: ""}, // blank p tags {regexp: /(]*>\s*(\ |\u00A0)*\s*<\/p[^>]*>)|(]*>\s*]*>\s*(\ |\u00A0)*\s*<\/\s*font\s*>\s<\/p[^>]*>)/ig, handler: ""}, // Strip out styles containing mso defs and margins, as likely added in IE and are not good to have as it mangles presentation. {regexp: /(style="[^"]*mso-[^;][^"]*")|(style="margin:\s*[^;"]*;")/gi, handler: ""}, // Scripts (if any) {regexp: /(<\s*script[^>]*>((.|\s)*?)<\\?\/\s*script\s*>)|(<\s*script\b([^<>]|\s)*>?)|(<[^>]*=(\s|)*[("|')]javascript:[^$1][(\s|.)]*[$1][^>]*>)/ig, handler: ""} ],
_initButton: function(){ // summary: // Over-ride for creation of the save button. var strings = dojo.i18n.getLocalization("dojox.editor.plugins", "PasteFromWord"); this.button = new dijit.form.Button({ label: strings["pasteFromWord"], showLabel: false, iconClass: this.iconClassPrefix + " " + this.iconClassPrefix + "PasteFromWord", tabIndex: "-1", onClick: dojo.hitch(this, "_openDialog") });
this._dialog = new dijit.Dialog({title: strings["pasteFromWord"]}).placeAt(dojo.body()); this._dialog.set("content", dojo.string.substitute(this._template, strings));
// Make it translucent so we can fade in the window when the RTE is created. // the RTE has to be created 'visible, and this is a ncie trick to make the creation // 'pretty'. dojo.style(dojo.byId(this._uId + "_rte"), "opacity", 0.001);
// Link up the action buttons to perform the insert or cleanup. this.connect(dijit.byId(this._uId + "_paste"), "onClick", "_paste"); this.connect(dijit.byId(this._uId + "_cancel"), "onClick", "_cancel"); this.connect(this._dialog, "onHide", "_clearDialog"); },
updateState: function(){ // summary: // Over-ride for button state control for disabled to work. this.button.set("disabled", this.get("disabled")); },
setEditor: function(editor){ // summary: // Over-ride for the setting of the editor. // editor: Object // The editor to configure for this plugin to use. this.editor = editor; this._initButton(); },
_openDialog: function(){ // summary: // Function to trigger opening the copy dialog. // tags: // private this._dialog.show(); if(!this._rte){ // RTE hasn't been created yet, so we need to create it now that the // dialog is showing up. setTimeout(dojo.hitch(this, function() { this._rte = new dijit._editor.RichText({height: this.height || "300px"}, this._uId + "_rte"); this._rte.onLoadDeferred.addCallback(dojo.hitch(this, function() { dojo.animateProperty({ node: this._rte.domNode, properties: { opacity: { start: 0.001, end: 1.0 } } }).play(); })); }), 100); } },
_paste: function(){ // summary: // Function to handle setting the contents of the copy from dialog // into the editor. // tags: // private
// Gather the content and try to format it a bit (makes regexp cleanup simpler). // It also normalizes tag names and styles, so regexps are the same across browsers. var content = dojox.html.format.prettyPrint(this._rte.get("value"));
//Close up the dialog and clear old content. this._dialog.hide();
// Apply all the filters to remove MS specific injected text. var i; for(i = 0; i < this._filters.length; i++){ var filter = this._filters[i]; content = content.replace(filter.regexp, filter.handler); }
// Format it again to make sure it is reasonably formatted as // the regexp applies will have likely chewed up the formatting. content = dojox.html.format.prettyPrint(content);
// Paste it in. this.editor.execCommand("inserthtml", content); },
_cancel: function(){ // summary: // Function to handle cancelling setting the contents of the // copy from dialog into the editor. // tags: // private this._dialog.hide(); },
_clearDialog: function(){ // summary: // simple function to cleat the contents when hide is calledon dialog // copy from dialog into the editor. // tags: // private this._rte.set("value", ""); },