Question

有没有办法使用javascript修改contenteditable的元素，以便撤消仍然有效？

Hallo似乎能够做到这一点，在选择一些文本后尝试点击粗体按钮，我抓住它的来源并且不知道他们是如何做到的，唯一提到的是{{1}这是一些gui工具栏。

我看过undo.js，但只是将html保存在一个数组中，这实际上会限制撤消堆栈的大小，所以如果可能的话，我会使用本机解决方案。

Answer 1

此代码将保存数组中的contenteditable的每个更改。您可以通过调用save_history()手动保存当前状态，或将此功能附加到任何事件（例如 - keydown上）。我编码检查状态是否相等，所以如果你将click_history绑定在click事件上 - 如果你在编辑器中没有任何更改就点击10次，它将不会保存10状态。此代码适用于能够运行jQuery的每个浏览器：

＆＃13;

    //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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以通过 document.execCommand() 而非直接操作DOM来确保编辑操作的撤消功能。

查看此小型演示，其中显示粗体命令（可撤消的课程）：http://jsfiddle.net/qL6Lpy0c/

Answer 3

正如其他人所述，最简单的答案是使用document.execCommand保留浏览器的撤消/重做。如果您需要以任何方式（例如，支持多行制表符缩进或其他操纵文本的快捷方式）以编程方式进行不必要的文本编辑，则在设置时应使用document.execCommand（'insertHTML'）或'insertText'新的文本状态。 insertText将在您编辑时创建新的div子级，这可能很麻烦，而'insertHTML'不会（但是，“ insertHTML”可能需要解决一些IE支持问题，在其他地方有详细说明）。

这部分使我陷入一个巨大的循环，这就是为什么我写一个新答案的原因，因为我没有发现它在任何地方提到：

您可能还需要捕获 paste 事件并将其转换为execCommand（'insertHTML'），否则在粘贴之后您可能会进行任何编程选择更改（例如重置光标等））冒着抛出错误的风险，说该节点的长度不足以做出新选择，尽管显然是这样。粘贴后DOM不能以某种方式识别出yourDiv.firstNode的新长度，但是在使用execCommand（'insertHTML'）之后它将更新它。可能还有其他解决方案，但这很简单：

$("#myDiv").on( 'paste', function(e) {
    e.preventDefault();
    var text = e.originalEvent.clipboardData.getData("text/plain");
    document.execCommand("insertHTML", false, text);
});

在dom修改后允许contenteditable撤消

3 个答案: