get width and height of element

I use fakeelements for form fields, but I'm not happy with it. Insteed of using fakeelements I want to cover form fields with transparent images. My plugin changes the fields like this:

result from dataFilter.addRules:

<div class="coverdiv" data-cke-realelement="%3Cinput%20data-cke-saved-name%3D%22field%22%20type%3D%22text%22%20%2F%3E">
	<img src="plugins/formcover/images/cover.png" class="coverimg" />
	<input type="text" name="field" data-cke-saved-name="field" data-cke-processor="off" />
</div>

editor view mode shows:

<div class="coverdiv">
	<img src="plugins/formcover/images/cover.png" class="coverimg" />
	<input type="text" name="field" />
</div>

editor source mode shows:

<input type="text" name="field" />

Now what I need is offsetWidth and offsetHeight of the input field. At the moment I set IDs to my elements and use setTimeout getId(image).width = getId(input).offsetWidth.

Is there an easier way or a special cke way?

Fri, 10/17/2014 - 16:04

datalink

Joined: 18/10/2007

Posts: 149

Found the solution. My

Found the solution. My coverdiv has display: inline-block, so I can do:

afterInit : function( editor )
{
	setTimeout(function() {
		var covers = editor.document.getElementsByTag( 'div' );
		for(var i = 0; i < covers.count(); i++) {
			var item = covers.getItem( i );
			if( item.hasClass( 'coverdiv' ) ) {
				var width = item.getSize( 'width' );
				var height = item.getSize( 'height' );
				item.getFirst().setStyles({
					'margin-bottom': '-' + height + 'px',
					'height': height + 'px',
					'width': width + 'px'
				});
			}
		}
	}, 1);
}