Comments (5)
Hi @Shannanigans I'm not sure I fully understand the issue you're describing, but yes editor.init('*[data-editable]')
is a perfectly acceptable mechanism for selecting all editable content on the page.
As for unique data names often what I do is create my editable regions like so:
<main data-editable="article-body">
...
</main>
<main data-editable="aside">
...
</main>
And to select them I use the following initialisation params:
editor.init('[data-editable]', 'data-editable');
As for dynamic unique keys - I'm currently working on an extension to the library which has a similar problem in that I don't have a key to hand at the point the region is defined (it's dynamic), my current solution is just to generate one on the fly, e.g region-1
, region-2
, region-x
. This allows the data returned to be mapped specifically to an element in the DOM. What I could look to do is automatically create unique Id's for regions that don't have them in this way? For example data-ct-id="1"
(or against whatever attribute has been specified as the naming property).
As for compound keys at the moment I'd recommend using JavaScript to update the DOM before the editor is initialized to convert your compound keys into unique Ids from, for example for the following HTML:
<div data-editable data-key-a="1" data-key-b="1">
...
</div>
<div data-editable data-key-a="1" data-key-b="2">
...
</div>
You could use something along the lines of:
var domRegions = document.querySelectorAll('[data-editable]');
for (var i = 0; i < domRegions.length; i++) {
var domRegion = domRegions[i];
domRegion.setAttribute(
'data-compound-key',
domRegion.getAttribute('data-key-a') + '-' + domRegion.getAttribute('data-key-b')
)
}
editor.init('[data-editable]', 'data-compound-key');
Alternatively I could simply return a list of HTML strings against editable regions with duplicate keys - but I think we'd need a good use case to promote this behaviour and I'd probably prefer to implement automatic Ids.
I hope that's helpful, appreciate your feedback and interest in CT, I apologise if I haven't fully understood the question but I'm happy to revisit if you can shed some more light on the your specific case.
from contenttools.
Hi @anthonyjb
Thanks for the quick response. I had issues with editable main regions because of divs within divs.
I ended up coming right. I have sections of html in a database that can be treated as templates or as an instance. So the section has a unique id and every editable child element has a unique id within that section. In doing so I can "print" out the same section multiple times and still be able to edit each editable segment.
One thing that I still find frustrating is that the post object contains all editable data instead of just the segments that have been edited. Is this an implementation issue on my side?
By the way I came across this typo here.
http://getcontenttools.com/tutorials/handling-image-uploads
size: reponse.size,
from contenttools.
Hi @Shannanigans, thanks for pointing out the typo I've updated the docs 👍
The output of all regions isn't an implementation issue your end it's a bug my end :( - looking at the code there's no check to see if a region has a lastModified
date. I'll mark this issue as a bug now and get that fixed.
from contenttools.
@Shannanigans OK that should now be resolved please let me know if you have any further problems with the save output :)
from contenttools.
Awesome, very cool of you to get to it so quickly.
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.