डोम संशोधन

के बाद पूर्ववत करने के लिए संतुष्ट करने की अनुमति देना क्या जावास्क्रिप्ट का उपयोग करके सामग्री के तत्वों को संशोधित करने का कोई तरीका है ताकि पूर्ववत अभी भी काम कर सके?डोम संशोधन

Hallo यह ठीक करने में सक्षम प्रतीत होता है, कुछ पाठ चुनने के बाद बोल्ड बटन पर क्लिक करने का प्रयास करें, मैंने इसे स्रोत के माध्यम से दबाया है और यह नहीं पता कि वे इसे कैसे करते हैं, केवल halloreundo में कुछ उल्लेख है जो कुछ gui टूलबार है।

मैंने undo.js पर देखा है, लेकिन यह केवल एक सरणी में एचटीएमएल बचाता है, जो वास्तव में पूर्ववत स्टैक के आकार को सीमित करेगा, इसलिए यदि संभव हो तो मैं देशी समाधान के बाद हूं।

स्रोत

2015-01-29 simonzack

आप सीधे डीओएम मैनिप्लेशंस के बजाय document.execCommand() के माध्यम से अपने संपादन कार्यों की पूर्व-क्षमता सुनिश्चित कर सकते हैं।

चेक इस मिनी डेमो कि बोल्ड आदेश (पूर्ववत करने योग्य बिल्कुल) दिखाता है: http://jsfiddle.net/qL6Lpy0c/

स्रोत

2015-01-29 14:52:23 techfoobar

इस कोड को सरणी में contenteditable पर हर बदलाव बचत होगी। आप save_history() पर कॉल करके वर्तमान स्थिति को मैन्युअल रूप से सहेज सकते हैं या इस फ़ंक्शन को किसी भी ईवेंट में संलग्न कर सकते हैं (उदाहरण के लिए - keydown पर)। मैंने राज्यों की समानता की जांच की, इसलिए यदि आप क्लिक ईवेंट पर save_history को बाध्य करेंगे - तो यह 10 राज्यों को सहेज नहीं पाएगा यदि आप संपादक में किसी भी बदलाव के बिना 10 बार क्लिक करेंगे। इस कोड को जो सक्षम चलाने के लिए हर ब्राउज़र में काम करेंगे 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>

स्रोत

2015-03-19 12:13:41

डोम संशोधन

उत्तर

संबंधित मुद्दे