}
};
- //<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
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!
},
/**
+ * 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 = ' ';
-// }
if(this.owner.fireEvent('beforepush', this, v) !== false){
var d = (this.doc.body || this.doc.documentElement);
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)
+
+
}
},
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);
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==' '){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==' '){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;
projects / roojs1 / commitdiff