Ho utilizzato Vojta's angularJS directive ma a volte ckeditor non è riuscito a visualizzare i dati da un servizio. Questo non è quasi mai successo durante un aggiornamento, ma spesso si è verificato durante la navigazione verso la pagina. Sono stato in grado di verificare che la funzione $ render chiamasse sempre ck.setData con i dati corretti, ma a volte non veniva visualizzata.La direttiva angularjs ckeditor a volte non riesce a caricare i dati da un servizio
11
A
risposta
11
Sembra che il metodo $ render sia stato talvolta chiamato prima che ckeditor fosse pronto. Sono stato in grado di risolvere questo problema aggiungendo un ascoltatore all'evento instanceReady per assicurarmi che fosse chiamato almeno una volta dopo che il ckeditor era pronto.
ck.on('instanceReady', function() {
ck.setData(ngModel.$viewValue);
});
Nell'interesse della completezza, ecco la direttiva completa che ho utilizzato.
//Directive to work with the ckeditor
//See http://stackoverflow.com/questions/11997246/bind-ckeditor-value-to-model-text-in-angularjs-and-rails
app.directive('ckEditor', function() {
return {
require: '?ngModel',
link: function(scope, elm, attr, ngModel) {
var ck = CKEDITOR.replace(elm[0],
{
toolbar_Full:
[
{ name: 'document', items : [] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript' ] },
{ name: 'paragraph', items : [
'NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
{ name: 'links', items : [] },
{ name: 'insert', items : [ 'SpecialChar' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [] },
{ name: 'tools', items : [ 'Maximize' ] }
]
,
height: '290px',
width: '99%'
}
);
if (!ngModel) return;
//loaded didn't seem to work, but instanceReady did
//I added this because sometimes $render would call setData before the ckeditor was ready
ck.on('instanceReady', function() {
ck.setData(ngModel.$viewValue);
});
ck.on('pasteState', function() {
scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function(value) {
ck.setData(ngModel.$viewValue);
};
}
};
});
3
function updateModel() {
scope.$apply(function() {
if (ck.getData().length) {
ngModel.$setViewValue(ck.getData());
}
});
}
vedere codice completo:
return {
require: '?ngModel',
scope: true,
link: function (scope, element, attr, ngModel) {
if (!ngModel) return;
var ck = CKEDITOR.replace(element[0]);
ck.on('instanceReady', function() {
ck.setData(ngModel.$viewValue);
});
function updateModel() {
scope.$apply(function() {
if (ck.getData().length) {
ngModel.$setViewValue(ck.getData());
}
});
}
ck.on('pasteState', updateModel);
ck.on('change', updateModel);
ck.on('key', updateModel);
ck.on('dataReady', updateModel);
ngModel.$render = function() {
ck.setData(ngModel.$modelValue);
};
}
}
0
Ho anche incontrare questo problema E quando ho trovato una nuova direttiva. Funziona bene per me !!!
Si prega di provare questo:
return {
require: '?ngModel',
scope: true,
link: function (scope, element, attr, ngModel) {
if (!ngModel) return;
var ck = CKEDITOR.replace(element[0]);
ck.on('instanceReady', function() {
ck.setData(ngModel.$viewValue);
});
function updateModel() {
scope.$apply(function() {
if (ck.getData().length) {
ngModel.$setViewValue(ck.getData());
}
});
}
ck.on('pasteState', updateModel);
ck.on('change', updateModel);
ck.on('key', updateModel);
ck.on('dataReady', updateModel);
ngModel.$render = function() {
ck.setData(ngModel.$modelValue);
};
}
};
Problemi correlati
- 1. dompdf non riesce a caricare
- 2. Perché a volte X509Certificate2 non riesce a creare da un blob?
- 3. CreateInstanceAndUnwrap non riesce a caricare l'assembly
- 4. .Net FtpWebRequest non riesce a volte
- 5. Query AD cercapersone a volte non riesce
- 6. Universal Image loader non riesce a caricare le immagini a volte
- 7. AngularJS passano requestVerificationToken a un servizio
- 8. Come aggiungere dati a CKEditor utilizzando jQuery
- 9. WinSxS non riesce a caricare DLL VC++
- 10. Angular.js passare i dati da un servizio asincrono a portata
- 11. SMLoginItemSetEnabled a volte non riesce a lanciare l'helper UI sandboxed
- 12. PhantomJS non riesce a caricare Google Maps
- 13. Pug `# {}` non riesce a caricare la variabile all'interno di `onclick`
- 14. FakeItEasy a volte non riesce a creare un falso quando i test vengono eseguiti in parallelo
- 15. AngularJS non riescono a caricare il modulo
- 16. servizio WCF non riesce a inviare la posta attraverso MailDefinition
- 17. Perché l'heirachy di classe actionscript3.0 non riesce (a volte)?
- 18. AngularJS - Direttiva CRUD/schemi di servizio/controller
- 19. invio di dati da angularjs a django
- 20. passando da oggetto a direttiva angularjs dal controller
- 21. Android: l'aggiunta di dati a Intent non riesce a caricare Attività
- 22. AngularJS carico di direttiva prima che i dati
- 23. lucido app - ggplot non riesce a trovare i dati
- 24. AngularJS: Due dati modo vincolante se non riesce elemento ha ngModel e una direttiva personalizzato
- 25. recenti Chrome (46.0.2490.7) non riesce a caricare i font su HTTPS CORS da S3 secchio
- 26. La direttiva AngularJS non viene chiamata
- 27. AngularJS Carica dati dal servizio
- 28. Posso controllare dove CKEditor trova i plugin da caricare?
- 29. Direttiva AngularJs che guarda dati asincroni
- 30. Rileva i dati non salvati utilizzando angularjs
Questa soluzione ha continuato a funzionare per il tuo sito? Ho provato a farlo funzionare in un paio di modi (incluso il tuo) e comunque il contenuto non verrà caricato a intermittenza. – keepitreal