From a60162b9f5952c123fe4a73e1ddf88a403daade4 Mon Sep 17 00:00:00 2001 From: Alan Date: Thu, 19 Jan 2023 16:03:02 +0800 Subject: [PATCH] Fix #7561 - pasting images --- Roo/HtmlEditorCore.js | 19 ++++++++++++++++++- docs/src/Roo_HtmlEditorCore.js.html | 19 ++++++++++++++++++- roojs-all.js | 5 +++-- roojs-bootstrap-debug.js | 19 ++++++++++++++++++- roojs-bootstrap.js | 5 +++-- roojs-debug.js | 19 ++++++++++++++++++- roojs-ui-debug.js | 19 ++++++++++++++++++- roojs-ui.js | 5 +++-- 8 files changed, 99 insertions(+), 11 deletions(-) diff --git a/Roo/HtmlEditorCore.js b/Roo/HtmlEditorCore.js index 38852b3cb1..0673308ced 100644 --- a/Roo/HtmlEditorCore.js +++ b/Roo/HtmlEditorCore.js @@ -608,7 +608,24 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { (window.webkitURL && webkitURL); var url = urlAPI.createObjectURL( cd.files[0]); - this.insertAtCursor(''); + var d = (new DOMParser().parseFromString('', 'text/html')).body; + // is insert asycn? + if (this.enableBlocks) { + + Array.from(d.getElementsByTagName('img')).forEach(function(img) { + if (img.closest('figure')) { // assume!! that it's aready + return; + } + var fig = new Roo.htmleditor.BlockFigure({ + image_src : img.src + }); + fig.updateElement(img); // replace it.. + + }); + } + this.insertAtCursor(d.innerHTML.replace(/ /g,' ')); + e.preventDefault(); + this.owner.fireEvent('paste', this); return false; } if (cd.types.indexOf('text/html') < 0 ) { diff --git a/docs/src/Roo_HtmlEditorCore.js.html b/docs/src/Roo_HtmlEditorCore.js.html index 289e026334..7386706480 100644 --- a/docs/src/Roo_HtmlEditorCore.js.html +++ b/docs/src/Roo_HtmlEditorCore.js.html @@ -608,7 +608,24 @@ (window.webkitURL && webkitURL); var url = urlAPI.createObjectURL( cd.files[0]); - this.insertAtCursor('<img src=" + url + ">'); + var d = (new DOMParser().parseFromString('<img src="' + url + '">', 'text/html')).body; + // is insert asycn? + if (this.enableBlocks) { + + Array.from(d.getElementsByTagName('img')).forEach(function(img) { + if (img.closest('figure')) { // assume!! that it's aready + return; + } + var fig = new Roo.htmleditor.BlockFigure({ + image_src : img.src + }); + fig.updateElement(img); // replace it.. + + }); + } + this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' ')); + e.preventDefault(); + this.owner.fireEvent('paste', this); return false; } if (cd.types.indexOf('text/html') < 0 ) { diff --git a/roojs-all.js b/roojs-all.js index 08e4b493b7..9ca1c280b7 100644 --- a/roojs-all.js +++ b/roojs-all.js @@ -2094,8 +2094,9 @@ this.win=(A.contentWindow||Roo.get(this.frameId).dom.contentWindow);}},initEdito A.bgProperties='fixed';A.setAttribute("translate","no");Roo.EventManager.on(this.doc,{'mouseup':this.onEditorEvent,'dblclick':this.onEditorEvent,'click':this.onEditorEvent,'keyup':this.onEditorEvent,buffer:100,scope:this});Roo.EventManager.on(this.doc,{'paste':this.onPasteEvent,scope:this} );if(Roo.isGecko){Roo.EventManager.on(this.doc,'keypress',this.mozKeyPress,this);}if(Roo.isIE||Roo.isSafari||Roo.isOpera){Roo.EventManager.on(this.doc,'keydown',this.fixKeys,this);}this.initialized=true;new Roo.htmleditor.KeyEnter({core:this});this.owner.fireEvent('initialize',this); this.pushValue();},onPasteEvent:function(e,v){var cd=(e.browserEvent.clipboardData||window.clipboardData);if(cd.files&&cd.files.length>0){var A=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);var B=A.createObjectURL(cd.files[0]); -this.insertAtCursor('');return false;}if(cd.types.indexOf('text/html')<0){return false;}var C=[];var D=cd.getData('text/html');if(cd.types.indexOf('text/rtf')>-1){var E=new Roo.rtf.Parser(cd.getData('text/rtf'));C=E.doc?E.doc.getElementsByType('pict'):[]; -}C=C.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/);}).map(function(g){return g.toDataURL();}).filter(function(g){return g!='about:blank';});D=this.cleanWordChars(D);var d=(new DOMParser().parseFromString(D,'text/html')).body; +var d=(new DOMParser().parseFromString('','text/html')).body;if(this.enableBlocks){Array.from(d.getElementsByTagName('img')).forEach(function(F){if(F.closest('figure')){return;}var G=new Roo.htmleditor.BlockFigure({image_src:F.src});G.updateElement(F); +});}this.insertAtCursor(d.innerHTML.replace(/ /g,' '));e.preventDefault();this.owner.fireEvent('paste',this);return false;}if(cd.types.indexOf('text/html')<0){return false;}var C=[];var D=cd.getData('text/html');if(cd.types.indexOf('text/rtf')>-1){var E=new Roo.rtf.Parser(cd.getData('text/rtf')); +C=E.doc?E.doc.getElementsByType('pict'):[];}C=C.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/);}).map(function(g){return g.toDataURL();}).filter(function(g){return g!='about:blank';});D=this.cleanWordChars(D);var d=(new DOMParser().parseFromString(D,'text/html')).body; var sn=this.getParentElement();if(d.getElementsByTagName('table').length&&sn&&sn.closest('table')){e.preventDefault();this.insertAtCursor("You can not nest tables");return false;}if(C.length>0){var ar=Array.from(d.getElementsByTagName('v:imagedata'));Roo.each(ar,function(F){F.parentNode.insertBefore(d.ownerDocument.createElement('img'),F); F.parentNode.removeChild(F);});Roo.each(d.getElementsByTagName('img'),function(F,i){F.setAttribute('src',C[i]);});}if(this.autoClean){new Roo.htmleditor.FilterWord({node:d});new Roo.htmleditor.FilterStyleToTag({node:d});new Roo.htmleditor.FilterAttributes({node:d,attrib_white:['href','src','name','align','colspan','rowspan','data-display','data-width','start'],attrib_clean:['href','src']} );new Roo.htmleditor.FilterBlack({node:d,tag:this.black});new Roo.htmleditor.FilterKeepChildren({node:d,tag:['FONT',':']});new Roo.htmleditor.FilterParagraph({node:d});new Roo.htmleditor.FilterSpan({node:d});new Roo.htmleditor.FilterLongBr({node:d});new Roo.htmleditor.FilterComment({node:d} diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index ab789813d1..0a676f7eb5 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -31375,7 +31375,24 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { (window.webkitURL && webkitURL); var url = urlAPI.createObjectURL( cd.files[0]); - this.insertAtCursor(''); + var d = (new DOMParser().parseFromString('', 'text/html')).body; + // is insert asycn? + if (this.enableBlocks) { + + Array.from(d.getElementsByTagName('img')).forEach(function(img) { + if (img.closest('figure')) { // assume!! that it's aready + return; + } + var fig = new Roo.htmleditor.BlockFigure({ + image_src : img.src + }); + fig.updateElement(img); // replace it.. + + }); + } + this.insertAtCursor(d.innerHTML.replace(/ /g,' ')); + e.preventDefault(); + this.owner.fireEvent('paste', this); return false; } if (cd.types.indexOf('text/html') < 0 ) { diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index dd8aed631d..ad01200f85 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -1349,8 +1349,9 @@ this.win=(A.contentWindow||Roo.get(this.frameId).dom.contentWindow);}},initEdito A.bgProperties='fixed';A.setAttribute("translate","no");Roo.EventManager.on(this.doc,{'mouseup':this.onEditorEvent,'dblclick':this.onEditorEvent,'click':this.onEditorEvent,'keyup':this.onEditorEvent,buffer:100,scope:this});Roo.EventManager.on(this.doc,{'paste':this.onPasteEvent,scope:this} );if(Roo.isGecko){Roo.EventManager.on(this.doc,'keypress',this.mozKeyPress,this);}if(Roo.isIE||Roo.isSafari||Roo.isOpera){Roo.EventManager.on(this.doc,'keydown',this.fixKeys,this);}this.initialized=true;new Roo.htmleditor.KeyEnter({core:this});this.owner.fireEvent('initialize',this); this.pushValue();},onPasteEvent:function(e,v){var cd=(e.browserEvent.clipboardData||window.clipboardData);if(cd.files&&cd.files.length>0){var A=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);var B=A.createObjectURL(cd.files[0]); -this.insertAtCursor('');return false;}if(cd.types.indexOf('text/html')<0){return false;}var C=[];var D=cd.getData('text/html');if(cd.types.indexOf('text/rtf')>-1){var E=new Roo.rtf.Parser(cd.getData('text/rtf'));C=E.doc?E.doc.getElementsByType('pict'):[]; -}C=C.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/);}).map(function(g){return g.toDataURL();}).filter(function(g){return g!='about:blank';});D=this.cleanWordChars(D);var d=(new DOMParser().parseFromString(D,'text/html')).body; +var d=(new DOMParser().parseFromString('','text/html')).body;if(this.enableBlocks){Array.from(d.getElementsByTagName('img')).forEach(function(F){if(F.closest('figure')){return;}var G=new Roo.htmleditor.BlockFigure({image_src:F.src});G.updateElement(F); +});}this.insertAtCursor(d.innerHTML.replace(/ /g,' '));e.preventDefault();this.owner.fireEvent('paste',this);return false;}if(cd.types.indexOf('text/html')<0){return false;}var C=[];var D=cd.getData('text/html');if(cd.types.indexOf('text/rtf')>-1){var E=new Roo.rtf.Parser(cd.getData('text/rtf')); +C=E.doc?E.doc.getElementsByType('pict'):[];}C=C.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/);}).map(function(g){return g.toDataURL();}).filter(function(g){return g!='about:blank';});D=this.cleanWordChars(D);var d=(new DOMParser().parseFromString(D,'text/html')).body; var sn=this.getParentElement();if(d.getElementsByTagName('table').length&&sn&&sn.closest('table')){e.preventDefault();this.insertAtCursor("You can not nest tables");return false;}if(C.length>0){var ar=Array.from(d.getElementsByTagName('v:imagedata'));Roo.each(ar,function(F){F.parentNode.insertBefore(d.ownerDocument.createElement('img'),F); F.parentNode.removeChild(F);});Roo.each(d.getElementsByTagName('img'),function(F,i){F.setAttribute('src',C[i]);});}if(this.autoClean){new Roo.htmleditor.FilterWord({node:d});new Roo.htmleditor.FilterStyleToTag({node:d});new Roo.htmleditor.FilterAttributes({node:d,attrib_white:['href','src','name','align','colspan','rowspan','data-display','data-width','start'],attrib_clean:['href','src']} );new Roo.htmleditor.FilterBlack({node:d,tag:this.black});new Roo.htmleditor.FilterKeepChildren({node:d,tag:['FONT',':']});new Roo.htmleditor.FilterParagraph({node:d});new Roo.htmleditor.FilterSpan({node:d});new Roo.htmleditor.FilterLongBr({node:d});new Roo.htmleditor.FilterComment({node:d} diff --git a/roojs-debug.js b/roojs-debug.js index be87bffa10..99d0499d2f 100644 --- a/roojs-debug.js +++ b/roojs-debug.js @@ -50542,7 +50542,24 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { (window.webkitURL && webkitURL); var url = urlAPI.createObjectURL( cd.files[0]); - this.insertAtCursor(''); + var d = (new DOMParser().parseFromString('', 'text/html')).body; + // is insert asycn? + if (this.enableBlocks) { + + Array.from(d.getElementsByTagName('img')).forEach(function(img) { + if (img.closest('figure')) { // assume!! that it's aready + return; + } + var fig = new Roo.htmleditor.BlockFigure({ + image_src : img.src + }); + fig.updateElement(img); // replace it.. + + }); + } + this.insertAtCursor(d.innerHTML.replace(/ /g,' ')); + e.preventDefault(); + this.owner.fireEvent('paste', this); return false; } if (cd.types.indexOf('text/html') < 0 ) { diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js index 1fff0c8ad2..d24383a562 100644 --- a/roojs-ui-debug.js +++ b/roojs-ui-debug.js @@ -26040,7 +26040,24 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { (window.webkitURL && webkitURL); var url = urlAPI.createObjectURL( cd.files[0]); - this.insertAtCursor(''); + var d = (new DOMParser().parseFromString('', 'text/html')).body; + // is insert asycn? + if (this.enableBlocks) { + + Array.from(d.getElementsByTagName('img')).forEach(function(img) { + if (img.closest('figure')) { // assume!! that it's aready + return; + } + var fig = new Roo.htmleditor.BlockFigure({ + image_src : img.src + }); + fig.updateElement(img); // replace it.. + + }); + } + this.insertAtCursor(d.innerHTML.replace(/ /g,' ')); + e.preventDefault(); + this.owner.fireEvent('paste', this); return false; } if (cd.types.indexOf('text/html') < 0 ) { diff --git a/roojs-ui.js b/roojs-ui.js index 220dacbadb..4bf9cae149 100644 --- a/roojs-ui.js +++ b/roojs-ui.js @@ -1147,8 +1147,9 @@ this.win=(A.contentWindow||Roo.get(this.frameId).dom.contentWindow);}},initEdito A.bgProperties='fixed';A.setAttribute("translate","no");Roo.EventManager.on(this.doc,{'mouseup':this.onEditorEvent,'dblclick':this.onEditorEvent,'click':this.onEditorEvent,'keyup':this.onEditorEvent,buffer:100,scope:this});Roo.EventManager.on(this.doc,{'paste':this.onPasteEvent,scope:this} );if(Roo.isGecko){Roo.EventManager.on(this.doc,'keypress',this.mozKeyPress,this);}if(Roo.isIE||Roo.isSafari||Roo.isOpera){Roo.EventManager.on(this.doc,'keydown',this.fixKeys,this);}this.initialized=true;new Roo.htmleditor.KeyEnter({core:this});this.owner.fireEvent('initialize',this); this.pushValue();},onPasteEvent:function(e,v){var cd=(e.browserEvent.clipboardData||window.clipboardData);if(cd.files&&cd.files.length>0){var A=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);var B=A.createObjectURL(cd.files[0]); -this.insertAtCursor('');return false;}if(cd.types.indexOf('text/html')<0){return false;}var C=[];var D=cd.getData('text/html');if(cd.types.indexOf('text/rtf')>-1){var E=new Roo.rtf.Parser(cd.getData('text/rtf'));C=E.doc?E.doc.getElementsByType('pict'):[]; -}C=C.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/);}).map(function(g){return g.toDataURL();}).filter(function(g){return g!='about:blank';});D=this.cleanWordChars(D);var d=(new DOMParser().parseFromString(D,'text/html')).body; +var d=(new DOMParser().parseFromString('','text/html')).body;if(this.enableBlocks){Array.from(d.getElementsByTagName('img')).forEach(function(F){if(F.closest('figure')){return;}var G=new Roo.htmleditor.BlockFigure({image_src:F.src});G.updateElement(F); +});}this.insertAtCursor(d.innerHTML.replace(/ /g,' '));e.preventDefault();this.owner.fireEvent('paste',this);return false;}if(cd.types.indexOf('text/html')<0){return false;}var C=[];var D=cd.getData('text/html');if(cd.types.indexOf('text/rtf')>-1){var E=new Roo.rtf.Parser(cd.getData('text/rtf')); +C=E.doc?E.doc.getElementsByType('pict'):[];}C=C.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/);}).map(function(g){return g.toDataURL();}).filter(function(g){return g!='about:blank';});D=this.cleanWordChars(D);var d=(new DOMParser().parseFromString(D,'text/html')).body; var sn=this.getParentElement();if(d.getElementsByTagName('table').length&&sn&&sn.closest('table')){e.preventDefault();this.insertAtCursor("You can not nest tables");return false;}if(C.length>0){var ar=Array.from(d.getElementsByTagName('v:imagedata'));Roo.each(ar,function(F){F.parentNode.insertBefore(d.ownerDocument.createElement('img'),F); F.parentNode.removeChild(F);});Roo.each(d.getElementsByTagName('img'),function(F,i){F.setAttribute('src',C[i]);});}if(this.autoClean){new Roo.htmleditor.FilterWord({node:d});new Roo.htmleditor.FilterStyleToTag({node:d});new Roo.htmleditor.FilterAttributes({node:d,attrib_white:['href','src','name','align','colspan','rowspan','data-display','data-width','start'],attrib_clean:['href','src']} );new Roo.htmleditor.FilterBlack({node:d,tag:this.black});new Roo.htmleditor.FilterKeepChildren({node:d,tag:['FONT',':']});new Roo.htmleditor.FilterParagraph({node:d});new Roo.htmleditor.FilterSpan({node:d});new Roo.htmleditor.FilterLongBr({node:d});new Roo.htmleditor.FilterComment({node:d} -- 2.39.2