Comments (6)
I should add that if the correct answer is - "only provide support for one editor on the view, and allow a way to obtain the id
of the Content that is being edited", could you suggest how this could be accomplished?
from contenttools.
So just to be clear here calling ContentTools.EditorApp.get()
multiple times will always return the same instance of an app. This is function basically enables singleton behaviour. If you call init
against the editor multiple times though, without calling destory
in between the UI will be implemented multiple times - which is not what you want.
As you suspected the correct answer is to only init
the editor once. My recommendation therefore would be to mark your editable components up with <... id="1" data-editable>
as I think you are and initialize the editor like so:
editor.init('[data-editable]', 'id');
As for getting the Id of the region currently being edited you can do the following:
// To get the current region ad hoc
var focusedElm = ContentEdit.Root.get().focused();
if (focusedElm) {
var region = focusedElm.closest(function (node){
return node.constructor.name == 'Region'
});
console.log(region.domElement().getAttribute('id'));
}
// To get the current region whenever a new element is focused
ContentEdit.Root.get().bind('focus', function (focusedElm) {
var region = focusedElm.closest(function (node){
return node.constructor.name == 'Region'
});
console.log(region.domElement().getAttribute('id'));
});
from contenttools.
Sorry I was a bit trigger happy on the submitting the response there, I've updated it so it's complete now. Let me know if that helps or if I've misunderstood.
from contenttools.
Thanks Anthony.. it does help, but it it also means a parent needs to be aware that it has a content section and then initialize the editor accordingly... which is a bit of an anti-pattern in our app as we are trying keep each component modular and encapsulated.
Do you see issues in calling init
more than once (other than the placement of the ct-widgets)? The query passed to init
is specific for the content in question (e.g. init('#some-id [data-editable], 'some-id')
... perhaps there is a way to specific the parent selector for the ct-widget (current appended to body is my guess) if this is the only real issue (which maybe could be configurable? is this body append the only place)?
from contenttools.
I actually think I can handle things by calling init via my own buttons within my component.
startEdit() {
if (this.state.editor) {
this.state.editor.init('[data-editable]', 'id');
this.state.editor.bind('save', this.submit);
this.state.editor.start();
}
}
stopEdit() {
if (this.state.editor) {
this.state.editor.stop();
this.state.editor.save();
}
}
in my save handler, i also have
this.state.editor.unbind('save', this.submit);
this.state.editor.destroy();
This seems pretty clean.. I just need to figure out how to not load the ignition buttons (or at worst, set them to display : none
).
Seem like an acceptable approach?
from contenttools.
So you yes if you destroy
then init
the editor when you switch between components that should work fine and I think that's a clean way to decouple the components.
I don't see a problem with using CSS to hide the ignition, I use CSS to hide interface buttons I don't want to show to users sometimes like I might hide the code button from a non-technical user.
One option would be to unmount the ignition from the editor after initializing, eg:
editor.init(...);
editor._ignition.unmount();
This would remove ignition from the DOM but shouldn't affect the editors behaviour in any way.
To make this cleaner still you might consider modifying the editor for your application to not include the ignition switch at all, it would be pretty easy to remove (I think it's referenced about 9), if your unsure I can send you a CoffeeScript or JS version with no switch.
P.S sorry for the late reply time zones huh :)
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.