J'ai rencontré un problème avec CKEditor 4 et la méthode sortable de jQuery UI. Si je trie un conteneur contenant une instance de CKEditor, la valeur est supprimée et l'erreur "Uncaught TypeError : Cannot call method 'getSelection' of undefined". Cela rend également l'éditeur non éditable. J'ai pu contourner ce problème dans CKEditor 3 avec l'une des astuces suivantes trouvées ici : CKEditor se bloque lors de la réorganisation de l'interface utilisateur de jQuery
En regardant l'inspecteur DOM de Chrome, il apparaît que le contenu de l'iframe est supprimé.
Vous trouverez ci-dessous un code de test rudimentaire :
<html>
<head>
<title>test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script src="ckeditor.js"></script>
<script type="text/javascript">
$(function(){
var tmpStore = {};
$('#sortable').sortable({
cursor: 'move',
// Hack that use to work on V3 but not on V4:
// https://stackoverflow.com/questions/3379653/ckeditor-freezes-on-jquery-ui-reorder
start:function (event,ui) {
$('textarea').each(function(){
var id = $(this).attr('id');
tmpStore\[id\] = CKEDITOR.instances\[id\].getData();
})
},
stop: function(event, ui) {
$('textarea').each(function(){
var id = $(this).attr('id');
CKEDITOR.instances\[id\].setData(tmpStore\[id\]);
})
}
});
$('textarea').each(function(){
var ckId = $(this).attr('id');
config = {};
CKEDITOR.replace(ckId, config);
})
})
li { padding: 10px; width: 800px; height: 300px; }
</head>
<body>
<ul id="sortable">
<li><textarea id="test1" name="test1">test1</textarea></li>
<li><textarea id="test2" name="test1">test2</textarea></li>
<li><textarea id="test3" name="test1">test3</textarea></li>
</ul>
</body>
</html>
