Support for dynamic creation and management of editable regions

[tvaliasek]

Is it possible to allow editing of div children elements of editable parent? I could definitelly use that for user-friendly responsive layouts creation.

I have this idea:
Tool similar to insert table, which inserts div.row. If div.row is focused, another tool insert div.col will be activated, so user can insert div.col as direct child of focused div.row. This div.col could be examined in inspector bar, so predefined styles could be applied on it (.col-lg-6 etc.). But this will need support for class selectors on style targets for ContentTools.Style class. It could be used like: new ContentTools.Style('1/2 Column on Large screen', 'col-lg-6', ['div.col']),

[anthonyjb]

This is an interesting challenge (I think that would that's yjr correct word). It's something I have considered but I'm really not sure of the best approach. My thoughts have been to either;

• do as you've suggested and make the layout tool use ContentEdit nodes,
• or look to create a level above the editable content which allows you to insert layouts (snippets of HTML) and add support for dynamically detecting any regions added.

Both approaches have some advantages/pitfalls.

With the first approach it's absolutely possible to do as you've suggested and clone what has been done for tables but using a different element type (such as a div div) to layout content. The lowest parent element in this case would have to ideally support more than a single element (as it does in the table division), because you'd want to be able to treat them as effectively their own sub-regions. This has some complications in implementation but would fit in pretty natively with the existing editable structure and editor tools.

With the second approach I think you'd need to consider adding a separate mode in which the layout of the page can be modified (sections added, removed, re-ordered). We would need to add support for dynamic detection of regions but everything should else should work as it does now. This approach allows predefined layout templates to be created along the lines you stated (2 column layout, 3 columns, 1:3 split, etc).

I would be interested to hear some thoughts on what people would like to see in regard to this.

[petrleocompel]

This would be great feature.

I'm integrating bootstrap grid on my own.
So every div.column should be in div.row and div.row should be in div.container (div.container-fluid).

I'm making it extendable so you can use any framework (Foundation, Bootstrap, Skeleton) 😊 😌

But it's a lot of work. 😥

[jesperstarkar]

Any concrete plans on supporting DIVs and non-block elements? It would be absolutely killer

[anthonyjb]

Hi @petrleocompel and @jesperstarkar,

Yes I plan to add support for managing content layout/structure in the future through a separate library for more information on what's being planned please checkout my response to this similar question - #50

@petrleocompel you might also find @bfintal's work with CT interesting, he's already implemented support for layout controls in a WordPress plugin he's working on (https://www.youtube.com/watch?v=kFCWD3m9hyY), he's on the Gitter channel so you maybe able to ask him for a few pointers.

[bfintal]

I have created a ContentEdit.Div element, it only handles the scenarios that I can see in my own use-case that's why I haven't created a PR for it.

I've made divs super strict for my use wherein it extends ContentEdit.ElementCollection so it can only contain other elements. Once you extend it then the rest is quite easy. 👍

[developit]

Would it be possible to use Custom Elements (from the Web Components spec) to achieve this? That would let HTML remain the markup layer, but allow injecting arbitrary content and behavior between the outer and inner portions of a flow/region (using shadow DOM + <content>). Thoughts? My use-case for this would be to edit HTML5 with custom elements, using ContentTools' properties editor to configure attributes on the Custom Elements that are used when rendering the content after it is pulled from a CMS.

[anthonyjb]

Hi @developit - sorry for the slightly delayed reply - so I'll start by stating that I'm not well versed in the use of web components or the shadow DOM but I'm aware of them and hopefully have enough of a grasp to respond to your question.

So I think potentially a custom element to provide layout could well be used and that this would be a potentially a very nice solution. In fact I'm sure I've seen an in-page editing tool that takes this approach entirely for all editable content (but I can't find it any more perhaps someone else will be able to post a link to it if they know).

The issue at the moment at least would be support and the need to use a polyfill - http://caniuse.com/#search=components. Since I wouldn't want to add a separate polyfill library as a requirement I think we'd have to look to provide options for both approaches.

[carnevlu]

Hi @petrleocompel are you still working on the integration of bootstrap/foundation layout?
I'll probably try to integrate foundation-email but I'm not sure how, so if there is some guideline, like your idea, it'll be easier.

@bfintal it'll be possible for your to share your extension of the ContentEdit.ElementCollection? It'll be a valid solution for the foundation-email integration in a first time.

[petrleocompel]

I havent started yet. But if you want to some drag'n'drop email designer use this.

[wotta]

Isn't there a way to add a extra button that gives an option to create a new element,
And after the element has been added to reload content.tools and get all editable elements from the dom ?

[anthonyjb]

I'm now closing this issue as support for this behaviour will be provided through ContentFlow: https://github.com/GetmeUK/ContentFow

[wotta]

@anthonyjb will that be integrated in Contenttools? (not really awake yet)

[anthonyjb]

Hi @concept-core - so yep, ContentFlow is an extension to ContentTools, you can run them along side each other, ContentTools can still be run independently however ContentFlow requires ContentTools.

[wotta]

@anthonyjb aah cool, I will need to take a look at it again.
Thanks for the feature 👍

[tommedema]

@anthonyjb would contentflow help edit pages from arbitrary sources, for which no defined dom structure exists?

[anthonyjb]

@tommedema so content flow certainly helps you to manage far more complex layouts but it doesn't solve the issue of arbitrary source because if ContentTools doesn't have code in place to handle a particular element type it can only convert it to a static element.

I'm hoping to put together a 5 minute video this weekend showing ContentFlow in action on a production site (I'm just finishing up at the moment on a project using ContentFlow), I think it showcases very well what's possible with ContentFlow (over just ContentTools) with regard to flexible page layouts and so it well be of interest to you - I'll post a link here once it's uploaded.