ckeditor widgets or fake elements

It looks like the 4.3 version of CKEditor will support "Widgets". I'm wondering if this will do what I need...? Basically, I'm trying to insert/edit an element like this:

<widget(OR DIV) data-media="234" style='float:left;background-color:url(/images/widget.png) 0 0 no-repeat, gainsboro'>Media Name</widget(OR DIV)>

Right now, I'm just trying to put in "div" instead of widget.... Not sure if I can do this just using Fake Elements, since I couldn't figure out how they work from the documentation... If it looks like i should be using fake elements, please let me know how to do fake elements when you're editing existing objects (code below)

onOk: function () {
	var dialog = this;

	var fancy = this.element;
	fancy.setAttribute('data-class', 'fancyWidget');
	fancy.setAttribute('style', 'float:left;padding:5px 5px 5px 20px; color:green; background:url(/ckeditor/plugins/fancy/icons/fancy.png) 2px 1px no-repeat, gainsboro;');
	fancy.setAttribute('data-width', dialog.getValueOf('tab-basic', 'width'));
	fancy.setAttribute('data-height', dialog.getValueOf('tab-basic', 'height'));
	fancy.setAttribute('data-media', dialog.getValueOf('tab-basic', 'media'));
	fancy.setText("name of media");

	if (this.insertMode)
		editor.insertElement(fancy);
}
,
onShow: function () {
	var selection = editor.getSelection();
	var element = selection.getStartElement();
	var dialog = this;

	if (element && $(element.$).data("class") == "fancyWidget") {
		this.insertMode = false;
		this.element = element;
		dialog.setValueOf('tab-basic', 'width', element.getAttribute("data-width"));
		dialog.setValueOf('tab-basic', 'height', element.getAttribute("data-height"));
		dialog.setValueOf('tab-basic', 'media', element.getAttribute("data-media"));
	} else {
		this.insertMode = true;
		this.element = editor.document.createElement('div');
	}
}