liaojunhao / zhihui-editor Goto Github PK

// css导入
import 'zhihui-editor/lib/zhihui-editor.min.css';

import { WorkspaceWrap, ZhihuiEditorContainer, SidePanelWrap } from 'zhihui-editor';
import { createStore } from 'zhihui-editor/lib/model/store';
import { SidePanel } from 'zhihui-editor/lib/side-panel';
import { Workspace } from 'zhihui-editor/lib/canvas/workspace';
import { Toolbar } from 'zhihui-editor/lib/toolbar/toolbar';
import { ZoomButtons } from 'zhihui-editor/lib/toolbar/zoomButtons';

// 设置语言的方法
import { setTranslations } from 'zhihui-editor/lib/config';

// 默认提供两种语言包
import en_US from 'zhihui-editor/lib/locale/enUS';
import zh_CN from 'zhihui-editor/lib/locale/zhCN';

// 控制工程的辅助工具
import { createProject } from 'zhihui-editor/lib/project';

function App() {
  const store = createStore({});
  const project = createProject({ store });

  const init = async () => {
    // 加载字体资源库
    await project.getGlobalFont();
    // 加载模板
    project.firstLoad();
  };

  useEffect(() => {
    init();
  }, []);

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ZhihuiEditorContainer>
        <SidePanelWrap>
          <SidePanel store={store} />
        </SidePanelWrap>
        <WorkspaceWrap>
          <Toolbar store={store} />
          <Workspace store={store} />
          <ZoomButtons store={store} />
        </WorkspaceWrap>
      </ZhihuiEditorContainer>
    </div>
  );
}