4 * @class Roo.htmleditor.BlockFigure
5 * Block that has an image and a figcaption
6 * @cfg {String} image_src the url for the image
7 * @cfg {String} align (left|right) alignment for the block default left
8 * @cfg {String} text_align (left|right) alignment for the text caption default left.
9 * @cfg {String} caption the text to appear below (and in the alt tag)
10 * @cfg {String|number} image_width the width of the image number or %?
11 * @cfg {String|number} image_height the height of the image number or %?
14 * Create a new Filter.
15 * @param {Object} config Configuration options
18 Roo.htmleditor.BlockFigure = function(cfg)
21 this.readElement(cfg.node);
22 this.updateElement(cfg.node);
26 Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
39 // used by context menu
40 friendly_name : 'Image with caption',
41 deleteTitle : "Delete Image and Caption",
44 contextMenu : function(toolbar)
47 var block = function() {
48 return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
52 var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
54 var syncValue = toolbar.editorcore.syncValue;
62 xns : rooui.Toolbar //Boostrap?
70 triggerAction : 'all',
76 select : function (combo, r, index)
78 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
80 b.width = r.get('val');
83 toolbar.editorcore.onEditorEvent();
88 xtype : 'SimpleStore',
101 xns : rooui.Toolbar //Boostrap?
106 displayField : 'val',
109 triggerAction : 'all',
115 select : function (combo, r, index)
117 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
119 b.align = r.get('val');
122 toolbar.editorcore.onEditorEvent();
127 xtype : 'SimpleStore',
139 text : "Image Source: ",
140 xns : rooui.Toolbar //Boostrap?
148 change : function (combo, r, index)
151 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
153 b.align = r.get('val');
156 toolbar.editorcore.onEditorEvent();
166 * create a DomHelper friendly object - for use with
167 * Roo.DomHelper.markup / overwrite / etc..
169 toObject : function()
171 var d = document.createElement('div');
172 d.innerHTML = this.caption;
176 'data-block' : 'Figure',
177 contenteditable : 'false',
187 src : this.image_src,
188 alt : d.innerText.replace(/\n/g, " "), // removeHTML..
195 contenteditable : true,
197 'text-align': this.text_align
206 readElement : function(node)
208 this.image_src = this.getVal(node, 'img', 'src');
209 this.align = this.getVal(node, 'figure', 'style', 'float');
210 this.caption = this.getVal(node, 'figcaption', 'html');
211 this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
212 this.width = this.getVal(node, 'figure', 'style', 'width');
213 this.margin = this.getVal(node, 'figure', 'style', 'margin');