如何为GrapesJS模板编辑器创建自定义撤销/重做按钮？

要给你的按钮绑定GrapesJS的撤销、重做操作，直接调用编辑器实例提供的undo()和redo()方法即可，以下是补全后的代码：

补全后的JavaScript事件绑定 #

$('#undo-btn').click(function() {
    // 调用编辑器的撤销方法
    editor.undo();
})
$('#redo-btn').click(function() {
    // 调用编辑器的重做方法
    editor.redo();
})

进阶优化：按钮状态控制（可选） #

如果想让按钮在没有可撤销/重做操作时处于禁用状态，可以监听GrapesJS的change:undo和change:redo事件，动态更新按钮状态：

// 监听撤销栈变化
editor.on('change:undo', () => {
    $('#undo-btn').toggleClass('disabled', !editor.canUndo());
});

// 监听重做栈变化
editor.on('change:redo', () => {
    $('#redo-btn').toggleClass('disabled', !editor.canRedo());
});

// 初始化按钮状态
$('#undo-btn').toggleClass('disabled', !editor.canUndo());
$('#redo-btn').toggleClass('disabled', !editor.canRedo());

你可以根据自己的样式需求定义.disabled类的样式，比如设置透明度、禁止点击等。

内容的提问来源于stack exchange，提问作者Atlas