Mcodeblitz NPM

MCodeblitz SDK

这是一个 Cloud IDE 提供的 codeblitz 框架 sdk，通过接入 SDK 可以在 react 或 vue 框架中接入纯前端编辑器组件

功能

纯前端编辑器，支持协同插件

要求

React
- react 16.14.0
- react-dom 16.14.0
Vue 2
- vue 2.6.0 以上
- react 16.14.0
- react-dom 16.14.0
- vuereact-combined "^1.2.11"
Vue 3
- Veaury

使用

React

import { SlotLocation, MCodeblitzApp } from "mcodeblitz";

const layout = {
  [SlotLocation.top]: {
    modules: ["@opensumi/ide-menu-bar"],
  },
  [SlotLocation.action]: {
    modules: ["@opensumi/ide-toolbar-action"],
  },
  [SlotLocation.left]: {
    modules: [
      "@opensumi/ide-explorer",
      "@opensumi/ide-search",
      "@opensumi/ide-scm",
      "@opensumi/ide-extension-manager",
      "@opensumi/ide-debug",
    ],
  },
  [SlotLocation.right]: {
    modules: [],
  },
  [SlotLocation.main]: {
    modules: ["@opensumi/ide-editor"],
  },
  [SlotLocation.bottom]: {
    modules: [
      "@opensumi/ide-terminal-next",
      "@opensumi/ide-output",
      "debug-console",
      "@opensumi/ide-markers",
    ],
  },
  [SlotLocation.statusBar]: {
    modules: ["@opensumi/ide-status-bar"],
  },
};

ReactDOM.render(
    <MCodeblitzApp
      roomId={roomId.toString()}
      userName={userName.toString()}
      fileName={'Solution'}
      extensions={['collaboration']}
      appConfig={{
        workspaceDir: roomId.toString() + '/hello-world',
        layoutConfig: layout,
      }}
      runtimeConfig={{}}
    />,
document.getElementById("root")
);

Vue 2

<template>
  <div id="app">
    <MCodeblitzApp
      :roomId="123"
      userName="xxxx"
      fileName='Solution'
      :extensions="extensions"
      :appConfig="appConfig"
      :runtimeConfig="runtimeConfig" />
  </div>
</template>
<script lang="ts">
import { SlotLocation, MCodeblitzApp } from 'mcodeblitz'

@Component({
  components: {
    MCodeblitzApp: applyReactInVue(MCodeblitzApp)
  }
})
export default class App extends Vue {
  appConfig = { workspaceDir: '1234' }
  runtimeConfig = {}
  extensions = ['collaboration']
  layout = {
    [SlotLocation.top]: {
      modules: ['@opensumi/ide-menu-bar'],
    },
    [SlotLocation.action]: {
      modules: ['@opensumi/ide-toolbar-action'],
    },
    [SlotLocation.left]: {
      modules: [
        '@opensumi/ide-explorer',
        '@opensumi/ide-search',
        '@opensumi/ide-scm',
        '@opensumi/ide-extension-manager',
        '@opensumi/ide-debug',
      ],
    },
    [SlotLocation.right]: {
      modules: [],
    },
    [SlotLocation.main]: {
      modules: ['@opensumi/ide-editor'],
    },
    [SlotLocation.bottom]: {
      modules: [
        '@opensumi/ide-terminal-next',
        '@opensumi/ide-output',
        'debug-console',
        '@opensumi/ide-markers',
      ],
    },
    [SlotLocation.statusBar]: {
      modules: ['@opensumi/ide-status-bar'],
    },
  }
}
</script>