Zulassen, dass contenteditable nach der dom-Änderung rückgängig gemacht werden kann

Gibt es eine Möglichkeit, die Elemente eines contenteditable mit Javascript zu modifizieren, so dass das Rückgängigmachen noch funktioniert?Zulassen, dass contenteditable nach der dom-Änderung rückgängig gemacht werden kann

Hallo Hallo scheint in der Lage zu sein, dies zu tun, klicken Sie auf die Schaltfläche fett nach der Auswahl eines Textes, ich grepped durch die Quelle und habe keine Ahnung, wie sie es tun, ist die einzige Erwähnung in halloreundo, die einige Gui-Symbolleiste ist.

Ich habe mir angesehen, aber das speichert einfach die HTML in einem Array, was wirklich die Größe des Undo-Stacks begrenzen würde, also bin ich nach einer nativen Lösung, wenn möglich.

Quelle

2015-01-29 simonzack

Sie können die Unwiderruflichkeit Ihrer Bearbeitungsvorgänge sicherstellen, indem Sie sie über anstelle von direkten DOM-Manipulationen ausführen.

prüft diese Mini-Demo, die den fett Befehl (undoable ofcourse) zeigt: http://jsfiddle.net/qL6Lpy0c/

Quelle

2015-01-29 14:52:23 techfoobar

Dieser Code jede Änderung auf contenteditable in Array sparen. Sie können den aktuellen Status manuell speichern, indem Sie save_history() aufrufen oder diese Funktion an ein Ereignis anhängen (in Beispiel - auf keydown). Ich habe die Überprüfung der Gleichheit von Zuständen codiert. Wenn Sie also save_history bei einem Klickereignis binden, wird der Status 10 nicht gespeichert, wenn Sie 10 Mal ohne Änderungen im Editor klicken. Dieser Code wird in jedem Browser funktionieren, die Lage laufen jQuery:

//array to store canvas objects history 
 
    canvas_history=[]; 
 
    s_history=true; 
 
    cur_history_index=0; 
 
    DEBUG=true; 
 

 
//store every modification of canvas in history array 
 
function save_history(force){ 
 
    //if we already used undo button and made modification - delete all forward history 
 
    if(cur_history_index<canvas_history.length-1){ 
 
     canvas_history=canvas_history.slice(0,cur_history_index+1); 
 
     cur_history_index++; 
 
     jQuery('#text_redo').addClass("disabled"); 
 
    } 
 
    var cur_canvas=JSON.stringify(jQuery(editor).html()); 
 
    //if current state identical to previous don't save identical states 
 
    if(cur_canvas!=canvas_history[cur_history_index] || force==1){ 
 
     canvas_history.push(cur_canvas); 
 
     cur_history_index=canvas_history.length-1; 
 
    } 
 
    
 
    DEBUG && console.log('saved '+canvas_history.length+" "+cur_history_index); 
 
    
 
    jQuery('#text_undo').removeClass("disabled");   
 
} 
 

 

 
function history_undo(){ 
 
    if(cur_history_index>0) 
 
    { 
 
     s_history=false; 
 
     canv_data=JSON.parse(canvas_history[cur_history_index-1]); 
 
     jQuery(editor).html(canv_data); 
 
     cur_history_index--; 
 
     DEBUG && console.log('undo '+canvas_history.length+" "+cur_history_index);   
 
     jQuery('#text_redo').removeClass("disabled");  
 
    } 
 
    else{ 
 
     jQuery('#text_undo').addClass("disabled");   
 
    } 
 
} 
 

 
function history_redo(){ 
 
    if(canvas_history[cur_history_index+1]) 
 
    { 
 
     s_history=false; 
 
     canv_data=JSON.parse(canvas_history[cur_history_index+1]);  
 
     jQuery(editor).html(canv_data); 
 
     cur_history_index++; 
 
     DEBUG && console.log('redo '+canvas_history.length+" "+cur_history_index); 
 
     jQuery('#text_undo').removeClass("disabled"); 
 
    } 
 
    else{ 
 
     jQuery('#text_redo').addClass("disabled");   
 
    } 
 
} 
 
jQuery('body').keydown(function(e){ 
 
    save_history(); 
 
}); 
 
jQuery('#text_undo').click(function(e){ 
 
    history_undo(); 
 
}); 
 
jQuery('#text_redo').click(function(e){ 
 
    history_redo(); 
 
});

#text_undo.disabled,#text_redo.disabled{ 
 
    color: #ccc; 
 
    }

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<button id="text_undo" class="disabled">Undo</button><button id="text_redo" class="disabled">Redo</button> 
 
<div id="editor" contenteditable="true">Some editable HTML <b>here</b></div> 
 
</body> 
 
    </html>

Quelle

2015-03-19 12:13:41

Zulassen, dass contenteditable nach der dom-Änderung rückgängig gemacht werden kann

Antwort

Verwandte Themen