TinyMCE breaks when removing elements in ng-repeat
nieldlr opened this issue · 11 comments
I'm trying to create a widget-like content editor. I use the TinyMCE directive as my text editor.
It works by adding widgets to a object/model and then repeating that. Adding the widgets works perfectly fine, but once I remove widgets from the model, TinyMCE breaks. I can't access the textarea anymore.
Here is a JSFiddle that explains my scenario.
- Add more than one widget. Then remove the first one, or any widget that's not the last one.
- Any widgets after the one that was removed breaks. Can't access textarea.
Is this a problem with Angular-UI or with how I set up my code?
Edit: When I remove the TinyMCE directive, to a normal textarea, it works. So it must be some way how TinyMCE is bound. I'm looking into a way on how to fix this. I'm newbie at Angular, so any help on how to fix will be helpful.
I'm having the same issue, but with mine the widgets are also wrapped inside a ui-sortable, so the textarea breaks if I remove a widget or drag the widget to a different position in the sortable.
Here is the fiddle .
Yes, I spent a whole day trying to fix the Angular-UI code to find a work around. I learned a lot about AngularJS though (like I said I'm a newbie at it), but I couldn't fix it.
There might be some ways to fix this:
Bind the element or scope to a destroy event or change how the rendering occurs. I think what happens is that the rendering doesn't reset after a change happens to the model. I added an additional scope.$apply() the an elm.bind($destroy) event to see what happens. It actually renders the widgets properly, but the broken ones still remain, so it duplicates the rendering.
I'm still not sure how to fix this and my fiddling around might be very far off on how to fix it. I'll see if I can spend time again today to try and fix it.
Can confirm this problem too, have TinyMCE inside a sortable and it breaks.
Seems TinyMCE has lots of issues.
Here is another issue I made for TinyMCE, seems to break when binding: #359
Saw your post on G+. Been running around dealing with the reorg before addressing bugs.
This directive (and quite a few others) were written without hooking into the $scope.$on('$destroy') event. If you want to help us (me) out, open up the directive, and put into the linking function a binding for that event ^ that calls all the necessary methods tinymce() needs to unload itself. I tried doing this really quick myself but doing elm.tinymce() returns undefined for some odd reason and I don't have a lot of time to check the tinymce API at this exact moment.
Maybe this can help you help us?
Here's a fix (not sure it's the RIGHT way to do it) for the tine-mce directive in angular-ui.js:
Add this to setup:
elm.bind('$destroy', function() {
ed.setContent('');
ed.save()
console.log("destroying:", ed.isDirty(), ed.startContent = ed.getContent({format : 'raw'}));
});
oops. that was very unclean. here's better.
elm.bind('$destroy', function() {
ed.setContent('');
ed.save();
ed.startContent = ed.getContent({format : 'raw'});
});
@musictray thanks, that fix kind of works in some cases but still not ng-repeat + ui-sortable. TinyMCE goes blank in this case, any ideas?
@philjones88 I'm having the same problem. Try this on yours:
http://stackoverflow.com/questions/3919928/tinymce-instances-in-jquery-sortable
@musictray
This works better I think
elm.bind('$destroy', function() {
//This requires an id on the dom
tinyMCE.execCommand('mceRemoveControl', false, elm[0].id);
//angular-ui uses jquery version though so it could be this one instead:
//elm.tinymce().remove();
});AngularUI is currently undergoing a restructure. This project will no longer hold the codebase, can you please relocate this to https://github.com/angular-ui/ui-tinymce (after confirming it's still necessary with the latest code)?