Mutable templates for the widgets plugin

To avoid complications I would just hide (display:none) the heading when hasHeading is set to false. It should be done in widget#data. Then, to correcly output data you would have to write a downcast method (reverse to upcast) so the hidden heading is completely removed. And similarly, in upcast method, if there's no heading, it should be created and hidden (that will be actually done by widget#data fired after initialization) and hasHeading should be set to false.

It is also possible to initialize and destroy nested editables during runtime. See initEditable and destroyEditable methods. But the general rule still is that you have to work on DOM, not with HTML strings. Most likely we will add an option to change widget structure using templates only, but it's not yet possible.

I think it'd be great if widget templates were modifiable dynamically that we can change in dialog's onOk() or like..

I just wasted a day trying out all possible ways to modify the widget template (and surprisingly this post didn't come in search untill i signed up and searched again).

Need this functionality badly, so had to switch to a normal plugin, manipulating DOM now. sort of achieved the desired requirement, but loosing the feature of treating it as 'one unit'...

Thanks for looking into it.

After spending some time figuring this out for a custom plugin/widget I built, here's how I would do it for retrohunter's example:

Removing the element is pretty straightforward. In the 'data' attribute function of the widget, check that hasHeading is false and that the widget currently has a heading. Then, just find and remove that element:

var heading = this.element.find('.an-editable-heading');
heading.getItem(0).remove();

Adding is similar, but you need to make sure to initizialize the editable after adding. In the 'data' attribute of the widget, after checking that 'hasHeading' is true and there's not already a heading in the widget, you can add one like this:

var newHeader = CKEDITOR.dom.element.createFromHtml( '<h2 class="an-editable-heading">{headingContent}</h2>' );

this.append(newHeader,true);
this.initEditable( 'heading', {
    selector: '.an-editable-heading'
} );

Hopefully that's useful to other people building mutable widgets.

Thanks for sharing. This is the right method. Maybe I would also destroy the old editable before initialising new using widget.destroyEditable. But it's not critically important.

Hey all t
ried to create some widget plugin and found this thread if where looking for something similar. So I did create widget plugin by using some cool examples and a bit of my time.
Still I got one last problem. I can not remove contenteditable="true" .This will stick even after I save my post (Also building Drupal module). My work is public at https://github.com/kaido24/ckeditor_bootstrap_grid. Hope you can help me out so I can finish it or develop it a bit further. 

I just wasted a day trying out all possible ways to modify the widget template (and surprisingly this post didn't come in search untill i signed up and searched again). Need this functionality badly, so had to switch to a normal plugin, manipulating DOM now. sort of achieved the desired requirement, but loosing the feature of treating it as 'one unit'...??

_________________________

GUL