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

Question

我正在使用 GrapesJS 模板编辑器开发一个项目，并且我正在尝试使用两个按钮实现撤消/重做功能。当然，我创建的按钮目前没有撤消和重做操作。

请帮助我！

<div class="action">
    <a class="btn" id="undo-btn"><i class="fa fa-undo"></i></a>
    <a class="btn" id="redo-btn"><i class="fa fa-redo"></i></a>
</div>

const editor = grapesjs.init({
  // Indicate where to init the editor. You can also pass an HTMLElement
  container: '#gjs',
  // Get the content for the canvas directly from the element
  // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
  fromElement: true,
  // Size of the editor
  height: '300px',
  width: 'auto',
  // Disable the storage manager for the moment
  storageManager: false,
  // Avoid any default panel
  panels: { defaults: [...] },
  // ...
});

$('#undo-btn').click(function() {
    // undo action here
})
$('#redo-btn').click(function() {
    // redo action here
})

Answer 1

您可以使用以下代码：

$('#undo-btn').click(function() {
    editor.Commands.run('core:undo');
})
$('#redo-btn').click(function() {
    editor.Commands.run('core:redo');
})