Skip to content

Latest commit

 

History

History
53 lines (38 loc) · 1.67 KB

File metadata and controls

53 lines (38 loc) · 1.67 KB

编辑器扩展案例

此编辑器扩展案例扩展了一个简单的图形积木编辑器,没有添加任何额外功能,只有基本编辑和保存。

开始你的编辑器开发时,只需要复制该案例,然后进行修改,再按下面步骤就可以在 BlockCode Playgrounds 首页添加新的编辑器入口了。

你的编辑器代码可以放在你自己的仓库,如果想要上线到官方网站,还需要向官方申请,提交你的仓库地址就可以了。(申请入口暂未开放)

开始步骤

  1. 克隆 playgrounds-app 项目到 playgrounds-app 文件夹,并完成一次完整编译。
$ git clone https://github.com/BlockCodeLab/playgrounds-app.git
$ cd playgrounds-app
$ bun install
$ bun run build
  1. 进入 playgrounds-app 项目文件夹,在 /packages/gui/editors/ 路径下新建文件夹 example,并对新文件夹进行 git 仓库初始化。
$ cd playgrounds-app/packages/gui/editors/
$ mkdir example
$ cd example
$ git init
$ git remote add origin <GIT-URL>
$ git branch -M main
  1. 将编辑器案例文件夹下的所有文件复制到 example 文件夹,然后执行编译脚本,得到 dist 文件夹。
$ cd playgrounds-app/packages/gui/editors/example
$ bun install
$ bun run build
  1. 编译 playgrounds-app 项目的 gui 模块(只需要编译一次,为了加入新编辑器的信息)。
$ cd playgrounds-app
$ bun run build:gui
  1. 运行服务器,用浏览器打开 localhost:3000
$ cd playgrounds-app
$ bun run dev

之后对编辑器的开发只需要执行步骤 3(有必须时还需执行步骤 5)就可以在浏览器中查看了。