Roo/htmleditor/BlockFigure.js
authorAlan <alan@roojs.com>
Tue, 28 Sep 2021 08:43:30 +0000 (16:43 +0800)
committerAlan <alan@roojs.com>
Tue, 28 Sep 2021 08:43:30 +0000 (16:43 +0800)
roojs-ui.js
roojs-ui-debug.js
roojs-all.js
roojs-debug.js

Roo/htmleditor/BlockFigure.js
roojs-all.js
roojs-debug.js
roojs-ui-debug.js
roojs-ui.js

index 1c9ff61..3dd80d7 100644 (file)
@@ -47,7 +47,7 @@ Roo.htmleditor.BlockFigure.prototype = {
     context : { // ?? static really
         image_width : {
             title: "Width",
-            width: 40,
+            width: 40
         },
         image_height:  {
             title: "Height",
@@ -65,10 +65,7 @@ Roo.htmleditor.BlockFigure.prototype = {
             width : 80
         },
         
-        alt: {
-            title: "Alt",
-            width: 120
-        },
+       
         src : {
             title: "Src",
             width: 220
@@ -84,7 +81,7 @@ Roo.htmleditor.BlockFigure.prototype = {
         var img = {
             tag : 'img',
             src : this.src,
-            alt : this.alt,
+            alt : this.caption 
         };
         if ((''+this.width).length) {
             img.width = this.width;
index 60d26f0..726fd05 100644 (file)
@@ -1872,6 +1872,13 @@ i++){if(!A.attributes.item(i).value.length){continue;}B.push(A.attributes.item(i
 Roo.htmleditor.KeyEnter=function(A){Roo.apply(this,A);Roo.get(this.core.doc.body).on('keypress',this.keypress,this);};Roo.htmleditor.KeyEnter.prototype={core:false,keypress:function(e){if(e.charCode!=13){return true;}e.preventDefault();var A=this.core.doc;
 var B=A.createDocumentFragment();var C=A.createTextNode('\n');B.appendChild(C);C=A.createElement('br');B.appendChild(C);var D=this.core.win.getSelection().getRangeAt(0);D.deleteContents();D.insertNode(B);D=A.createRange();D.setStartAfter(C);D.collapse(true);
 var E=this.core.win.getSelection();E.removeAllRanges();E.addRange(D);return false;}};
+// 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.htmleditor.BlockFigure.prototype={image_src:'',align:'left',caption:'',text_align:'left',image_width:'',image_height:'',context:{image_width:{title:"Width",width:40}
+,image_height:{title:"Height",width:40},align:{title:"Align",opts:[[""],["left"],["right"],["center"],["top"]],width:80},text_align:{title:"Caption Align",opts:[[""],["left"],["right"],["center"],["top"]],width:80},src:{title:"Src",width:220}},toObject:function(){var A={tag:'img',src:this.src,alt:this.caption}
+;if((''+this.width).length){A.width=this.width;}if((''+this.height).length){A.height=this.height;}return {tag:'figure','data-block':'BlockFigure',contenteditable:'false',style:'text-align:'+this.align,cn:[A,{tag:'figcaption',contenteditable:true,style:'text-align:left',html:this.caption}
+]};},readElement:function(A){this.image_src=this.getVal(A,'img','src');this.align=this.getVal(A,'figure','style','text-align');this.caption=this.getVal(A,'figcaption','html');this.text_align=this.getVal(A,'figcaption','style','text-align');},updateElement:function(A){Roo.DomHelper.overwrite(A,this.toObject());
+},toHTML:function(){Roo.DomHelper.markup(this.toObject());},getVal:function(A,B,C,D){var n=A;if(n.tagName!=B.toUpperCase()){n=A.getElementsByTagName(B).item(0);}if(C=='html'){return n.innerHTML;}if(C=='style'){return Roo.get(n).getStyle(D);}return Roo.get(n).attr(C);
+}};
 // Roo/HtmlEditorCore.js
 Roo.HtmlEditorCore=function(A){Roo.HtmlEditorCore.superclass.constructor.call(this,A);this.addEvents({initialize:true,activate:true,beforesync:true,beforepush:true,sync:true,push:true,editorevent:true});this.applyBlacklists();};Roo.extend(Roo.HtmlEditorCore,Roo.Component,{owner:false,resizable:false,height:300,width:500,stylesheets:false,allowComments:false,frameId:false,validationEvent:false,deferHeight:true,initialized:false,activated:false,sourceEditMode:false,onFocus:Roo.emptyFn,iframePad:3,hideMode:'offsets',clearUp:true,black:false,white:false,bodyCls:'',getDocMarkup:function(){var st='';
 if(this.stylesheets===false){Roo.get(document.head).select('style').each(function(B){st+=B.dom.outerHTML||new XMLSerializer().serializeToString(B.dom);});Roo.get(document.head).select('link').each(function(B){st+=B.dom.outerHTML||new XMLSerializer().serializeToString(B.dom);
@@ -1882,13 +1889,14 @@ this.frameId=Roo.id();var B=this.owner.wrap.createChild({tag:'iframe',cls:'form-
 this.doc.open();this.doc.write(this.getDocMarkup());this.doc.close();var C={run:function(){this.assignDocWin();if(this.doc.body||this.doc.readyState=='complete'){try{this.doc.designMode="on";}catch(e){return;}Roo.TaskMgr.stop(C);this.initEditor.defer(10,this);
 }},interval:10,duration:10000,scope:this};Roo.TaskMgr.start(C);},onResize:function(w,h){Roo.log('resize: '+w+','+h);if(!this.iframe){return;}if(typeof w=='number'){this.iframe.style.width=w+'px';}if(typeof h=='number'){this.iframe.style.height=h+'px';if(this.doc){(this.doc.body||this.doc.documentElement).style.height=(h-(this.iframePad*2))+'px';
 }}},toggleSourceEdit:function(A){this.sourceEditMode=A===true;if(this.sourceEditMode){Roo.get(this.iframe).addClass(['x-hidden','hide','d-none']);}else{Roo.get(this.iframe).removeClass(['x-hidden','hide','d-none']);this.deferFocus();}},cleanHtml:function(A){A=String(A);
-if(A.length>5){if(Roo.isSafari){A=A.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi,'');}}if(A=='&nbsp;'){A='';}return A;},syncValue:function(){if(this.initialized){var bd=(this.doc.body||this.doc.documentElement);var A=bd.innerHTML;if(Roo.isSafari){var bs=bd.getAttribute('style');
-var m=bs?bs.match(/text-align:(.*?);/i):false;if(m&&m[1]){A='<div style="'+m[0]+'">'+A+'</div>';}}A=this.cleanHtml(A);A=A.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g,function(B){var cc=B.charCodeAt();if(B.length==2){var C=B.charCodeAt(0)-0xD800;
-var D=B.charCodeAt(1)-0xDC00;cc=(C*0x400)+D+0x10000;}else if((cc>=0x4E00&&cc<0xA000)||(cc>=0x3400&&cc<0x4E00)||(cc>=0xf900&&cc<0xfb00)){return B;}return "&#"+cc+";";});if(this.owner.fireEvent('beforesync',this,A)!==false){this.el.dom.value=A;this.owner.fireEvent('sync',this,A);
-}}},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;this.owner.fireEvent('push',this,v);
-}}},deferFocus:function(){this.focus.defer(10,this);},focus:function(){if(this.win&&!this.sourceEditMode){this.win.focus();}else{this.el.focus();}},assignDocWin:function(){var A=this.iframe;if(Roo.isIE){this.doc=A.contentWindow.document;this.win=A.contentWindow;
-}else{if(!Roo.get(this.frameId)&&!A.contentDocument){return;}this.doc=(A.contentDocument||Roo.get(this.frameId).dom.document);this.win=(A.contentWindow||Roo.get(this.frameId).dom.contentWindow);}},initEditor:function(){this.assignDocWin();this.doc.designMode="on";
-this.doc.open();this.doc.write(this.getDocMarkup());this.doc.close();var A=(this.doc.body||this.doc.documentElement);A.bgProperties='fixed';Roo.EventManager.on(this.doc,{'mouseup':this.onEditorEvent,'dblclick':this.onEditorEvent,'click':this.onEditorEvent,'keyup':this.onEditorEvent,'paste':this.onPasteEvent,buffer:100,scope:this}
+if(A.length>5){if(Roo.isSafari){A=A.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi,'');}}if(A=='&nbsp;'){A='';}return A;},syncValue:function(){if(this.initialized){var bd=(this.doc.body||this.doc.documentElement);new Roo.htmleditor.FilterAttribute({node:bd,attrib_black:['contenteditable']}
+);var A=bd.innerHTML;if(Roo.isSafari){var bs=bd.getAttribute('style');var m=bs?bs.match(/text-align:(.*?);/i):false;if(m&&m[1]){A='<div style="'+m[0]+'">'+A+'</div>';}}A=this.cleanHtml(A);A=A.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g,function(B){var cc=B.charCodeAt();
+if(B.length==2){var C=B.charCodeAt(0)-0xD800;var D=B.charCodeAt(1)-0xDC00;cc=(C*0x400)+D+0x10000;}else if((cc>=0x4E00&&cc<0xA000)||(cc>=0x3400&&cc<0x4E00)||(cc>=0xf900&&cc<0xfb00)){return B;}return "&#"+cc+";";});if(this.owner.fireEvent('beforesync',this,A)!==false){this.el.dom.value=A;
+this.owner.fireEvent('sync',this,A);}}},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;
+this.owner.fireEvent('push',this,v);}Roo.each(Roo.get(this.doc.body).query('*[data-block]'),function(e){var A=Roo.htmleditor['Block'+Roo.get(e).attr('data-block')];if(typeof(A)=='undefined'){Roo.log("OOps missing block : "+'Block'+Roo.get(e).attr('data-block'));
+return;}new A(e);},this)}},deferFocus:function(){this.focus.defer(10,this);},focus:function(){if(this.win&&!this.sourceEditMode){this.win.focus();}else{this.el.focus();}},assignDocWin:function(){var A=this.iframe;if(Roo.isIE){this.doc=A.contentWindow.document;
+this.win=A.contentWindow;}else{if(!Roo.get(this.frameId)&&!A.contentDocument){return;}this.doc=(A.contentDocument||Roo.get(this.frameId).dom.document);this.win=(A.contentWindow||Roo.get(this.frameId).dom.contentWindow);}},initEditor:function(){this.assignDocWin();
+this.doc.designMode="on";this.doc.open();this.doc.write(this.getDocMarkup());this.doc.close();var A=(this.doc.body||this.doc.documentElement);A.bgProperties='fixed';Roo.EventManager.on(this.doc,{'mouseup':this.onEditorEvent,'dblclick':this.onEditorEvent,'click':this.onEditorEvent,'keyup':this.onEditorEvent,'paste':this.onPasteEvent,buffer:100,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){this.owner.fireEvent('paste',e,v);},onDestroy:function(){if(this.rendered){}},onFirstFocus:function(){this.assignDocWin();this.activated=true;if(Roo.isGecko){this.win.focus();var s=this.win.getSelection();if(!s.focusNode||s.focusNode.nodeType!=3){var r=s.getRangeAt(0);
 r.selectNodeContents((this.doc.body||this.doc.documentElement));r.collapse(true);this.deferFocus();}try{this.execCmd('useCSS',true);this.execCmd('styleWithCSS',false);}catch(e){}}this.owner.fireEvent('activate',this);},adjustFont:function(A){var B=A.cmd=='increasefontsize'?1:-1;
@@ -1984,8 +1992,7 @@ Roo.form.HtmlEditor.ToolbarContext=function(A){Roo.apply(this,A);this.styles=thi
 },'TABLE':{rows:{title:"Rows",width:20},cols:{title:"Cols",width:20},width:{title:"Width",width:40},height:{title:"Height",width:40},border:{title:"Border",width:20}},'TD':{width:{title:"Width",width:40},height:{title:"Height",width:40},align:{title:"Align",opts:[[""],["left"],["center"],["right"],["justify"],["char"]],width:80}
 ,valign:{title:"Valign",opts:[[""],["top"],["middle"],["bottom"],["baseline"]],width:80},colspan:{title:"Colspan",width:20},'font-family':{title:"Font",style:'fontFamily',displayField:'display',optname:'font-family',width:140}},'INPUT':{name:{title:"name",width:120}
 ,value:{title:"Value",width:120},width:{title:"Width",width:40}},'LABEL':{'for':{title:"For",width:120}},'TEXTAREA':{name:{title:"name",width:120},rows:{title:"Rows",width:20},cols:{title:"Cols",width:20}},'SELECT':{name:{title:"name",width:120},selectoptions:{title:"Options",width:200}
-},'BODY':{title:{title:"Title",width:200,disabled:true}},'SPAN':{'font-family':{title:"Font",style:'fontFamily',displayField:'display',optname:'font-family',width:140}},'DIV':{'font-family':{title:"Font",style:'fontFamily',displayField:'display',optname:'font-family',width:140}
-},'P':{'font-family':{title:"Font",style:'fontFamily',displayField:'display',optname:'font-family',width:140}},'*':{}};Roo.form.HtmlEditor.ToolbarContext.stores=false;Roo.form.HtmlEditor.ToolbarContext.options={'font-family':[['Helvetica,Arial,sans-serif','Helvetica'],['Courier New','Courier New'],['Tahoma','Tahoma'],['Times New Roman,serif','Times'],['Verdana','Verdana']]}
+},'BODY':{title:{title:"Title",width:200,disabled:true}},'*':{}};Roo.form.HtmlEditor.ToolbarContext.stores=false;Roo.form.HtmlEditor.ToolbarContext.options={'font-family':[['Helvetica,Arial,sans-serif','Helvetica'],['Courier New','Courier New'],['Tahoma','Tahoma'],['Times New Roman,serif','Times'],['Verdana','Verdana']]}
 ;Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,{tb:false,rendered:false,editor:false,editorcore:false,disable:false,styles:false,options:false,toolbars:false,init:function(A){this.editor=A;this.editorcore=A.editorcore?A.editorcore:A;var B=this.editorcore;
 var C=B.frameId;var D=this;function btn(id,F,G){var H=C+'-'+id;return {id:H,cmd:id,cls:'x-btn-icon x-edit-'+id,enableToggle:F!==false,scope:B,handler:G||B.relayBtnCmd,clickEvent:'mousedown',tooltip:D.buttonTips[id]||undefined,tabIndex:-1};}var E=A.wrap.createChild({tag:'div'}
 ,A.wrap.dom.firstChild.nextSibling,true);var ty=Roo.form.HtmlEditor.ToolbarContext.types;this.toolbars={};for(var i in ty){this.toolbars[i]=this.buildToolbar(ty[i],i);}this.tb=this.toolbars.BODY;this.tb.el.show();this.buildFooter();this.footer.show();A.on('hide',function(){this.footer.hide()}
@@ -2002,12 +2009,12 @@ C.syncValue();}}}));}var F=Roo.form.HtmlEditor.ToolbarContext;var G=F.options;fo
 ),name:'-roo-edit-'+i,attrname:i,stylename:H.style?H.style:false,displayField:H.displayField?H.displayField:'val',valueField:'val',typeAhead:false,mode:typeof(F.stores[i])!='undefined'?'remote':'local',editable:false,triggerAction:'all',emptyText:'Select',selectOnFocus:true,width:H.width?H.width:130,listeners:{'select':function(c,r,i){if(c.stylename){tb.selectedNode.style[c.stylename]=r.get('val');
 return;}if(r===false){tb.selectedNode.removeAttribute(c.attrname);return;}tb.selectedNode.setAttribute(c.attrname,r.get('val'));}}}));continue;tb.addField(new Roo.form.TextField({name:i,width:100,value:''}));continue;}tb.addField(new Roo.form.TextField({name:'-roo-edit-'+i,attrname:i,width:H.width,value:'',listeners:{'change':function(f,nv,ov){tb.selectedNode.setAttribute(f.attrname,nv);
 C.syncValue();}}}));}var J=this;if(nm=='BODY'){tb.addSeparator();tb.addButton({text:'Stylesheets',listeners:{click:function(){J.editor.fireEvent('stylesheetsclick',J.editor);}}});}tb.addFill();tb.addButton({text:'Remove Tag',listeners:{click:function(){var sn=tb.selectedNode;
-var pn=sn.parentNode;var K=sn.childNodes[0];var en=sn.childNodes[sn.childNodes.length-1];while(sn.childNodes.length){var L=sn.childNodes[0];sn.removeChild(L);pn.insertBefore(L,sn);}pn.removeChild(sn);var M=C.createRange();M.setStart(K,0);M.setEnd(en,0);var N=C.getSelection();
-N.removeAllRanges();N.addRange(M);J.updateToolbar(null,null,null);J.footDisp.dom.innerHTML='';}}});tb.el.on('click',function(e){e.preventDefault();});tb.el.setVisibilityMode(Roo.Element.DISPLAY);tb.el.hide();tb.name=nm;return tb;},buildFooter:function(){var A=this.editor.wrap.createChild();
-this.footer=new Roo.Toolbar(A);var B=new Roo.Toolbar.Fill();var _t=this;this.footer.add({text:'&lt;',xtype:'Button',handler:function(){_t.footDisp.scrollTo('left',0,true)}});this.footer.add(B);this.footer.add({text:'&gt;',xtype:'Button',handler:function(){_t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
-}});var A=Roo.get(B.el);A.addClass('x-editor-context');this.footDispWrap=A;this.footDispWrap.overflow='hidden';this.footDisp=A.createChild();this.footDispWrap.on('click',this.onContextClick,this)},onContextClick:function(ev,A){ev.preventDefault();var cn=A.className;
-if(!cn.match(/x-ed-loc-/)){return;}var n=cn.split('-').pop();var B=this.footerEls;var C=B[n];var D=this.editorcore.createRange();D.selectNodeContents(C);var E=this.editorcore.getSelection();E.removeAllRanges();E.addRange(D);this.updateToolbar(null,null,C);
-}});
+var pn=sn.parentNode;var K=sn.childNodes[0]||sn.nextSibling||sn.previousSibling||pn;if(!K){K=sn.nextSibling;}var en=sn.childNodes[sn.childNodes.length-1];while(sn.childNodes.length){var L=sn.childNodes[0];sn.removeChild(L);pn.insertBefore(L,sn);}pn.removeChild(sn);
+var M=C.createRange();M.setStart(K,0);M.setEnd(en,0);var N=C.getSelection();N.removeAllRanges();N.addRange(M);J.updateToolbar(null,null,null);J.footDisp.dom.innerHTML='';}}});tb.el.on('click',function(e){e.preventDefault();});tb.el.setVisibilityMode(Roo.Element.DISPLAY);
+tb.el.hide();tb.name=nm;return tb;},buildFooter:function(){var A=this.editor.wrap.createChild();this.footer=new Roo.Toolbar(A);var B=new Roo.Toolbar.Fill();var _t=this;this.footer.add({text:'&lt;',xtype:'Button',handler:function(){_t.footDisp.scrollTo('left',0,true)}
+});this.footer.add(B);this.footer.add({text:'&gt;',xtype:'Button',handler:function(){_t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);}});var A=Roo.get(B.el);A.addClass('x-editor-context');this.footDispWrap=A;this.footDispWrap.overflow='hidden';
+this.footDisp=A.createChild();this.footDispWrap.on('click',this.onContextClick,this)},onContextClick:function(ev,A){ev.preventDefault();var cn=A.className;if(!cn.match(/x-ed-loc-/)){return;}var n=cn.split('-').pop();var B=this.footerEls;var C=B[n];var D=this.editorcore.createRange();
+D.selectNodeContents(C);var E=this.editorcore.getSelection();E.removeAllRanges();E.addRange(D);this.updateToolbar(null,null,C);}});
 // Roo/form/BasicForm.js
 Roo.form.BasicForm=function(el,A){this.allItems=[];this.childForms=[];Roo.apply(this,A);this.items=new Roo.util.MixedCollection(false,function(o){return o.id||(o.id=Roo.id());});this.addEvents({beforeaction:true,actionfailed:true,actioncomplete:true});if(el){this.initEl(el);
 }Roo.form.BasicForm.superclass.constructor.call(this);Roo.form.BasicForm.popover.apply();};Roo.extend(Roo.form.BasicForm,Roo.util.Observable,{timeout:30,activeAction:null,trackResetOnLoad:false,childForms:false,allItems:false,waitMsgTarget:false,disableMask:false,errorMask:false,maskOffset:100,initEl:function(el){this.el=Roo.get(el);
index c80026a..1759894 100644 (file)
@@ -45172,7 +45172,158 @@ Roo.htmleditor.KeyEnter.prototype = {
          
     }
 };
-    //<script type="text/javascript">
+    /**
+ *  
+ * <figure data-block="BlockFigure" contenteditable="false" role="group" style="text-align:left">' + 
+        <img data-name="image" src="{SRC}">' + 
+        <figcaption data-name="caption" contenteditable="true" style="text-align:left">XXXX</figcaption>
+    </figure>
+    <br/>
+    
+    usage:
+     -- add to document..
+    new Roo.htmleditor.BlockFigure{
+        image_src : 'http://www.google.com',
+        caption : 'test',
+    }
+     -- load document, and search for elements of this...
+    Roo.DomQuery.select('*[data-block])
+    // loop each and call ctor ({node : xxx})
+    -- html editor click
+    ** see if parent has Element.findParent(*[data-block]);
+    use ?? to 
+    
+ */
+
+Roo.htmleditor.BlockFigure = function(cfg)
+{
+    if (cfg.node) {
+        this.readElement(cfg.node);
+        this.updateElement(cfg.node);
+    }
+    Roo.apply(this, cfg);
+}
+
+Roo.htmleditor.BlockFigure.prototype = {
+    
+    // setable values.
+    image_src: '',
+    
+    align: 'left',
+    caption : '',
+    text_align: 'left',
+    
+    image_width : '',
+    image_height : '',
+    
+    // used by context menu
+    
+    context : { // ?? static really
+        image_width : {
+            title: "Width",
+            width: 40
+        },
+        image_height:  {
+            title: "Height",
+            width: 40
+        },
+        align: {
+            title: "Align",
+            opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+            width : 80
+            
+        },
+        text_align: {
+            title: "Caption Align",
+            opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+            width : 80
+        },
+        
+       
+        src : {
+            title: "Src",
+            width: 220
+        }
+    },
+    /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     */
+    toObject : function()
+    {
+        
+        var img = {
+            tag : 'img',
+            src : this.src,
+            alt : this.caption 
+        };
+        if ((''+this.width).length) {
+            img.width = this.width;
+        }
+        if ((''+ this.height).length) {
+            img.height = this.height;
+        }
+        return {
+            tag: 'figure',
+            'data-block' : 'BlockFigure',
+            contenteditable : 'false',
+            style : 'text-align:' + this.align,
+            cn : [
+                img,
+                {
+                    tag: 'figcaption',
+                    contenteditable : true,
+                    style : 'text-align:left',
+                    html : this.caption 
+                }
+            ]
+        };
+    },
+    
+    readElement : function(node)
+    {
+        this.image_src = this.getVal(node, 'img', 'src');
+        this.align = this.getVal(node, 'figure', 'style', 'text-align');
+        this.caption = this.getVal(node, 'figcaption', 'html');
+        this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+    },
+    
+    updateElement : function(node)
+    {
+        Roo.DomHelper.overwrite(node, this.toObject());
+    },
+    toHTML : function()
+    {
+        Roo.DomHelper.markup(this.toObject());
+    },
+    
+    getVal : function(node, tag, attr, style)
+    {
+        var n = node;
+        if (n.tagName != tag.toUpperCase()) {
+            // in theory we could do figure[3] << 3rd figure? or some more complex search..?
+            // but kiss for now.
+            n = node.getElementsByTagName(tag).item(0);
+        }
+        if (attr == 'html') {
+            return n.innerHTML;
+        }
+        if (attr == 'style') {
+            return Roo.get(n).getStyle(style);
+        }
+        
+        return Roo.get(n).attr(attr);
+            
+    }
+    
+    
+    
+    
+    
+    
+}
+
+//<script type="text/javascript">
 
 /*
  * Based  Ext JS Library 1.1.1
@@ -45506,6 +45657,10 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         if(this.initialized){
             var bd = (this.doc.body || this.doc.documentElement);
             //this.cleanUpPaste(); -- this is done else where and causes havoc..
+            
+            // remove content editable. (blocks)
+            new Roo.htmleditor.FilterAttribute({node : bd, attrib_black: [ 'contenteditable' ] });
+            
             var html = bd.innerHTML;
             if(Roo.isSafari){
                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
@@ -45551,16 +45706,15 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     },
 
     /**
+     * TEXTAREA -> EDITABLE
      * Protected method that will not generally be called directly. Pushes the value of the textarea
      * into the iframe editor.
      */
-    pushValue : function(){
+    pushValue : function()
+    {
         if(this.initialized){
             var v = this.el.dom.value.trim();
             
-//            if(v.length < 1){
-//                v = '&#160;';
-//            }
             
             if(this.owner.fireEvent('beforepush', this, v) !== false){
                 var d = (this.doc.body || this.doc.documentElement);
@@ -45569,6 +45723,17 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 this.el.dom.value = d.innerHTML;
                 this.owner.fireEvent('push', this, v);
             }
+            
+            Roo.each(Roo.get(this.doc.body).query('*[data-block]'), function(e) {
+                var cls = Roo.htmleditor['Block' + Roo.get(e).attr('data-block')];
+                if (typeof(cls) == 'undefined') {
+                    Roo.log("OOps missing block : " + 'Block' + Roo.get(e).attr('data-block'));
+                    return;
+                }
+                new cls(e);  /// should trigger update element
+            },this)
+            
+            
         }
     },
 
@@ -48085,7 +48250,7 @@ Roo.form.HtmlEditor.ToolbarContext.types = {
         }
     },
     'TEXTAREA' : {
-          name : {
+        name : {
             title: "name",
             width: 120
         },
@@ -48118,6 +48283,7 @@ Roo.form.HtmlEditor.ToolbarContext.types = {
             disabled : true
         }
     },
+    /*
     'SPAN' : {
         'font-family'  : {
             title : "Font",
@@ -48145,7 +48311,7 @@ Roo.form.HtmlEditor.ToolbarContext.types = {
             width: 140
         }
     },
-    
+    */
     '*' : {
         // empty..
     }
@@ -48588,7 +48754,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         
         tb.addFill();
         tb.addButton( {
-            text: 'Remove Tag',
+            text: 'Remove Tag', // remove the tag, and puts the children outside...
     
             listeners : {
                 click : function ()
@@ -48600,7 +48766,12 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
                     
                     var pn = sn.parentNode;
                     
-                    var stn =  sn.childNodes[0];
+                    // what i'm going to select after deleting..
+                    var stn =  sn.childNodes[0] || sn.nextSibling || sn.previousSibling || pn;
+                    
+                    if (!stn) {
+                        stn = sn.nextSibling;
+                    }
                     var en = sn.childNodes[sn.childNodes.length - 1 ];
                     while (sn.childNodes.length) {
                         var node = sn.childNodes[0];
index 352f0ac..92fd2db 100644 (file)
@@ -21281,7 +21281,158 @@ Roo.htmleditor.KeyEnter.prototype = {
          
     }
 };
-    //<script type="text/javascript">
+    /**
+ *  
+ * <figure data-block="BlockFigure" contenteditable="false" role="group" style="text-align:left">' + 
+        <img data-name="image" src="{SRC}">' + 
+        <figcaption data-name="caption" contenteditable="true" style="text-align:left">XXXX</figcaption>
+    </figure>
+    <br/>
+    
+    usage:
+     -- add to document..
+    new Roo.htmleditor.BlockFigure{
+        image_src : 'http://www.google.com',
+        caption : 'test',
+    }
+     -- load document, and search for elements of this...
+    Roo.DomQuery.select('*[data-block])
+    // loop each and call ctor ({node : xxx})
+    -- html editor click
+    ** see if parent has Element.findParent(*[data-block]);
+    use ?? to 
+    
+ */
+
+Roo.htmleditor.BlockFigure = function(cfg)
+{
+    if (cfg.node) {
+        this.readElement(cfg.node);
+        this.updateElement(cfg.node);
+    }
+    Roo.apply(this, cfg);
+}
+
+Roo.htmleditor.BlockFigure.prototype = {
+    
+    // setable values.
+    image_src: '',
+    
+    align: 'left',
+    caption : '',
+    text_align: 'left',
+    
+    image_width : '',
+    image_height : '',
+    
+    // used by context menu
+    
+    context : { // ?? static really
+        image_width : {
+            title: "Width",
+            width: 40
+        },
+        image_height:  {
+            title: "Height",
+            width: 40
+        },
+        align: {
+            title: "Align",
+            opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+            width : 80
+            
+        },
+        text_align: {
+            title: "Caption Align",
+            opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+            width : 80
+        },
+        
+       
+        src : {
+            title: "Src",
+            width: 220
+        }
+    },
+    /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     */
+    toObject : function()
+    {
+        
+        var img = {
+            tag : 'img',
+            src : this.src,
+            alt : this.caption 
+        };
+        if ((''+this.width).length) {
+            img.width = this.width;
+        }
+        if ((''+ this.height).length) {
+            img.height = this.height;
+        }
+        return {
+            tag: 'figure',
+            'data-block' : 'BlockFigure',
+            contenteditable : 'false',
+            style : 'text-align:' + this.align,
+            cn : [
+                img,
+                {
+                    tag: 'figcaption',
+                    contenteditable : true,
+                    style : 'text-align:left',
+                    html : this.caption 
+                }
+            ]
+        };
+    },
+    
+    readElement : function(node)
+    {
+        this.image_src = this.getVal(node, 'img', 'src');
+        this.align = this.getVal(node, 'figure', 'style', 'text-align');
+        this.caption = this.getVal(node, 'figcaption', 'html');
+        this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+    },
+    
+    updateElement : function(node)
+    {
+        Roo.DomHelper.overwrite(node, this.toObject());
+    },
+    toHTML : function()
+    {
+        Roo.DomHelper.markup(this.toObject());
+    },
+    
+    getVal : function(node, tag, attr, style)
+    {
+        var n = node;
+        if (n.tagName != tag.toUpperCase()) {
+            // in theory we could do figure[3] << 3rd figure? or some more complex search..?
+            // but kiss for now.
+            n = node.getElementsByTagName(tag).item(0);
+        }
+        if (attr == 'html') {
+            return n.innerHTML;
+        }
+        if (attr == 'style') {
+            return Roo.get(n).getStyle(style);
+        }
+        
+        return Roo.get(n).attr(attr);
+            
+    }
+    
+    
+    
+    
+    
+    
+}
+
+//<script type="text/javascript">
 
 /*
  * Based  Ext JS Library 1.1.1
@@ -21615,6 +21766,10 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         if(this.initialized){
             var bd = (this.doc.body || this.doc.documentElement);
             //this.cleanUpPaste(); -- this is done else where and causes havoc..
+            
+            // remove content editable. (blocks)
+            new Roo.htmleditor.FilterAttribute({node : bd, attrib_black: [ 'contenteditable' ] });
+            
             var html = bd.innerHTML;
             if(Roo.isSafari){
                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
@@ -21660,16 +21815,15 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     },
 
     /**
+     * TEXTAREA -> EDITABLE
      * Protected method that will not generally be called directly. Pushes the value of the textarea
      * into the iframe editor.
      */
-    pushValue : function(){
+    pushValue : function()
+    {
         if(this.initialized){
             var v = this.el.dom.value.trim();
             
-//            if(v.length < 1){
-//                v = '&#160;';
-//            }
             
             if(this.owner.fireEvent('beforepush', this, v) !== false){
                 var d = (this.doc.body || this.doc.documentElement);
@@ -21678,6 +21832,17 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 this.el.dom.value = d.innerHTML;
                 this.owner.fireEvent('push', this, v);
             }
+            
+            Roo.each(Roo.get(this.doc.body).query('*[data-block]'), function(e) {
+                var cls = Roo.htmleditor['Block' + Roo.get(e).attr('data-block')];
+                if (typeof(cls) == 'undefined') {
+                    Roo.log("OOps missing block : " + 'Block' + Roo.get(e).attr('data-block'));
+                    return;
+                }
+                new cls(e);  /// should trigger update element
+            },this)
+            
+            
         }
     },
 
@@ -24194,7 +24359,7 @@ Roo.form.HtmlEditor.ToolbarContext.types = {
         }
     },
     'TEXTAREA' : {
-          name : {
+        name : {
             title: "name",
             width: 120
         },
@@ -24227,6 +24392,7 @@ Roo.form.HtmlEditor.ToolbarContext.types = {
             disabled : true
         }
     },
+    /*
     'SPAN' : {
         'font-family'  : {
             title : "Font",
@@ -24254,7 +24420,7 @@ Roo.form.HtmlEditor.ToolbarContext.types = {
             width: 140
         }
     },
-    
+    */
     '*' : {
         // empty..
     }
@@ -24697,7 +24863,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         
         tb.addFill();
         tb.addButton( {
-            text: 'Remove Tag',
+            text: 'Remove Tag', // remove the tag, and puts the children outside...
     
             listeners : {
                 click : function ()
@@ -24709,7 +24875,12 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
                     
                     var pn = sn.parentNode;
                     
-                    var stn =  sn.childNodes[0];
+                    // what i'm going to select after deleting..
+                    var stn =  sn.childNodes[0] || sn.nextSibling || sn.previousSibling || pn;
+                    
+                    if (!stn) {
+                        stn = sn.nextSibling;
+                    }
                     var en = sn.childNodes[sn.childNodes.length - 1 ];
                     while (sn.childNodes.length) {
                         var node = sn.childNodes[0];
index 3ba4ee6..5d30055 100644 (file)
@@ -951,6 +951,13 @@ i++){if(!A.attributes.item(i).value.length){continue;}B.push(A.attributes.item(i
 Roo.htmleditor.KeyEnter=function(A){Roo.apply(this,A);Roo.get(this.core.doc.body).on('keypress',this.keypress,this);};Roo.htmleditor.KeyEnter.prototype={core:false,keypress:function(e){if(e.charCode!=13){return true;}e.preventDefault();var A=this.core.doc;
 var B=A.createDocumentFragment();var C=A.createTextNode('\n');B.appendChild(C);C=A.createElement('br');B.appendChild(C);var D=this.core.win.getSelection().getRangeAt(0);D.deleteContents();D.insertNode(B);D=A.createRange();D.setStartAfter(C);D.collapse(true);
 var E=this.core.win.getSelection();E.removeAllRanges();E.addRange(D);return false;}};
+// 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.htmleditor.BlockFigure.prototype={image_src:'',align:'left',caption:'',text_align:'left',image_width:'',image_height:'',context:{image_width:{title:"Width",width:40}
+,image_height:{title:"Height",width:40},align:{title:"Align",opts:[[""],["left"],["right"],["center"],["top"]],width:80},text_align:{title:"Caption Align",opts:[[""],["left"],["right"],["center"],["top"]],width:80},src:{title:"Src",width:220}},toObject:function(){var A={tag:'img',src:this.src,alt:this.caption}
+;if((''+this.width).length){A.width=this.width;}if((''+this.height).length){A.height=this.height;}return {tag:'figure','data-block':'BlockFigure',contenteditable:'false',style:'text-align:'+this.align,cn:[A,{tag:'figcaption',contenteditable:true,style:'text-align:left',html:this.caption}
+]};},readElement:function(A){this.image_src=this.getVal(A,'img','src');this.align=this.getVal(A,'figure','style','text-align');this.caption=this.getVal(A,'figcaption','html');this.text_align=this.getVal(A,'figcaption','style','text-align');},updateElement:function(A){Roo.DomHelper.overwrite(A,this.toObject());
+},toHTML:function(){Roo.DomHelper.markup(this.toObject());},getVal:function(A,B,C,D){var n=A;if(n.tagName!=B.toUpperCase()){n=A.getElementsByTagName(B).item(0);}if(C=='html'){return n.innerHTML;}if(C=='style'){return Roo.get(n).getStyle(D);}return Roo.get(n).attr(C);
+}};
 // Roo/HtmlEditorCore.js
 Roo.HtmlEditorCore=function(A){Roo.HtmlEditorCore.superclass.constructor.call(this,A);this.addEvents({initialize:true,activate:true,beforesync:true,beforepush:true,sync:true,push:true,editorevent:true});this.applyBlacklists();};Roo.extend(Roo.HtmlEditorCore,Roo.Component,{owner:false,resizable:false,height:300,width:500,stylesheets:false,allowComments:false,frameId:false,validationEvent:false,deferHeight:true,initialized:false,activated:false,sourceEditMode:false,onFocus:Roo.emptyFn,iframePad:3,hideMode:'offsets',clearUp:true,black:false,white:false,bodyCls:'',getDocMarkup:function(){var st='';
 if(this.stylesheets===false){Roo.get(document.head).select('style').each(function(B){st+=B.dom.outerHTML||new XMLSerializer().serializeToString(B.dom);});Roo.get(document.head).select('link').each(function(B){st+=B.dom.outerHTML||new XMLSerializer().serializeToString(B.dom);
@@ -961,13 +968,14 @@ this.frameId=Roo.id();var B=this.owner.wrap.createChild({tag:'iframe',cls:'form-
 this.doc.open();this.doc.write(this.getDocMarkup());this.doc.close();var C={run:function(){this.assignDocWin();if(this.doc.body||this.doc.readyState=='complete'){try{this.doc.designMode="on";}catch(e){return;}Roo.TaskMgr.stop(C);this.initEditor.defer(10,this);
 }},interval:10,duration:10000,scope:this};Roo.TaskMgr.start(C);},onResize:function(w,h){Roo.log('resize: '+w+','+h);if(!this.iframe){return;}if(typeof w=='number'){this.iframe.style.width=w+'px';}if(typeof h=='number'){this.iframe.style.height=h+'px';if(this.doc){(this.doc.body||this.doc.documentElement).style.height=(h-(this.iframePad*2))+'px';
 }}},toggleSourceEdit:function(A){this.sourceEditMode=A===true;if(this.sourceEditMode){Roo.get(this.iframe).addClass(['x-hidden','hide','d-none']);}else{Roo.get(this.iframe).removeClass(['x-hidden','hide','d-none']);this.deferFocus();}},cleanHtml:function(A){A=String(A);
-if(A.length>5){if(Roo.isSafari){A=A.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi,'');}}if(A=='&nbsp;'){A='';}return A;},syncValue:function(){if(this.initialized){var bd=(this.doc.body||this.doc.documentElement);var A=bd.innerHTML;if(Roo.isSafari){var bs=bd.getAttribute('style');
-var m=bs?bs.match(/text-align:(.*?);/i):false;if(m&&m[1]){A='<div style="'+m[0]+'">'+A+'</div>';}}A=this.cleanHtml(A);A=A.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g,function(B){var cc=B.charCodeAt();if(B.length==2){var C=B.charCodeAt(0)-0xD800;
-var D=B.charCodeAt(1)-0xDC00;cc=(C*0x400)+D+0x10000;}else if((cc>=0x4E00&&cc<0xA000)||(cc>=0x3400&&cc<0x4E00)||(cc>=0xf900&&cc<0xfb00)){return B;}return "&#"+cc+";";});if(this.owner.fireEvent('beforesync',this,A)!==false){this.el.dom.value=A;this.owner.fireEvent('sync',this,A);
-}}},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;this.owner.fireEvent('push',this,v);
-}}},deferFocus:function(){this.focus.defer(10,this);},focus:function(){if(this.win&&!this.sourceEditMode){this.win.focus();}else{this.el.focus();}},assignDocWin:function(){var A=this.iframe;if(Roo.isIE){this.doc=A.contentWindow.document;this.win=A.contentWindow;
-}else{if(!Roo.get(this.frameId)&&!A.contentDocument){return;}this.doc=(A.contentDocument||Roo.get(this.frameId).dom.document);this.win=(A.contentWindow||Roo.get(this.frameId).dom.contentWindow);}},initEditor:function(){this.assignDocWin();this.doc.designMode="on";
-this.doc.open();this.doc.write(this.getDocMarkup());this.doc.close();var A=(this.doc.body||this.doc.documentElement);A.bgProperties='fixed';Roo.EventManager.on(this.doc,{'mouseup':this.onEditorEvent,'dblclick':this.onEditorEvent,'click':this.onEditorEvent,'keyup':this.onEditorEvent,'paste':this.onPasteEvent,buffer:100,scope:this}
+if(A.length>5){if(Roo.isSafari){A=A.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi,'');}}if(A=='&nbsp;'){A='';}return A;},syncValue:function(){if(this.initialized){var bd=(this.doc.body||this.doc.documentElement);new Roo.htmleditor.FilterAttribute({node:bd,attrib_black:['contenteditable']}
+);var A=bd.innerHTML;if(Roo.isSafari){var bs=bd.getAttribute('style');var m=bs?bs.match(/text-align:(.*?);/i):false;if(m&&m[1]){A='<div style="'+m[0]+'">'+A+'</div>';}}A=this.cleanHtml(A);A=A.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g,function(B){var cc=B.charCodeAt();
+if(B.length==2){var C=B.charCodeAt(0)-0xD800;var D=B.charCodeAt(1)-0xDC00;cc=(C*0x400)+D+0x10000;}else if((cc>=0x4E00&&cc<0xA000)||(cc>=0x3400&&cc<0x4E00)||(cc>=0xf900&&cc<0xfb00)){return B;}return "&#"+cc+";";});if(this.owner.fireEvent('beforesync',this,A)!==false){this.el.dom.value=A;
+this.owner.fireEvent('sync',this,A);}}},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;
+this.owner.fireEvent('push',this,v);}Roo.each(Roo.get(this.doc.body).query('*[data-block]'),function(e){var A=Roo.htmleditor['Block'+Roo.get(e).attr('data-block')];if(typeof(A)=='undefined'){Roo.log("OOps missing block : "+'Block'+Roo.get(e).attr('data-block'));
+return;}new A(e);},this)}},deferFocus:function(){this.focus.defer(10,this);},focus:function(){if(this.win&&!this.sourceEditMode){this.win.focus();}else{this.el.focus();}},assignDocWin:function(){var A=this.iframe;if(Roo.isIE){this.doc=A.contentWindow.document;
+this.win=A.contentWindow;}else{if(!Roo.get(this.frameId)&&!A.contentDocument){return;}this.doc=(A.contentDocument||Roo.get(this.frameId).dom.document);this.win=(A.contentWindow||Roo.get(this.frameId).dom.contentWindow);}},initEditor:function(){this.assignDocWin();
+this.doc.designMode="on";this.doc.open();this.doc.write(this.getDocMarkup());this.doc.close();var A=(this.doc.body||this.doc.documentElement);A.bgProperties='fixed';Roo.EventManager.on(this.doc,{'mouseup':this.onEditorEvent,'dblclick':this.onEditorEvent,'click':this.onEditorEvent,'keyup':this.onEditorEvent,'paste':this.onPasteEvent,buffer:100,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){this.owner.fireEvent('paste',e,v);},onDestroy:function(){if(this.rendered){}},onFirstFocus:function(){this.assignDocWin();this.activated=true;if(Roo.isGecko){this.win.focus();var s=this.win.getSelection();if(!s.focusNode||s.focusNode.nodeType!=3){var r=s.getRangeAt(0);
 r.selectNodeContents((this.doc.body||this.doc.documentElement));r.collapse(true);this.deferFocus();}try{this.execCmd('useCSS',true);this.execCmd('styleWithCSS',false);}catch(e){}}this.owner.fireEvent('activate',this);},adjustFont:function(A){var B=A.cmd=='increasefontsize'?1:-1;
@@ -1063,8 +1071,7 @@ Roo.form.HtmlEditor.ToolbarContext=function(A){Roo.apply(this,A);this.styles=thi
 },'TABLE':{rows:{title:"Rows",width:20},cols:{title:"Cols",width:20},width:{title:"Width",width:40},height:{title:"Height",width:40},border:{title:"Border",width:20}},'TD':{width:{title:"Width",width:40},height:{title:"Height",width:40},align:{title:"Align",opts:[[""],["left"],["center"],["right"],["justify"],["char"]],width:80}
 ,valign:{title:"Valign",opts:[[""],["top"],["middle"],["bottom"],["baseline"]],width:80},colspan:{title:"Colspan",width:20},'font-family':{title:"Font",style:'fontFamily',displayField:'display',optname:'font-family',width:140}},'INPUT':{name:{title:"name",width:120}
 ,value:{title:"Value",width:120},width:{title:"Width",width:40}},'LABEL':{'for':{title:"For",width:120}},'TEXTAREA':{name:{title:"name",width:120},rows:{title:"Rows",width:20},cols:{title:"Cols",width:20}},'SELECT':{name:{title:"name",width:120},selectoptions:{title:"Options",width:200}
-},'BODY':{title:{title:"Title",width:200,disabled:true}},'SPAN':{'font-family':{title:"Font",style:'fontFamily',displayField:'display',optname:'font-family',width:140}},'DIV':{'font-family':{title:"Font",style:'fontFamily',displayField:'display',optname:'font-family',width:140}
-},'P':{'font-family':{title:"Font",style:'fontFamily',displayField:'display',optname:'font-family',width:140}},'*':{}};Roo.form.HtmlEditor.ToolbarContext.stores=false;Roo.form.HtmlEditor.ToolbarContext.options={'font-family':[['Helvetica,Arial,sans-serif','Helvetica'],['Courier New','Courier New'],['Tahoma','Tahoma'],['Times New Roman,serif','Times'],['Verdana','Verdana']]}
+},'BODY':{title:{title:"Title",width:200,disabled:true}},'*':{}};Roo.form.HtmlEditor.ToolbarContext.stores=false;Roo.form.HtmlEditor.ToolbarContext.options={'font-family':[['Helvetica,Arial,sans-serif','Helvetica'],['Courier New','Courier New'],['Tahoma','Tahoma'],['Times New Roman,serif','Times'],['Verdana','Verdana']]}
 ;Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,{tb:false,rendered:false,editor:false,editorcore:false,disable:false,styles:false,options:false,toolbars:false,init:function(A){this.editor=A;this.editorcore=A.editorcore?A.editorcore:A;var B=this.editorcore;
 var C=B.frameId;var D=this;function btn(id,F,G){var H=C+'-'+id;return {id:H,cmd:id,cls:'x-btn-icon x-edit-'+id,enableToggle:F!==false,scope:B,handler:G||B.relayBtnCmd,clickEvent:'mousedown',tooltip:D.buttonTips[id]||undefined,tabIndex:-1};}var E=A.wrap.createChild({tag:'div'}
 ,A.wrap.dom.firstChild.nextSibling,true);var ty=Roo.form.HtmlEditor.ToolbarContext.types;this.toolbars={};for(var i in ty){this.toolbars[i]=this.buildToolbar(ty[i],i);}this.tb=this.toolbars.BODY;this.tb.el.show();this.buildFooter();this.footer.show();A.on('hide',function(){this.footer.hide()}
@@ -1081,12 +1088,12 @@ C.syncValue();}}}));}var F=Roo.form.HtmlEditor.ToolbarContext;var G=F.options;fo
 ),name:'-roo-edit-'+i,attrname:i,stylename:H.style?H.style:false,displayField:H.displayField?H.displayField:'val',valueField:'val',typeAhead:false,mode:typeof(F.stores[i])!='undefined'?'remote':'local',editable:false,triggerAction:'all',emptyText:'Select',selectOnFocus:true,width:H.width?H.width:130,listeners:{'select':function(c,r,i){if(c.stylename){tb.selectedNode.style[c.stylename]=r.get('val');
 return;}if(r===false){tb.selectedNode.removeAttribute(c.attrname);return;}tb.selectedNode.setAttribute(c.attrname,r.get('val'));}}}));continue;tb.addField(new Roo.form.TextField({name:i,width:100,value:''}));continue;}tb.addField(new Roo.form.TextField({name:'-roo-edit-'+i,attrname:i,width:H.width,value:'',listeners:{'change':function(f,nv,ov){tb.selectedNode.setAttribute(f.attrname,nv);
 C.syncValue();}}}));}var J=this;if(nm=='BODY'){tb.addSeparator();tb.addButton({text:'Stylesheets',listeners:{click:function(){J.editor.fireEvent('stylesheetsclick',J.editor);}}});}tb.addFill();tb.addButton({text:'Remove Tag',listeners:{click:function(){var sn=tb.selectedNode;
-var pn=sn.parentNode;var K=sn.childNodes[0];var en=sn.childNodes[sn.childNodes.length-1];while(sn.childNodes.length){var L=sn.childNodes[0];sn.removeChild(L);pn.insertBefore(L,sn);}pn.removeChild(sn);var M=C.createRange();M.setStart(K,0);M.setEnd(en,0);var N=C.getSelection();
-N.removeAllRanges();N.addRange(M);J.updateToolbar(null,null,null);J.footDisp.dom.innerHTML='';}}});tb.el.on('click',function(e){e.preventDefault();});tb.el.setVisibilityMode(Roo.Element.DISPLAY);tb.el.hide();tb.name=nm;return tb;},buildFooter:function(){var A=this.editor.wrap.createChild();
-this.footer=new Roo.Toolbar(A);var B=new Roo.Toolbar.Fill();var _t=this;this.footer.add({text:'&lt;',xtype:'Button',handler:function(){_t.footDisp.scrollTo('left',0,true)}});this.footer.add(B);this.footer.add({text:'&gt;',xtype:'Button',handler:function(){_t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
-}});var A=Roo.get(B.el);A.addClass('x-editor-context');this.footDispWrap=A;this.footDispWrap.overflow='hidden';this.footDisp=A.createChild();this.footDispWrap.on('click',this.onContextClick,this)},onContextClick:function(ev,A){ev.preventDefault();var cn=A.className;
-if(!cn.match(/x-ed-loc-/)){return;}var n=cn.split('-').pop();var B=this.footerEls;var C=B[n];var D=this.editorcore.createRange();D.selectNodeContents(C);var E=this.editorcore.getSelection();E.removeAllRanges();E.addRange(D);this.updateToolbar(null,null,C);
-}});
+var pn=sn.parentNode;var K=sn.childNodes[0]||sn.nextSibling||sn.previousSibling||pn;if(!K){K=sn.nextSibling;}var en=sn.childNodes[sn.childNodes.length-1];while(sn.childNodes.length){var L=sn.childNodes[0];sn.removeChild(L);pn.insertBefore(L,sn);}pn.removeChild(sn);
+var M=C.createRange();M.setStart(K,0);M.setEnd(en,0);var N=C.getSelection();N.removeAllRanges();N.addRange(M);J.updateToolbar(null,null,null);J.footDisp.dom.innerHTML='';}}});tb.el.on('click',function(e){e.preventDefault();});tb.el.setVisibilityMode(Roo.Element.DISPLAY);
+tb.el.hide();tb.name=nm;return tb;},buildFooter:function(){var A=this.editor.wrap.createChild();this.footer=new Roo.Toolbar(A);var B=new Roo.Toolbar.Fill();var _t=this;this.footer.add({text:'&lt;',xtype:'Button',handler:function(){_t.footDisp.scrollTo('left',0,true)}
+});this.footer.add(B);this.footer.add({text:'&gt;',xtype:'Button',handler:function(){_t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);}});var A=Roo.get(B.el);A.addClass('x-editor-context');this.footDispWrap=A;this.footDispWrap.overflow='hidden';
+this.footDisp=A.createChild();this.footDispWrap.on('click',this.onContextClick,this)},onContextClick:function(ev,A){ev.preventDefault();var cn=A.className;if(!cn.match(/x-ed-loc-/)){return;}var n=cn.split('-').pop();var B=this.footerEls;var C=B[n];var D=this.editorcore.createRange();
+D.selectNodeContents(C);var E=this.editorcore.getSelection();E.removeAllRanges();E.addRange(D);this.updateToolbar(null,null,C);}});
 // Roo/form/BasicForm.js
 Roo.form.BasicForm=function(el,A){this.allItems=[];this.childForms=[];Roo.apply(this,A);this.items=new Roo.util.MixedCollection(false,function(o){return o.id||(o.id=Roo.id());});this.addEvents({beforeaction:true,actionfailed:true,actioncomplete:true});if(el){this.initEl(el);
 }Roo.form.BasicForm.superclass.constructor.call(this);Roo.form.BasicForm.popover.apply();};Roo.extend(Roo.form.BasicForm,Roo.util.Observable,{timeout:30,activeAction:null,trackResetOnLoad:false,childForms:false,allItems:false,waitMsgTarget:false,disableMask:false,errorMask:false,maskOffset:100,initEl:function(el){this.el=Roo.get(el);