Ce poste un récapitulatif de mon problème.
Alors problème numéro 1:* *Afficher le tout dès le chargement de la page**
Alors pour cela, c'ets utiliser ajax dès le chargement de la page :
/*
LOAD
*/
$(RTE_DIV).attr('contenteditable', false);
$(RTE_DIV).css({
'background':'#E9E9E9'
});
$(RTE_DIV).append('<p style="text-align:center;font-size:1.5em;color:black;font-weight: bold;">Chargement en cour...</p>');
$.ajax({
type: 'POST',
url: 'save.php',
dataType: 'json',
data: {
action: 'load',
id: 1
},
success: function(data) {
$(RTE_DIV).attr('contenteditable', true);
var rspns = eval(data);
$.each(rspns, function() {
//console.log(this.content);
$(RTE_DIV).css('background','');
$(RTE_DIV).empty();
$(RTE_DIV).append(this.content);
});
}
});
Merci à @TROJAN pour le morceau de code.
Alors ceci vas faire au chargement de récuprer le tout d'un coup.
Alors problème numéro 2:* *Afficher en real-time**
Ceci n'est pas résolus.
Mon but est de afficher en temps réel comme sur http://codeshare.io/ (merci à @tidus pour m'avoir fait connaitre se site)
Et donc, j'ai pensé a faire une sauvegarde du focus et de le restaurer toute les une secondes, mais malheuresement, je n'y arrive pas :'(
Concernant la sauvegarde du focus, j'ai fait un poste sur Open ClassRooms (SZD) : http://openclassrooms.com/forum/sujet/save-restore-position-focus-contenteditable
donc le code actuel :
setInterval(function () {
reload();
}, 1000);
function reload(){
$.ajax({
type: 'POST',
url: 'save.php',
dataType: 'json',
data: {
action: 'load',
id: 1
},
success: function(data) {
saveRangePosition();
var rspns = eval(data);
$.each(rspns, function() {
$(RTE_DIV).empty();
$(RTE_DIV).append(this.content);
});
}
});
}
function saveRangePosition()
{
var range=window.getSelection().getRangeAt(0);
var sC=range.startContainer,eC=range.endContainer;
A=[];while(sC!==$('#contentarea')){A.push(getNodeIndex(sC));sC=sC.parentNode}
B=[];while(eC!==$('#contentarea')){B.push(getNodeIndex(eC));eC=eC.parentNode}
window.rp={"sC":A,"sO":range.startOffset,"eC":B,"eO":range.endOffset};
}
/*function restoreRangePosition()
{
bE.focus();
var sel=window.getSelection(),range=sel.getRangeAt(0);
var x,C,sC=bE,eC=bE;
C=rp.sC;x=C.length;while(x--)sC=sC.childNodes[C[x]];
C=rp.eC;x=C.length;while(x--)eC=eC.childNodes[C[x]];
range.setStart(sC,rp.sO);
range.setEnd(eC,rp.eO);
sel.removeAllRanges();
sel.addRange(range)
}*/
function getNodeIndex(n){var i=0;while(n=n.previousSibling)i++;return i}