GrapesJS 项目：如何实现编辑器默认加载预览模式

概述

在使用 GrapesJS 编辑器时，开发者有时需要让编辑器在初始化后自动进入预览模式，而不是默认的编辑模式。本文将详细介绍如何实现这一功能，并特别说明在 React 环境中使用自定义 UI 时的注意事项。

基本实现方法

对于标准的 GrapesJS 实现，让编辑器默认进入预览模式非常简单。可以通过监听编辑器的 onReady 事件，然后执行预览命令来实现：

editor.onReady(() => {
   editor.runCommand('core:preview')
});

这段代码会在编辑器初始化完成后立即触发预览命令，使编辑器进入预览状态。

React 环境中的特殊处理

当使用 @grapesjs/react 包并结合自定义 UI 实现时，情况会有所不同。因为自定义 UI 意味着开发者需要自行管理预览状态和相关的 UI 组件。

在这种情况下，开发者需要：

1. 在 React 组件中维护一个状态来跟踪当前是否是预览模式
2. 在编辑器初始化时设置初始状态
3. 实现自定义的预览切换逻辑

实现建议

对于 React 实现，可以考虑以下模式：

import { useEffect, useState } from 'react';
import grapesjs from 'grapesjs';

function EditorComponent() {
  const [isPreview, setIsPreview] = useState(false);
  
  useEffect(() => {
    const editor = grapesjs.init({
      // 编辑器配置
    });
    
    // 初始化后进入预览模式
    editor.onReady(() => {
      setIsPreview(true);
      editor.runCommand('core:preview');
    });
    
    return () => {
      editor.destroy();
    };
  }, []);
  
  // 自定义预览切换按钮
  const togglePreview = () => {
    setIsPreview(!isPreview);
    editor.runCommand(isPreview ? 'core:preview' : 'core:edit');
  };
  
  return (
    <div>
      {/* 自定义UI */}
      <button onClick={togglePreview}>
        {isPreview ? '退出预览' : '进入预览'}
      </button>
    </div>
  );
}

注意事项

1. 状态同步非常重要，确保 UI 状态与编辑器实际状态一致
2. 在自定义 UI 中，可能需要处理更多与预览相关的逻辑，如禁用某些编辑功能
3. 考虑添加加载状态，避免在编辑器完全初始化前执行预览命令

通过以上方法，开发者可以灵活地在 GrapesJS 编辑器中实现默认预览功能，无论是标准实现还是 React 自定义 UI 实现。