Comments (16)
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.
from contenttools.
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. 😥
from contenttools.
Any concrete plans on supporting DIVs and non-block elements? It would be absolutely killer
from contenttools.
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.
from contenttools.
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. 👍
from contenttools.
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.
from contenttools.
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.
from contenttools.
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.
from contenttools.
I havent started yet. But if you want to some drag'n'drop email designer use this.
from contenttools.
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 ?
from contenttools.
I'm now closing this issue as support for this behaviour will be provided through ContentFlow: https://github.com/GetmeUK/ContentFow
from contenttools.
@anthonyjb will that be integrated in Contenttools? (not really awake yet)
from contenttools.
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.
from contenttools.
@anthonyjb aah cool, I will need to take a look at it again.
Thanks for the feature 👍
from contenttools.
@anthonyjb would contentflow help edit pages from arbitrary sources, for which no defined dom structure exists?
from contenttools.
@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.
from contenttools.
Related Issues (20)
- Save issue - saves fine, but won't allow a second "save" HOT 5
- Making CT compatible with CSP style-src set to 'self'
- Can't edit files that were included or read by php HOT 17
- Edit multiple paragraphs at once. HOT 2
- Is there a way to change the default tag output for normal html tags HOT 2
- Missing translation in /src/scripts/ui/dialogs/table.coffee
- Problem update image classes HOT 5
- Build files to use dynamic import in pure javascript HOT 1
- How to use assign ? HOT 2
- Hot to keep style attributes on save.
- Support for Sass >= 1.33 HOT 11
- npm install failed HOT 2
- Feature: Support drag & drop of images
- The image uploader HOT 2
- Inspector bar doesn't show embedded HTML elements when wrapped with paragraph HOT 1
- Line breaks not saving
- Add class to a link
- Lazy loading of images
- Source code edit? Insert <script> tag HOT 3
- The part in italics is not the right one HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from contenttools.