All geek questions in one place

Providing authorized content for cancellation after modifying dom

Is there a way to change the content elements using javascript to cancel the job?

Hallo seems to be able to do this well, try clicking in bold after selecting the text, I copied its source and don’t know how they do it, the only mention in halloreundo is some kind of gui toolbar.

I looked through undo.js , but that just saves the html in an array that would really limit the size of the undo stack, so I get my own solution whenever possible.

+5
source share
2 answers

You can guarantee that your editing operations are canceled by executing them using document.execCommand() instead of directly manipulating the DOM.

Check out this mini-demo that displays the bold command (without canceling): http://jsfiddle.net/qL6Lpy0c/

+2
source

This code will save all changes to contenteditable in an array. You can manually save the current state by calling save_history() or attach this function to any event (in the example, keydown ). I encoded a check for equality of states, so if you associate save_history with a click event, it will not save state 10 if you click 10 times without changes in the editor. This code will work in every browser that can run 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>
+3
source

Source: https://habr.com/ru/post/1212204/

More articles:


All Articles