Comments (12)
@martyLauders that should be no problem, I can provide you with an example. But first, which version of Angular are you running on your project?
from contenttools.
That would be amazing. I'm running 1.4.
from contenttools.
Hi @martyLauders, I have created a demo which can check here: https://github.com/Cotidia/contenttools-angularjs
Basically, you can create a directive that will bind the DOM element to the editor. Then, the data will retrieve in the scope as $scope.regions
.
angular.module('editorApp', [])
.directive('ngEditor', function(){
function link(scope, element, attrs){
// Initialise the editor
editor = new ContentTools.EditorApp.get()
editor.init('[ng-editor]', 'ng-editor')
// Bind a function on editor save
editor.bind('save', function(regions, autoSave){
scope.$apply(function(){
scope.regions = regions;
});
// "regions" contains all the html for each editable regions
// Now, "regions" can be saved and used as needed.
})
}
return {
link: link
}
})
In the HTML, you can simply use the directive as follows:
<div ng-editor="my-content">
<p>Some content...</p>
</div>
<div ng-editor="my-content-another">
<p>Another content....</p>
</div>
I hope that helps.
from contenttools.
Awesome work @guillaumepiot 👍
from contenttools.
Ok, guillaumepiot, that is already incredible :)
Now, what I want to achieve is that, when I add in an attribute, that is linked to a directive, that it renders the directive. For example:
And my directive would be:
directive('testDirective', function() {
return {
template: '<div>TEST</div>',
restrict: 'A',
replace: true,
link: function(scope) {
console.log('The directive loaded');
}
};
})
Do you think this is possible? I can't seem to get it to work.
I'd put up a quick demo, but am on the road, sorry!
from contenttools.
@martyLauders Where would the directive be inserted? Would it be within an editable region or would the directive actaully be an editable region (e.g contain editable content, <p>
, <img>
, etc.)
Could you provide a bit more detail on what you're trying to achieve?
from contenttools.
The region would be within an editable region. What I am trying to achieve is that I could add just a
But now I have the feeling that angularjs doesn't notice the change in attributes.
Does it make sense what I am asking / trying to do?
from contenttools.
Hi @martyLauders sorry my knowledge of Angular is really limiting me here. The problem here I think is that if Angular updates the contents of an editable region while it's being edited then the editor and Angular will become out of sync (e.g the editor wont know about the new element added by Angular).
If you can provide an example of the HTML before and after that you're trying to achieve I might be able to provide a solution that's not specific to angular?
from contenttools.
👍 Thread helped a lot for clarifying some issues
from contenttools.
saved event listener is getting called multiple times when I save one field , any solution for this ?
from contenttools.
@iit2011081 this sounds like the issue is caused by the editor being initialized multiple times without being destroyed?
from contenttools.
@anthonyjb this is the whole code which I have written . Please see where I am going wrong.
app.directive('ngEditor', function(){
function link(scope, element, attrs){
// Initialise the editor
scope.editor = new ContentTools.EditorApp.get();
scope.editor.init('[ng-editor]', 'ng-editor');
// Bind a function on editor save
if (scope.editor._bindings['saved'] && scope.editor._bindings['saved'].length > 0) {
}
scope.editor.addEventListener('saved', function (ev) {
scope.$apply(function(){
scope.regions = ev.regions;
console.log(scope.regions);
console.log(ev.detail().regions);
});
});
}
return {
link: link
}
})
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.