3 * <figure data-block="BlockFigure" contenteditable="false" role="group" style="text-align:left">' +
4 <img data-name="image" src="{SRC}">' +
5 <figcaption data-name="caption" contenteditable="true" style="text-align:left">XXXX</figcaption>
11 new Roo.htmleditor.BlockFigure{
12 image_src : 'http://www.google.com',
15 -- load document, and search for elements of this...
16 Roo.DomQuery.select('*[data-block])
17 // loop each and call ctor ({node : xxx})
19 ** see if parent has Element.findParent(*[data-block]);
25 * @class Roo.htmleditor.BlockFigure
26 * Block that has an image and a figcaption
27 * @cfg {String} image_src the url for the image
28 * @cfg {String} align (left|right) alignment for the block default left
29 * @cfg {String} text_align (left|right) alignment for the text caption default left.
30 * @cfg {String} caption the text to appear below (and in the alt tag)
31 * @cfg {String|number} image_width the width of the image number or %?
32 * @cfg {String|number} image_height the height of the image number or %?
35 * Create a new Filter.
36 * @param {Object} config Configuration options
39 Roo.htmleditor.BlockFigure = function(cfg)
42 this.readElement(cfg.node);
43 this.updateElement(cfg.node);
47 Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
60 // used by context menu
61 friendly_name : 'Image with caption',
63 context : { // ?? static really
74 opts : [[ "left"],[ "right"]],
79 title: "Caption Align",
80 opts : [ [ "left"],[ "right"],[ "center"]],
91 * create a DomHelper friendly object - for use with
92 * Roo.DomHelper.markup / overwrite / etc..
96 var d = document.createElement('div');
97 d.innerHTML = this.caption;
101 src : this.image_src,
102 alt : d.innerText.replace(/\n/g, " ") // removeHTML..
104 if ((''+this.image_width).length > 0) {
105 img.width = this.image_width;
107 if ((''+ this.image_height).length > 0) {
108 img.height = this.image_height;
112 'data-block' : 'Figure',
113 contenteditable : 'false',
114 style : 'display:table; float:' + this.align,
119 contenteditable : true,
120 style : 'text-align:' + this.text_align,
127 readElement : function(node)
129 this.image_src = this.getVal(node, 'img', 'src');
130 this.align = this.getVal(node, 'figure', 'style', 'float');
131 this.caption = this.getVal(node, 'figcaption', 'html');
132 this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
133 this.image_width = this.getVal(node, 'img', 'width');
134 this.image_height = this.getVal(node, 'img', 'height');