From b969a627b10d8f6cc39466748ae28f50f97aba3b Mon Sep 17 00:00:00 2001 From: Alan Date: Fri, 25 Feb 2022 14:42:13 +0800 Subject: [PATCH] more features for block, and fix caption layout hopefully --- Roo/htmleditor/Block.js | 5 +++- Roo/htmleditor/BlockFigure.js | 38 +++++++++++++++++-------------- roojs-all.js | 14 ++++++------ roojs-debug.js | 43 ++++++++++++++++++++--------------- roojs-ui-debug.js | 43 ++++++++++++++++++++--------------- roojs-ui.js | 14 ++++++------ 6 files changed, 89 insertions(+), 68 deletions(-) diff --git a/Roo/htmleditor/Block.js b/Roo/htmleditor/Block.js index 7e3c16401c..fefbcc2ba6 100644 --- a/Roo/htmleditor/Block.js +++ b/Roo/htmleditor/Block.js @@ -96,7 +96,7 @@ Roo.htmleditor.Block.prototype = { * @param {DomElement} node * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ? - * @param {String} attribute (use html - for contents, or style for using next param as style) + * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node) * @param {String} style the style property - eg. text-align */ getVal : function(node, tag, attr, style) @@ -110,6 +110,9 @@ Roo.htmleditor.Block.prototype = { if (!n) { return ''; } + if (attr === false) { + return n; + } if (attr == 'html') { return n.innerHTML; } diff --git a/Roo/htmleditor/BlockFigure.js b/Roo/htmleditor/BlockFigure.js index c43f0e3994..2306237643 100644 --- a/Roo/htmleditor/BlockFigure.js +++ b/Roo/htmleditor/BlockFigure.js @@ -263,15 +263,16 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { var m = this.width == '50%' && this.align == 'center' ? '0 auto' : 0; + var iw = this.align == 'center' ? this.width : '100%'; var img = { tag : 'img', contenteditable : 'false', src : this.image_src, alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces.. style: { - width : 'auto', - 'max-width': '100%', - margin : '0px' + width : iw, + maxWidth : iw + ' !important', // this is not getting rendered? + margin : m } @@ -316,14 +317,15 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { return { tag: 'figure', 'data-block' : 'Figure', + contenteditable : 'false', style : { display: 'block', float : this.align , - 'max-width': this.width, - width : 'auto', - margin: m, + maxWidth : this.align == 'center' ? '100% !important' : (this.width + ' !important'), + width : this.align == 'center' ? '100%' : this.width, + margin: '0px', padding: '10px' }, @@ -337,11 +339,15 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { tag: 'figcaption', 'data-display' : this.caption_display, style : { - 'text-align': 'left', - - 'font-size' : '16px', - 'line-height' : '24px', - display : this.caption_display + textAlign : 'left', + fontSize : '16px', + lineHeight : '24px', + display : this.caption_display, + maxWidth : this.width + ' !important', + margin: m, + width: this.width + + }, cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '', cn : [ @@ -381,14 +387,12 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { this.image_src = this.getVal(node, 'img', 'src'); this.align = this.getVal(node, 'figure', 'align'); - this.caption = this.getVal(node, 'figcaption', 'html'); - // remove ' - if (this.caption.trim().match(/^]*>/i)) { - this.caption = this.caption.trim().replace(/^]*>/i, '').replace(/^<\/i>$/i, ''); - } + var figcaption = this.getVal(node, 'figcaption', false); + this.caption = this.getVal(figcaption, 'i', 'html'); + this.caption_display = this.getVal(node, 'figcaption', 'data-display'); //this.text_align = this.getVal(node, 'figcaption', 'style','text-align'); - this.width = this.getVal(node, 'figure', 'style', 'max-width'); + this.width = this.getVal(node, 'figcaption', 'style', 'width'); //this.margin = this.getVal(node, 'figure', 'style', 'margin'); }, diff --git a/roojs-all.js b/roojs-all.js index 6ca0f6be89..c3ea108766 100644 --- a/roojs-all.js +++ b/roojs-all.js @@ -1981,8 +1981,8 @@ Roo.htmleditor.Block=function(A){};Roo.htmleditor.Block.factory=function(A){var }var db=A.getAttribute('data-block');if(!db){db=A.nodeName.toLowerCase().toUpperCaseFirst();}var B=Roo.htmleditor['Block'+db];if(typeof(B)=='undefined'){Roo.log("OOps missing block : "+'Block'+db);return false;}Roo.htmleditor.Block.cache[id]=new B({node:A} );return Roo.htmleditor.Block.cache[id];};Roo.htmleditor.Block.initAll=function(A,B){if(typeof(B)=='undefined'){var ia=Roo.htmleditor.Block.initAll;ia(A,'table');ia(A,'td');ia(A,'figure');return;}Roo.each(Roo.get(A).query(B),function(e){Roo.htmleditor.Block.factory(e); },this);};Roo.htmleditor.Block.cache={};Roo.htmleditor.Block.prototype={node:false,friendly_name:'Based Block',deleteTitle:false,context:false,updateElement:function(A){Roo.DomHelper.update(A===undefined?this.node:A,this.toObject());},toHTML:function(){return Roo.DomHelper.markup(this.toObject()); -},getVal:function(A,B,C,D){var n=A;if(B!==true&&n.tagName!=B.toUpperCase()){n=A.getElementsByTagName(B).item(0);}if(!n){return '';}if(C=='html'){return n.innerHTML;}if(C=='style'){return n.style[D];}return n.hasAttribute(C)?n.getAttribute(C):'';},toObject:function(){return {} -;},readElement:function(A){}}; +},getVal:function(A,B,C,D){var n=A;if(B!==true&&n.tagName!=B.toUpperCase()){n=A.getElementsByTagName(B).item(0);}if(!n){return '';}if(C===false){return n;}if(C=='html'){return n.innerHTML;}if(C=='style'){return n.style[D];}return n.hasAttribute(C)?n.getAttribute(C):''; +},toObject:function(){return {};},readElement:function(A){}}; // Roo/htmleditor/BlockFigure.js Roo.htmleditor.BlockFigure=function(A){if(A.node){this.readElement(A.node);this.updateElement(A.node);}Roo.apply(this,A);};Roo.extend(Roo.htmleditor.BlockFigure,Roo.htmleditor.Block,{image_src:'',align:'center',caption:'',caption_display:'block',width:'100%',cls:'',href:'',video_url:'',text_align:'left',friendly_name:'Image with caption',deleteTitle:"Delete Image and Caption",contextMenu:function(A){var B=function(){return Roo.htmleditor.Block.factory(A.tb.selectedNode); };var C=typeof(Roo.bootstrap)=='undefined'?Roo:Roo.bootstrap;var D=A.editorcore.syncValue;var E={};return [{xtype:'TextItem',text:"Source: ",xns:C.Toolbar},{xtype:'Button',text:'Change Image URL',listeners:{click:function(F,G){var b=B();Roo.MessageBox.show({title:"Image Source URL",msg:"Enter the url for the image",buttons:Roo.MessageBox.OKCANCEL,fn:function(H,I){if(H!='ok'){return; @@ -1992,12 +1992,12 @@ Roo.htmleditor.BlockFigure=function(A){if(A.node){this.readElement(A.node);this. var b=B();b.width=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent();}},xns:C.form,store:{xtype:'SimpleStore',data:[['auto'],['50%'],['100%']],fields:['val'],xns:Roo.data}},{xtype:'TextItem',text:"Align: ",xns:C.Toolbar},{xtype:'ComboBox',allowBlank:false,displayField:'val',editable:true,listWidth:100,triggerAction:'all',typeAhead:true,valueField:'val',width:70,name:'align',listeners:{select:function(F,r,G){A.editorcore.selectNode(A.tb.selectedNode); 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.toggle(v=='block'?false:true); },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=='50%'&&this.align=='center'?'0 auto':0;var A={tag:'img',contenteditable:'false',src:this.image_src,alt:d.innerText.replace(/\n/g," ").replace(/\s+/g,' ').trim(),style:{width:'auto','max-width':'100%',margin:'0px'} +}},xns:C.Toolbar}];},toObject:function(){var d=document.createElement('div');d.innerHTML=this.caption;var m=this.width=='50%'&&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"); -return {tag:'figure','data-block':'Figure',contenteditable:'false',style:{display:'block',float:this.align,'max-width':this.width,width:'auto',margin:m,padding:'10px'},align:this.align,cn:[A,{tag:'figcaption','data-display':this.caption_display,style:{'text-align':'left','font-size':'16px','line-height':'24px',display:this.caption_display} -,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{'margin-top':'16px'},align:'left',cn:[{tag:'i',contenteditable:true,html: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=this.getVal(A,'figcaption','html');if(this.caption.trim().match(/^]*>/i)){this.caption=this.caption.trim().replace(/^]*>/i,'').replace(/^<\/i>$/i,''); -}this.caption_display=this.getVal(A,'figcaption','data-display');this.width=this.getVal(A,'figure','style','max-width');},removeNode:function(){return this.node;}}) +return {tag:'figure','data-block':'Figure',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:'10px'} +,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.width+' !important',margin:m,width:this.width},cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{'margin-top':'16px'} +,align:'left',cn:[{tag:'i',contenteditable:true,html: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'); +var B=this.getVal(A,'figcaption',false);this.caption=this.getVal(B,'i','html');this.caption_display=this.getVal(A,'figcaption','data-display');this.width=this.getVal(A,'figcaption','style','width');},removeNode:function(){return this.node;}}) // 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;r 0 ? (this.cls + '-thumbnail' ) : '', cn : [ @@ -48188,14 +48197,12 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { this.image_src = this.getVal(node, 'img', 'src'); this.align = this.getVal(node, 'figure', 'align'); - this.caption = this.getVal(node, 'figcaption', 'html'); - // remove ' - if (this.caption.trim().match(/^]*>/i)) { - this.caption = this.caption.trim().replace(/^]*>/i, '').replace(/^<\/i>$/i, ''); - } + var figcaption = this.getVal(node, 'figcaption', false); + this.caption = this.getVal(figcaption, 'i', 'html'); + this.caption_display = this.getVal(node, 'figcaption', 'data-display'); //this.text_align = this.getVal(node, 'figcaption', 'style','text-align'); - this.width = this.getVal(node, 'figure', 'style', 'max-width'); + this.width = this.getVal(node, 'figcaption', 'style', 'width'); //this.margin = this.getVal(node, 'figure', 'style', 'margin'); }, diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js index 3f925227b1..71a05c64dd 100644 --- a/roojs-ui-debug.js +++ b/roojs-ui-debug.js @@ -23291,7 +23291,7 @@ Roo.htmleditor.Block.prototype = { * @param {DomElement} node * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ? - * @param {String} attribute (use html - for contents, or style for using next param as style) + * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node) * @param {String} style the style property - eg. text-align */ getVal : function(node, tag, attr, style) @@ -23305,6 +23305,9 @@ Roo.htmleditor.Block.prototype = { if (!n) { return ''; } + if (attr === false) { + return n; + } if (attr == 'html') { return n.innerHTML; } @@ -23601,15 +23604,16 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { var m = this.width == '50%' && this.align == 'center' ? '0 auto' : 0; + var iw = this.align == 'center' ? this.width : '100%'; var img = { tag : 'img', contenteditable : 'false', src : this.image_src, alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces.. style: { - width : 'auto', - 'max-width': '100%', - margin : '0px' + width : iw, + maxWidth : iw + ' !important', // this is not getting rendered? + margin : m } @@ -23654,14 +23658,15 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { return { tag: 'figure', 'data-block' : 'Figure', + contenteditable : 'false', style : { display: 'block', float : this.align , - 'max-width': this.width, - width : 'auto', - margin: m, + maxWidth : this.align == 'center' ? '100% !important' : (this.width + ' !important'), + width : this.align == 'center' ? '100%' : this.width, + margin: '0px', padding: '10px' }, @@ -23675,11 +23680,15 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { tag: 'figcaption', 'data-display' : this.caption_display, style : { - 'text-align': 'left', - - 'font-size' : '16px', - 'line-height' : '24px', - display : this.caption_display + textAlign : 'left', + fontSize : '16px', + lineHeight : '24px', + display : this.caption_display, + maxWidth : this.width + ' !important', + margin: m, + width: this.width + + }, cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '', cn : [ @@ -23719,14 +23728,12 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { this.image_src = this.getVal(node, 'img', 'src'); this.align = this.getVal(node, 'figure', 'align'); - this.caption = this.getVal(node, 'figcaption', 'html'); - // remove ' - if (this.caption.trim().match(/^]*>/i)) { - this.caption = this.caption.trim().replace(/^]*>/i, '').replace(/^<\/i>$/i, ''); - } + var figcaption = this.getVal(node, 'figcaption', false); + this.caption = this.getVal(figcaption, 'i', 'html'); + this.caption_display = this.getVal(node, 'figcaption', 'data-display'); //this.text_align = this.getVal(node, 'figcaption', 'style','text-align'); - this.width = this.getVal(node, 'figure', 'style', 'max-width'); + this.width = this.getVal(node, 'figcaption', 'style', 'width'); //this.margin = this.getVal(node, 'figure', 'style', 'margin'); }, diff --git a/roojs-ui.js b/roojs-ui.js index 326165831e..67db75b245 100644 --- a/roojs-ui.js +++ b/roojs-ui.js @@ -1036,8 +1036,8 @@ Roo.htmleditor.Block=function(A){};Roo.htmleditor.Block.factory=function(A){var }var db=A.getAttribute('data-block');if(!db){db=A.nodeName.toLowerCase().toUpperCaseFirst();}var B=Roo.htmleditor['Block'+db];if(typeof(B)=='undefined'){Roo.log("OOps missing block : "+'Block'+db);return false;}Roo.htmleditor.Block.cache[id]=new B({node:A} );return Roo.htmleditor.Block.cache[id];};Roo.htmleditor.Block.initAll=function(A,B){if(typeof(B)=='undefined'){var ia=Roo.htmleditor.Block.initAll;ia(A,'table');ia(A,'td');ia(A,'figure');return;}Roo.each(Roo.get(A).query(B),function(e){Roo.htmleditor.Block.factory(e); },this);};Roo.htmleditor.Block.cache={};Roo.htmleditor.Block.prototype={node:false,friendly_name:'Based Block',deleteTitle:false,context:false,updateElement:function(A){Roo.DomHelper.update(A===undefined?this.node:A,this.toObject());},toHTML:function(){return Roo.DomHelper.markup(this.toObject()); -},getVal:function(A,B,C,D){var n=A;if(B!==true&&n.tagName!=B.toUpperCase()){n=A.getElementsByTagName(B).item(0);}if(!n){return '';}if(C=='html'){return n.innerHTML;}if(C=='style'){return n.style[D];}return n.hasAttribute(C)?n.getAttribute(C):'';},toObject:function(){return {} -;},readElement:function(A){}}; +},getVal:function(A,B,C,D){var n=A;if(B!==true&&n.tagName!=B.toUpperCase()){n=A.getElementsByTagName(B).item(0);}if(!n){return '';}if(C===false){return n;}if(C=='html'){return n.innerHTML;}if(C=='style'){return n.style[D];}return n.hasAttribute(C)?n.getAttribute(C):''; +},toObject:function(){return {};},readElement:function(A){}}; // Roo/htmleditor/BlockFigure.js Roo.htmleditor.BlockFigure=function(A){if(A.node){this.readElement(A.node);this.updateElement(A.node);}Roo.apply(this,A);};Roo.extend(Roo.htmleditor.BlockFigure,Roo.htmleditor.Block,{image_src:'',align:'center',caption:'',caption_display:'block',width:'100%',cls:'',href:'',video_url:'',text_align:'left',friendly_name:'Image with caption',deleteTitle:"Delete Image and Caption",contextMenu:function(A){var B=function(){return Roo.htmleditor.Block.factory(A.tb.selectedNode); };var C=typeof(Roo.bootstrap)=='undefined'?Roo:Roo.bootstrap;var D=A.editorcore.syncValue;var E={};return [{xtype:'TextItem',text:"Source: ",xns:C.Toolbar},{xtype:'Button',text:'Change Image URL',listeners:{click:function(F,G){var b=B();Roo.MessageBox.show({title:"Image Source URL",msg:"Enter the url for the image",buttons:Roo.MessageBox.OKCANCEL,fn:function(H,I){if(H!='ok'){return; @@ -1047,12 +1047,12 @@ Roo.htmleditor.BlockFigure=function(A){if(A.node){this.readElement(A.node);this. var b=B();b.width=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent();}},xns:C.form,store:{xtype:'SimpleStore',data:[['auto'],['50%'],['100%']],fields:['val'],xns:Roo.data}},{xtype:'TextItem',text:"Align: ",xns:C.Toolbar},{xtype:'ComboBox',allowBlank:false,displayField:'val',editable:true,listWidth:100,triggerAction:'all',typeAhead:true,valueField:'val',width:70,name:'align',listeners:{select:function(F,r,G){A.editorcore.selectNode(A.tb.selectedNode); 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.toggle(v=='block'?false:true); },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=='50%'&&this.align=='center'?'0 auto':0;var A={tag:'img',contenteditable:'false',src:this.image_src,alt:d.innerText.replace(/\n/g," ").replace(/\s+/g,' ').trim(),style:{width:'auto','max-width':'100%',margin:'0px'} +}},xns:C.Toolbar}];},toObject:function(){var d=document.createElement('div');d.innerHTML=this.caption;var m=this.width=='50%'&&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"); -return {tag:'figure','data-block':'Figure',contenteditable:'false',style:{display:'block',float:this.align,'max-width':this.width,width:'auto',margin:m,padding:'10px'},align:this.align,cn:[A,{tag:'figcaption','data-display':this.caption_display,style:{'text-align':'left','font-size':'16px','line-height':'24px',display:this.caption_display} -,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{'margin-top':'16px'},align:'left',cn:[{tag:'i',contenteditable:true,html: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=this.getVal(A,'figcaption','html');if(this.caption.trim().match(/^]*>/i)){this.caption=this.caption.trim().replace(/^]*>/i,'').replace(/^<\/i>$/i,''); -}this.caption_display=this.getVal(A,'figcaption','data-display');this.width=this.getVal(A,'figure','style','max-width');},removeNode:function(){return this.node;}}) +return {tag:'figure','data-block':'Figure',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:'10px'} +,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.width+' !important',margin:m,width:this.width},cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{'margin-top':'16px'} +,align:'left',cn:[{tag:'i',contenteditable:true,html: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'); +var B=this.getVal(A,'figcaption',false);this.caption=this.getVal(B,'i','html');this.caption_display=this.getVal(A,'figcaption','data-display');this.width=this.getVal(A,'figcaption','style','width');},removeNode:function(){return this.node;}}) // 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;r