From 2dbdb47a5612fd67ee2b51fe3638c500db230944 Mon Sep 17 00:00:00 2001 From: Alan Date: Thu, 7 Sep 2023 12:49:40 +0800 Subject: [PATCH] fix #7793 - captions editing should store values in outer figure, rather than caption --- Roo/HtmlEditorCore.js | 23 ++++++- Roo/htmleditor/BlockFigure.js | 109 ++++++++++++++++++--------------- roojs-all.js | 15 +++-- roojs-bootstrap-debug.js | 111 +++++++++++++++++++--------------- roojs-bootstrap.js | 15 +++-- roojs-debug.js | 111 +++++++++++++++++++--------------- roojs-ui-debug.js | 111 +++++++++++++++++++--------------- roojs-ui.js | 15 +++-- 8 files changed, 290 insertions(+), 220 deletions(-) diff --git a/Roo/HtmlEditorCore.js b/Roo/HtmlEditorCore.js index 2dd07c93bb..5c28b286de 100644 --- a/Roo/HtmlEditorCore.js +++ b/Roo/HtmlEditorCore.js @@ -394,6 +394,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { 'colspan', 'rowspan', 'data-display', + 'data-caption-display', 'data-width', 'data-caption', 'start' , @@ -692,7 +693,27 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { 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_white : [ + 'href', + 'src', + 'name', + 'align', + 'colspan', + 'rowspan', + 'data-display', + 'data-caption-display', + 'data-width', + 'data-caption', + 'start' , + 'style', + // youtube embed. + 'class', + 'allowfullscreen', + 'frameborder', + 'width', + 'height', + 'alt' + ], attrib_clean : ['href', 'src' ] }); new Roo.htmleditor.FilterBlack({ node : d, tag : this.black}); diff --git a/Roo/htmleditor/BlockFigure.js b/Roo/htmleditor/BlockFigure.js index 60e83f737b..70b56c0ffb 100644 --- a/Roo/htmleditor/BlockFigure.js +++ b/Roo/htmleditor/BlockFigure.js @@ -315,15 +315,15 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { ] }; } - // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption - var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption"); - + + var ret = { tag: 'figure', 'data-block' : 'Figure', 'data-width' : this.width, 'data-caption' : this.caption, + 'data-caption-display' : this.caption_display, contenteditable : 'false', style : { @@ -336,51 +336,52 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { textAlign : this.align // seems to work for email.. }, - align : this.align, cn : [ - img, - - { - tag: 'figcaption', - 'data-display' : this.caption_display, - style : { - textAlign : 'left', - fontSize : '16px', - lineHeight : '24px', - display : this.caption_display, - maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important', - margin: m, - width: this.align == 'center' ? this.width : '100%' - - - }, - cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '', - cn : [ - { - tag: 'div', - style : { - marginTop : '16px', - textAlign : 'left' - }, - align: 'left', - cn : [ - { - // we can not rely on yahoo syndication to use CSS elements - so have to use '' to encase stuff. - tag : 'i', - contenteditable : Roo.htmleditor.BlockFigure.caption_edit, - html : captionhtml - } - - ] - } - - ] - - } + img ] }; + + // show figcaption only if caption_display is 'block' + if(this.caption_display == 'block') { + ret['cn'].push({ + tag: 'figcaption', + style : { + textAlign : 'left', + fontSize : '16px', + lineHeight : '24px', + display : this.caption_display, + maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important', + margin: m, + width: this.align == 'center' ? this.width : '100%' + + + }, + cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '', + cn : [ + { + tag: 'div', + style : { + marginTop : '16px', + textAlign : 'left' + }, + align: 'left', + cn : [ + { + // we can not rely on yahoo syndication to use CSS elements - so have to use '' to encase stuff. + tag : 'i', + contenteditable : Roo.htmleditor.BlockFigure.caption_edit, + html : this.caption.length ? this.caption : "Caption" // fake caption + } + + ] + } + + ] + + }); + } return ret; }, @@ -396,19 +397,31 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { this.image_src = this.getVal(node, 'img', 'src'); this.align = this.getVal(node, 'figure', 'align'); - - /// not really used - as hidden captions do not store the content here.. + + // caption display is stored in figure + this.caption_display = this.getVal(node, true, 'data-caption-display'); + + // backward compatible + // it was stored in figcaption + if(this.caption_display == '') { + this.caption_display = this.getVal(node, 'figcaption', 'data-display'); + } + + // read caption from figcaption var figcaption = this.getVal(node, 'figcaption', false); + if (figcaption !== '') { this.caption = this.getVal(figcaption, 'i', 'html'); } - + - this.caption_display = this.getVal(node, 'figcaption', 'data-display'); + // read caption from data-caption in figure if no caption from figcaption var dc = this.getVal(node, true, 'data-caption'); - if (this.caption_display == 'none' && figcaption != '' && dc && dc.length) { + + if(this.caption_display == 'none' && dc && dc.length){ this.caption = dc; } + //this.text_align = this.getVal(node, 'figcaption', 'style','text-align'); this.width = this.getVal(node, true, 'data-width'); //this.margin = this.getVal(node, 'figure', 'style', 'margin'); diff --git a/roojs-all.js b/roojs-all.js index f9b7a6d204..7e8904f35d 100644 --- a/roojs-all.js +++ b/roojs-all.js @@ -2012,13 +2012,12 @@ var b=B();b.width=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent( var b=B();b.align=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent();}},xns:C.form,store:{xtype:'SimpleStore',data:[['left'],['right'],['center']],fields:['val'],xns:Roo.data}},{xtype:'Button',text:'Hide Caption',name:'caption_display',pressed:false,enableToggle:true,setValue:function(v){this.setText(v?"Hide Caption":"Show Caption"); this.setPressed(v!='block');},listeners:{toggle:function(F,G){var b=B();b.caption_display=b.caption_display=='block'?'none':'block';this.setText(b.caption_display=='block'?"Hide Caption":"Show Caption");b.updateElement();D();A.editorcore.selectNode(A.tb.selectedNode); A.editorcore.onEditorEvent();}},xns:C.Toolbar}];},toObject:function(){var d=document.createElement('div');d.innerHTML=this.caption;var m=this.width!='100%'&&this.align=='center'?'0 auto':0;var iw=this.align=='center'?this.width:'100%';var A={tag:'img',contenteditable:'false',src:this.image_src,alt:d.innerText.replace(/\n/g," ").replace(/\s+/g,' ').trim(),style:{width:iw,maxWidth:iw+' !important',margin:m} -};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B=this.caption_display=='none'?'':(this.caption.length?this.caption:"Caption"); -var C={tag:'figure','data-block':'Figure','data-width':this.width,'data-caption':this.caption,contenteditable:'false',style:{display:'block',float:this.align,maxWidth:this.align=='center'?'100% !important':(this.width+' !important'),width:this.align=='center'?'100%':this.width,margin:'0px',padding:this.align=='center'?'0':'0 10px',textAlign:this.align} -,align:this.align,cn:[A,{tag:'figcaption','data-display':this.caption_display,style:{textAlign:'left',fontSize:'16px',lineHeight:'24px',display:this.caption_display,maxWidth:(this.align=='center'?this.width:'100%')+' !important',margin:m,width:this.align=='center'?this.width:'100%'} -,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{marginTop:'16px',textAlign:'left'},align:'left',cn:[{tag:'i',contenteditable:Roo.htmleditor.BlockFigure.caption_edit,html:B}]}]}]};return C;},readElement:function(A){this.video_url=this.getVal(A,'div','src'); -this.cls=this.getVal(A,'div','class');this.href=this.getVal(A,'a','href');this.image_src=this.getVal(A,'img','src');this.align=this.getVal(A,'figure','align');var B=this.getVal(A,'figcaption',false);if(B!==''){this.caption=this.getVal(B,'i','html');}this.caption_display=this.getVal(A,'figcaption','data-display'); -var dc=this.getVal(A,true,'data-caption');if(this.caption_display=='none'&&B!=''&&dc&&dc.length){this.caption=dc;}this.width=this.getVal(A,true,'data-width');},removeNode:function(){return this.node;}});Roo.apply(Roo.htmleditor.BlockFigure,{caption_edit:true} -); +};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B={tag:'figure','data-block':'Figure','data-width':this.width,'data-caption':this.caption,'data-caption-display':this.caption_display,contenteditable:'false',style:{display:'block',float:this.align,maxWidth:this.align=='center'?'100% !important':(this.width+' !important'),width:this.align=='center'?'100%':this.width,margin:'0px',padding:this.align=='center'?'0':'0 10px',textAlign:this.align} +,align:this.align,cn:[A]};if(this.caption_display=='block'){B['cn'].push({tag:'figcaption',style:{textAlign:'left',fontSize:'16px',lineHeight:'24px',display:this.caption_display,maxWidth:(this.align=='center'?this.width:'100%')+' !important',margin:m,width:this.align=='center'?this.width:'100%'} +,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{marginTop:'16px',textAlign:'left'},align:'left',cn:[{tag:'i',contenteditable:Roo.htmleditor.BlockFigure.caption_edit,html:this.caption.length?this.caption:"Caption"}]}]});}return B;},readElement:function(A){this.video_url=this.getVal(A,'div','src'); +this.cls=this.getVal(A,'div','class');this.href=this.getVal(A,'a','href');this.image_src=this.getVal(A,'img','src');this.align=this.getVal(A,'figure','align');this.caption_display=this.getVal(A,true,'data-caption-display');if(this.caption_display==''){this.caption_display=this.getVal(A,'figcaption','data-display'); +}var B=this.getVal(A,'figcaption',false);if(B!==''){this.caption=this.getVal(B,'i','html');}var dc=this.getVal(A,true,'data-caption');if(this.caption_display=='none'&&this.caption==''&&dc&&dc.length){this.caption=dc;}this.width=this.getVal(A,true,'data-width'); +},removeNode:function(){return this.node;}});Roo.apply(Roo.htmleditor.BlockFigure,{caption_edit:true}); // Roo/htmleditor/BlockTable.js Roo.htmleditor.BlockTable=function(A){if(A.node){this.readElement(A.node);this.updateElement(A.node);}Roo.apply(this,A);if(!A.node){this.rows=[];for(var r=0;r5){if(Roo.isSafari){A=A.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi,'');}}if(A==' '){A='';} return A;},syncValue:function(){if(this.initialized){if(this.undoManager){this.undoManager.addEvent();}var bd=(this.doc.body||this.doc.documentElement);var A=this.win.getSelection();var B=document.createElement('div');B.innerHTML=bd.innerHTML;var C=B.getElementsByClassName('gtx-trans-icon'); -if(C.length>0){var rm=C.item(0).parentNode;rm.parentNode.removeChild(rm);}if(this.enableBlocks){new Roo.htmleditor.FilterBlock({node:B});}var D=B.innerHTML;if(this.autoClean){new Roo.htmleditor.FilterAttributes({node:B,attrib_white:['href','src','name','align','colspan','rowspan','data-display','data-width','data-caption','start','style','class','allowfullscreen','frameborder','width','height','alt'],attrib_clean:['href','src']} +if(C.length>0){var rm=C.item(0).parentNode;rm.parentNode.removeChild(rm);}if(this.enableBlocks){new Roo.htmleditor.FilterBlock({node:B});}var D=B.innerHTML;if(this.autoClean){new Roo.htmleditor.FilterAttributes({node:B,attrib_white:['href','src','name','align','colspan','rowspan','data-caption-display','data-width','data-caption','start','style','class','allowfullscreen','frameborder','width','height','alt'],attrib_clean:['href','src']} );var E=new Roo.htmleditor.TidySerializer({inner:true});D=E.serialize(B);}if(Roo.isSafari){var bs=bd.getAttribute('style');var m=bs?bs.match(/text-align:(.*?);/i):false;if(m&&m[1]){D='
'+D+'
';}}D=this.cleanHtml(D);D=D.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g,function(F){var cc=F.charCodeAt(); if(F.length==2){var G=F.charCodeAt(0)-0xD800;var H=F.charCodeAt(1)-0xDC00;cc=(G*0x400)+H+0x10000;}else if((cc>=0x4E00&&cc<0xA000)||(cc>=0x3400&&cc<0x4E00)||(cc>=0xf900&&cc<0xfb00)){return F;}return "&#"+cc+";";});if(this.owner.fireEvent('beforesync',this,D)!==false){this.el.dom.value=D; this.owner.fireEvent('sync',this,D);}}},pushValue:function(){if(this.initialized){var v=this.el.dom.value.trim();if(this.owner.fireEvent('beforepush',this,v)!==false){var d=(this.doc.body||this.doc.documentElement);d.innerHTML=v;this.el.dom.value=d.innerHTML; diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 94ab2d3039..d7a36ad3f5 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -29697,15 +29697,15 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { ] }; } - // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption - var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption"); - + + var ret = { tag: 'figure', 'data-block' : 'Figure', 'data-width' : this.width, 'data-caption' : this.caption, + 'data-caption-display' : this.caption_display, contenteditable : 'false', style : { @@ -29718,51 +29718,52 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { textAlign : this.align // seems to work for email.. }, - align : this.align, cn : [ - img, - - { - tag: 'figcaption', - 'data-display' : this.caption_display, - style : { - textAlign : 'left', - fontSize : '16px', - lineHeight : '24px', - display : this.caption_display, - maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important', - margin: m, - width: this.align == 'center' ? this.width : '100%' - - - }, - cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '', - cn : [ - { - tag: 'div', - style : { - marginTop : '16px', - textAlign : 'left' - }, - align: 'left', - cn : [ - { - // we can not rely on yahoo syndication to use CSS elements - so have to use '' to encase stuff. - tag : 'i', - contenteditable : Roo.htmleditor.BlockFigure.caption_edit, - html : captionhtml - } - - ] - } - - ] - - } + img ] }; + + // show figcaption only if caption_display is 'block' + if(this.caption_display == 'block') { + ret['cn'].push({ + tag: 'figcaption', + style : { + textAlign : 'left', + fontSize : '16px', + lineHeight : '24px', + display : this.caption_display, + maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important', + margin: m, + width: this.align == 'center' ? this.width : '100%' + + + }, + cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '', + cn : [ + { + tag: 'div', + style : { + marginTop : '16px', + textAlign : 'left' + }, + align: 'left', + cn : [ + { + // we can not rely on yahoo syndication to use CSS elements - so have to use '' to encase stuff. + tag : 'i', + contenteditable : Roo.htmleditor.BlockFigure.caption_edit, + html : this.caption.length ? this.caption : "Caption" // fake caption + } + + ] + } + + ] + + }); + } return ret; }, @@ -29778,19 +29779,31 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { this.image_src = this.getVal(node, 'img', 'src'); this.align = this.getVal(node, 'figure', 'align'); - - /// not really used - as hidden captions do not store the content here.. + + // caption display is stored in figure + this.caption_display = this.getVal(node, true, 'data-caption-display'); + + // backward compatible + // it was stored in figcaption + if(this.caption_display == '') { + this.caption_display = this.getVal(node, 'figcaption', 'data-display'); + } + + // read caption from figcaption var figcaption = this.getVal(node, 'figcaption', false); + if (figcaption !== '') { this.caption = this.getVal(figcaption, 'i', 'html'); } - + - this.caption_display = this.getVal(node, 'figcaption', 'data-display'); + // read caption from data-caption in figure if no caption from figcaption var dc = this.getVal(node, true, 'data-caption'); - if (this.caption_display == 'none' && figcaption != '' && dc && dc.length) { + + if(this.caption_display == 'none' && this.caption == '' && dc && dc.length){ this.caption = dc; } + //this.text_align = this.getVal(node, 'figcaption', 'style','text-align'); this.width = this.getVal(node, true, 'data-width'); //this.margin = this.getVal(node, 'figure', 'style', 'margin'); @@ -31456,7 +31469,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { 'align', 'colspan', 'rowspan', - 'data-display', + 'data-caption-display', 'data-width', 'data-caption', 'start' , diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index 16f8bda18a..2832bbcb1d 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -1286,13 +1286,12 @@ var b=B();b.width=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent( var b=B();b.align=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent();}},xns:C.form,store:{xtype:'SimpleStore',data:[['left'],['right'],['center']],fields:['val'],xns:Roo.data}},{xtype:'Button',text:'Hide Caption',name:'caption_display',pressed:false,enableToggle:true,setValue:function(v){this.setText(v?"Hide Caption":"Show Caption"); this.setPressed(v!='block');},listeners:{toggle:function(F,G){var b=B();b.caption_display=b.caption_display=='block'?'none':'block';this.setText(b.caption_display=='block'?"Hide Caption":"Show Caption");b.updateElement();D();A.editorcore.selectNode(A.tb.selectedNode); A.editorcore.onEditorEvent();}},xns:C.Toolbar}];},toObject:function(){var d=document.createElement('div');d.innerHTML=this.caption;var m=this.width!='100%'&&this.align=='center'?'0 auto':0;var iw=this.align=='center'?this.width:'100%';var A={tag:'img',contenteditable:'false',src:this.image_src,alt:d.innerText.replace(/\n/g," ").replace(/\s+/g,' ').trim(),style:{width:iw,maxWidth:iw+' !important',margin:m} -};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B=this.caption_display=='none'?'':(this.caption.length?this.caption:"Caption"); -var C={tag:'figure','data-block':'Figure','data-width':this.width,'data-caption':this.caption,contenteditable:'false',style:{display:'block',float:this.align,maxWidth:this.align=='center'?'100% !important':(this.width+' !important'),width:this.align=='center'?'100%':this.width,margin:'0px',padding:this.align=='center'?'0':'0 10px',textAlign:this.align} -,align:this.align,cn:[A,{tag:'figcaption','data-display':this.caption_display,style:{textAlign:'left',fontSize:'16px',lineHeight:'24px',display:this.caption_display,maxWidth:(this.align=='center'?this.width:'100%')+' !important',margin:m,width:this.align=='center'?this.width:'100%'} -,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{marginTop:'16px',textAlign:'left'},align:'left',cn:[{tag:'i',contenteditable:Roo.htmleditor.BlockFigure.caption_edit,html:B}]}]}]};return C;},readElement:function(A){this.video_url=this.getVal(A,'div','src'); -this.cls=this.getVal(A,'div','class');this.href=this.getVal(A,'a','href');this.image_src=this.getVal(A,'img','src');this.align=this.getVal(A,'figure','align');var B=this.getVal(A,'figcaption',false);if(B!==''){this.caption=this.getVal(B,'i','html');}this.caption_display=this.getVal(A,'figcaption','data-display'); -var dc=this.getVal(A,true,'data-caption');if(this.caption_display=='none'&&B!=''&&dc&&dc.length){this.caption=dc;}this.width=this.getVal(A,true,'data-width');},removeNode:function(){return this.node;}});Roo.apply(Roo.htmleditor.BlockFigure,{caption_edit:true} -); +};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B={tag:'figure','data-block':'Figure','data-width':this.width,'data-caption':this.caption,'data-caption-display':this.caption_display,contenteditable:'false',style:{display:'block',float:this.align,maxWidth:this.align=='center'?'100% !important':(this.width+' !important'),width:this.align=='center'?'100%':this.width,margin:'0px',padding:this.align=='center'?'0':'0 10px',textAlign:this.align} +,align:this.align,cn:[A]};if(this.caption_display=='block'){B['cn'].push({tag:'figcaption',style:{textAlign:'left',fontSize:'16px',lineHeight:'24px',display:this.caption_display,maxWidth:(this.align=='center'?this.width:'100%')+' !important',margin:m,width:this.align=='center'?this.width:'100%'} +,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{marginTop:'16px',textAlign:'left'},align:'left',cn:[{tag:'i',contenteditable:Roo.htmleditor.BlockFigure.caption_edit,html:this.caption.length?this.caption:"Caption"}]}]});}return B;},readElement:function(A){this.video_url=this.getVal(A,'div','src'); +this.cls=this.getVal(A,'div','class');this.href=this.getVal(A,'a','href');this.image_src=this.getVal(A,'img','src');this.align=this.getVal(A,'figure','align');this.caption_display=this.getVal(A,true,'data-caption-display');if(this.caption_display==''){this.caption_display=this.getVal(A,'figcaption','data-display'); +}var B=this.getVal(A,'figcaption',false);if(B!==''){this.caption=this.getVal(B,'i','html');}var dc=this.getVal(A,true,'data-caption');if(this.caption_display=='none'&&this.caption==''&&dc&&dc.length){this.caption=dc;}this.width=this.getVal(A,true,'data-width'); +},removeNode:function(){return this.node;}});Roo.apply(Roo.htmleditor.BlockFigure,{caption_edit:true}); // Roo/htmleditor/BlockTable.js Roo.htmleditor.BlockTable=function(A){if(A.node){this.readElement(A.node);this.updateElement(A.node);}Roo.apply(this,A);if(!A.node){this.rows=[];for(var r=0;r5){if(Roo.isSafari){A=A.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi,'');}}if(A==' '){A='';} return A;},syncValue:function(){if(this.initialized){if(this.undoManager){this.undoManager.addEvent();}var bd=(this.doc.body||this.doc.documentElement);var A=this.win.getSelection();var B=document.createElement('div');B.innerHTML=bd.innerHTML;var C=B.getElementsByClassName('gtx-trans-icon'); -if(C.length>0){var rm=C.item(0).parentNode;rm.parentNode.removeChild(rm);}if(this.enableBlocks){new Roo.htmleditor.FilterBlock({node:B});}var D=B.innerHTML;if(this.autoClean){new Roo.htmleditor.FilterAttributes({node:B,attrib_white:['href','src','name','align','colspan','rowspan','data-display','data-width','data-caption','start','style','class','allowfullscreen','frameborder','width','height','alt'],attrib_clean:['href','src']} +if(C.length>0){var rm=C.item(0).parentNode;rm.parentNode.removeChild(rm);}if(this.enableBlocks){new Roo.htmleditor.FilterBlock({node:B});}var D=B.innerHTML;if(this.autoClean){new Roo.htmleditor.FilterAttributes({node:B,attrib_white:['href','src','name','align','colspan','rowspan','data-caption-display','data-width','data-caption','start','style','class','allowfullscreen','frameborder','width','height','alt'],attrib_clean:['href','src']} );var E=new Roo.htmleditor.TidySerializer({inner:true});D=E.serialize(B);}if(Roo.isSafari){var bs=bd.getAttribute('style');var m=bs?bs.match(/text-align:(.*?);/i):false;if(m&&m[1]){D='
'+D+'
';}}D=this.cleanHtml(D);D=D.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g,function(F){var cc=F.charCodeAt(); if(F.length==2){var G=F.charCodeAt(0)-0xD800;var H=F.charCodeAt(1)-0xDC00;cc=(G*0x400)+H+0x10000;}else if((cc>=0x4E00&&cc<0xA000)||(cc>=0x3400&&cc<0x4E00)||(cc>=0xf900&&cc<0xfb00)){return F;}return "&#"+cc+";";});if(this.owner.fireEvent('beforesync',this,D)!==false){this.el.dom.value=D; this.owner.fireEvent('sync',this,D);}}},pushValue:function(){if(this.initialized){var v=this.el.dom.value.trim();if(this.owner.fireEvent('beforepush',this,v)!==false){var d=(this.doc.body||this.doc.documentElement);d.innerHTML=v;this.el.dom.value=d.innerHTML; diff --git a/roojs-debug.js b/roojs-debug.js index 088a9d13aa..010cdd7b04 100644 --- a/roojs-debug.js +++ b/roojs-debug.js @@ -48590,15 +48590,15 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { ] }; } - // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption - var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption"); - + + var ret = { tag: 'figure', 'data-block' : 'Figure', 'data-width' : this.width, 'data-caption' : this.caption, + 'data-caption-display' : this.caption_display, contenteditable : 'false', style : { @@ -48611,51 +48611,52 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { textAlign : this.align // seems to work for email.. }, - align : this.align, cn : [ - img, - - { - tag: 'figcaption', - 'data-display' : this.caption_display, - style : { - textAlign : 'left', - fontSize : '16px', - lineHeight : '24px', - display : this.caption_display, - maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important', - margin: m, - width: this.align == 'center' ? this.width : '100%' - - - }, - cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '', - cn : [ - { - tag: 'div', - style : { - marginTop : '16px', - textAlign : 'left' - }, - align: 'left', - cn : [ - { - // we can not rely on yahoo syndication to use CSS elements - so have to use '' to encase stuff. - tag : 'i', - contenteditable : Roo.htmleditor.BlockFigure.caption_edit, - html : captionhtml - } - - ] - } - - ] - - } + img ] }; + + // show figcaption only if caption_display is 'block' + if(this.caption_display == 'block') { + ret['cn'].push({ + tag: 'figcaption', + style : { + textAlign : 'left', + fontSize : '16px', + lineHeight : '24px', + display : this.caption_display, + maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important', + margin: m, + width: this.align == 'center' ? this.width : '100%' + + + }, + cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '', + cn : [ + { + tag: 'div', + style : { + marginTop : '16px', + textAlign : 'left' + }, + align: 'left', + cn : [ + { + // we can not rely on yahoo syndication to use CSS elements - so have to use '' to encase stuff. + tag : 'i', + contenteditable : Roo.htmleditor.BlockFigure.caption_edit, + html : this.caption.length ? this.caption : "Caption" // fake caption + } + + ] + } + + ] + + }); + } return ret; }, @@ -48671,19 +48672,31 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { this.image_src = this.getVal(node, 'img', 'src'); this.align = this.getVal(node, 'figure', 'align'); - - /// not really used - as hidden captions do not store the content here.. + + // caption display is stored in figure + this.caption_display = this.getVal(node, true, 'data-caption-display'); + + // backward compatible + // it was stored in figcaption + if(this.caption_display == '') { + this.caption_display = this.getVal(node, 'figcaption', 'data-display'); + } + + // read caption from figcaption var figcaption = this.getVal(node, 'figcaption', false); + if (figcaption !== '') { this.caption = this.getVal(figcaption, 'i', 'html'); } - + - this.caption_display = this.getVal(node, 'figcaption', 'data-display'); + // read caption from data-caption in figure if no caption from figcaption var dc = this.getVal(node, true, 'data-caption'); - if (this.caption_display == 'none' && figcaption != '' && dc && dc.length) { + + if(this.caption_display == 'none' && this.caption == '' && dc && dc.length){ this.caption = dc; } + //this.text_align = this.getVal(node, 'figcaption', 'style','text-align'); this.width = this.getVal(node, true, 'data-width'); //this.margin = this.getVal(node, 'figure', 'style', 'margin'); @@ -50349,7 +50362,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { 'align', 'colspan', 'rowspan', - 'data-display', + 'data-caption-display', 'data-width', 'data-caption', 'start' , diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js index 2c4cd53704..07f94148fe 100644 --- a/roojs-ui-debug.js +++ b/roojs-ui-debug.js @@ -24088,15 +24088,15 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { ] }; } - // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption - var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption"); - + + var ret = { tag: 'figure', 'data-block' : 'Figure', 'data-width' : this.width, 'data-caption' : this.caption, + 'data-caption-display' : this.caption_display, contenteditable : 'false', style : { @@ -24109,51 +24109,52 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { textAlign : this.align // seems to work for email.. }, - align : this.align, cn : [ - img, - - { - tag: 'figcaption', - 'data-display' : this.caption_display, - style : { - textAlign : 'left', - fontSize : '16px', - lineHeight : '24px', - display : this.caption_display, - maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important', - margin: m, - width: this.align == 'center' ? this.width : '100%' - - - }, - cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '', - cn : [ - { - tag: 'div', - style : { - marginTop : '16px', - textAlign : 'left' - }, - align: 'left', - cn : [ - { - // we can not rely on yahoo syndication to use CSS elements - so have to use '' to encase stuff. - tag : 'i', - contenteditable : Roo.htmleditor.BlockFigure.caption_edit, - html : captionhtml - } - - ] - } - - ] - - } + img ] }; + + // show figcaption only if caption_display is 'block' + if(this.caption_display == 'block') { + ret['cn'].push({ + tag: 'figcaption', + style : { + textAlign : 'left', + fontSize : '16px', + lineHeight : '24px', + display : this.caption_display, + maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important', + margin: m, + width: this.align == 'center' ? this.width : '100%' + + + }, + cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '', + cn : [ + { + tag: 'div', + style : { + marginTop : '16px', + textAlign : 'left' + }, + align: 'left', + cn : [ + { + // we can not rely on yahoo syndication to use CSS elements - so have to use '' to encase stuff. + tag : 'i', + contenteditable : Roo.htmleditor.BlockFigure.caption_edit, + html : this.caption.length ? this.caption : "Caption" // fake caption + } + + ] + } + + ] + + }); + } return ret; }, @@ -24169,19 +24170,31 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { this.image_src = this.getVal(node, 'img', 'src'); this.align = this.getVal(node, 'figure', 'align'); - - /// not really used - as hidden captions do not store the content here.. + + // caption display is stored in figure + this.caption_display = this.getVal(node, true, 'data-caption-display'); + + // backward compatible + // it was stored in figcaption + if(this.caption_display == '') { + this.caption_display = this.getVal(node, 'figcaption', 'data-display'); + } + + // read caption from figcaption var figcaption = this.getVal(node, 'figcaption', false); + if (figcaption !== '') { this.caption = this.getVal(figcaption, 'i', 'html'); } - + - this.caption_display = this.getVal(node, 'figcaption', 'data-display'); + // read caption from data-caption in figure if no caption from figcaption var dc = this.getVal(node, true, 'data-caption'); - if (this.caption_display == 'none' && figcaption != '' && dc && dc.length) { + + if(this.caption_display == 'none' && this.caption == '' && dc && dc.length){ this.caption = dc; } + //this.text_align = this.getVal(node, 'figcaption', 'style','text-align'); this.width = this.getVal(node, true, 'data-width'); //this.margin = this.getVal(node, 'figure', 'style', 'margin'); @@ -25847,7 +25860,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { 'align', 'colspan', 'rowspan', - 'data-display', + 'data-caption-display', 'data-width', 'data-caption', 'start' , diff --git a/roojs-ui.js b/roojs-ui.js index d39ce17806..e3736a2149 100644 --- a/roojs-ui.js +++ b/roojs-ui.js @@ -1065,13 +1065,12 @@ var b=B();b.width=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent( var b=B();b.align=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent();}},xns:C.form,store:{xtype:'SimpleStore',data:[['left'],['right'],['center']],fields:['val'],xns:Roo.data}},{xtype:'Button',text:'Hide Caption',name:'caption_display',pressed:false,enableToggle:true,setValue:function(v){this.setText(v?"Hide Caption":"Show Caption"); this.setPressed(v!='block');},listeners:{toggle:function(F,G){var b=B();b.caption_display=b.caption_display=='block'?'none':'block';this.setText(b.caption_display=='block'?"Hide Caption":"Show Caption");b.updateElement();D();A.editorcore.selectNode(A.tb.selectedNode); A.editorcore.onEditorEvent();}},xns:C.Toolbar}];},toObject:function(){var d=document.createElement('div');d.innerHTML=this.caption;var m=this.width!='100%'&&this.align=='center'?'0 auto':0;var iw=this.align=='center'?this.width:'100%';var A={tag:'img',contenteditable:'false',src:this.image_src,alt:d.innerText.replace(/\n/g," ").replace(/\s+/g,' ').trim(),style:{width:iw,maxWidth:iw+' !important',margin:m} -};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B=this.caption_display=='none'?'':(this.caption.length?this.caption:"Caption"); -var C={tag:'figure','data-block':'Figure','data-width':this.width,'data-caption':this.caption,contenteditable:'false',style:{display:'block',float:this.align,maxWidth:this.align=='center'?'100% !important':(this.width+' !important'),width:this.align=='center'?'100%':this.width,margin:'0px',padding:this.align=='center'?'0':'0 10px',textAlign:this.align} -,align:this.align,cn:[A,{tag:'figcaption','data-display':this.caption_display,style:{textAlign:'left',fontSize:'16px',lineHeight:'24px',display:this.caption_display,maxWidth:(this.align=='center'?this.width:'100%')+' !important',margin:m,width:this.align=='center'?this.width:'100%'} -,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{marginTop:'16px',textAlign:'left'},align:'left',cn:[{tag:'i',contenteditable:Roo.htmleditor.BlockFigure.caption_edit,html:B}]}]}]};return C;},readElement:function(A){this.video_url=this.getVal(A,'div','src'); -this.cls=this.getVal(A,'div','class');this.href=this.getVal(A,'a','href');this.image_src=this.getVal(A,'img','src');this.align=this.getVal(A,'figure','align');var B=this.getVal(A,'figcaption',false);if(B!==''){this.caption=this.getVal(B,'i','html');}this.caption_display=this.getVal(A,'figcaption','data-display'); -var dc=this.getVal(A,true,'data-caption');if(this.caption_display=='none'&&B!=''&&dc&&dc.length){this.caption=dc;}this.width=this.getVal(A,true,'data-width');},removeNode:function(){return this.node;}});Roo.apply(Roo.htmleditor.BlockFigure,{caption_edit:true} -); +};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B={tag:'figure','data-block':'Figure','data-width':this.width,'data-caption':this.caption,'data-caption-display':this.caption_display,contenteditable:'false',style:{display:'block',float:this.align,maxWidth:this.align=='center'?'100% !important':(this.width+' !important'),width:this.align=='center'?'100%':this.width,margin:'0px',padding:this.align=='center'?'0':'0 10px',textAlign:this.align} +,align:this.align,cn:[A]};if(this.caption_display=='block'){B['cn'].push({tag:'figcaption',style:{textAlign:'left',fontSize:'16px',lineHeight:'24px',display:this.caption_display,maxWidth:(this.align=='center'?this.width:'100%')+' !important',margin:m,width:this.align=='center'?this.width:'100%'} +,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{marginTop:'16px',textAlign:'left'},align:'left',cn:[{tag:'i',contenteditable:Roo.htmleditor.BlockFigure.caption_edit,html:this.caption.length?this.caption:"Caption"}]}]});}return B;},readElement:function(A){this.video_url=this.getVal(A,'div','src'); +this.cls=this.getVal(A,'div','class');this.href=this.getVal(A,'a','href');this.image_src=this.getVal(A,'img','src');this.align=this.getVal(A,'figure','align');this.caption_display=this.getVal(A,true,'data-caption-display');if(this.caption_display==''){this.caption_display=this.getVal(A,'figcaption','data-display'); +}var B=this.getVal(A,'figcaption',false);if(B!==''){this.caption=this.getVal(B,'i','html');}var dc=this.getVal(A,true,'data-caption');if(this.caption_display=='none'&&this.caption==''&&dc&&dc.length){this.caption=dc;}this.width=this.getVal(A,true,'data-width'); +},removeNode:function(){return this.node;}});Roo.apply(Roo.htmleditor.BlockFigure,{caption_edit:true}); // Roo/htmleditor/BlockTable.js Roo.htmleditor.BlockTable=function(A){if(A.node){this.readElement(A.node);this.updateElement(A.node);}Roo.apply(this,A);if(!A.node){this.rows=[];for(var r=0;r5){if(Roo.isSafari){A=A.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi,'');}}if(A==' '){A='';} return A;},syncValue:function(){if(this.initialized){if(this.undoManager){this.undoManager.addEvent();}var bd=(this.doc.body||this.doc.documentElement);var A=this.win.getSelection();var B=document.createElement('div');B.innerHTML=bd.innerHTML;var C=B.getElementsByClassName('gtx-trans-icon'); -if(C.length>0){var rm=C.item(0).parentNode;rm.parentNode.removeChild(rm);}if(this.enableBlocks){new Roo.htmleditor.FilterBlock({node:B});}var D=B.innerHTML;if(this.autoClean){new Roo.htmleditor.FilterAttributes({node:B,attrib_white:['href','src','name','align','colspan','rowspan','data-display','data-width','data-caption','start','style','class','allowfullscreen','frameborder','width','height','alt'],attrib_clean:['href','src']} +if(C.length>0){var rm=C.item(0).parentNode;rm.parentNode.removeChild(rm);}if(this.enableBlocks){new Roo.htmleditor.FilterBlock({node:B});}var D=B.innerHTML;if(this.autoClean){new Roo.htmleditor.FilterAttributes({node:B,attrib_white:['href','src','name','align','colspan','rowspan','data-caption-display','data-width','data-caption','start','style','class','allowfullscreen','frameborder','width','height','alt'],attrib_clean:['href','src']} );var E=new Roo.htmleditor.TidySerializer({inner:true});D=E.serialize(B);}if(Roo.isSafari){var bs=bd.getAttribute('style');var m=bs?bs.match(/text-align:(.*?);/i):false;if(m&&m[1]){D='
'+D+'
';}}D=this.cleanHtml(D);D=D.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g,function(F){var cc=F.charCodeAt(); if(F.length==2){var G=F.charCodeAt(0)-0xD800;var H=F.charCodeAt(1)-0xDC00;cc=(G*0x400)+H+0x10000;}else if((cc>=0x4E00&&cc<0xA000)||(cc>=0x3400&&cc<0x4E00)||(cc>=0xf900&&cc<0xfb00)){return F;}return "&#"+cc+";";});if(this.owner.fireEvent('beforesync',this,D)!==false){this.el.dom.value=D; this.owner.fireEvent('sync',this,D);}}},pushValue:function(){if(this.initialized){var v=this.el.dom.value.trim();if(this.owner.fireEvent('beforepush',this,v)!==false){var d=(this.doc.body||this.doc.documentElement);d.innerHTML=v;this.el.dom.value=d.innerHTML; -- 2.39.2