示例：设置物理编辑器界面

依赖库导入

import { Postmate } from '@nobook/nobook-saas-sdk';
import { Button } from 'antd';

实时编辑器

function editorUI() { const container = useRef(null); let postMate, communication; useEffect(() => { if (container.current) { // getPhysicsEditorURL 是获取播放器的URL，此方法可根据自己的业务需要自行封装 getPhysicsEditorURL().then((editorURL) => { if (container.current) { postMate = new Postmate({ container: container.current }); return postMate.init(editorURL); } }).then((data) => { if (data) { communication = data; configEditorUI(communication); } }); } }, []) async function configEditorUI(communication) { await communication.get('config', { topToolbarVisible: true, leftToolbarVisible: true, rightToolbarVisible: true, bottomToolbarVisible: true, settingsMenuVisible: true, saveButtonVisible: true, equipmentLineColumn: true, preventDownload: true, }); } return ( <div> <div> <div className="iframe-editor-container" ref={container}></div> </div> </div> ); }

function editorUI() {
  const container = useRef(null);

  let postMate, communication;

  useEffect(() => {
    if (container.current) {
      // getPhysicsEditorURL 是获取播放器的URL，此方法可根据自己的业务需要自行封装
      getPhysicsEditorURL().then((editorURL) => {
        if (container.current) {
          postMate = new Postmate({ container: container.current });
          return postMate.init(editorURL);
        }
      }).then((data) => {
        if (data) {
          communication = data;
          configEditorUI(communication);
        }
      });
    }
  }, [])

  async function configEditorUI(communication) {
    await communication.get('config', {
      topToolbarVisible: true,
      leftToolbarVisible: true,
      rightToolbarVisible: true,
      bottomToolbarVisible: true,
      settingsMenuVisible: true,
      saveButtonVisible: true,
      equipmentLineColumn: true,
      preventDownload: true,
    });
  }

  return (
    <div>
      <div>
        <div className="iframe-editor-container" ref={container}></div>
      </div>
    </div>
  );
}

结果

Loading...