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'); } }