1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296# 🚀 [JsBox](https://www.github.com/theajack/jsbox) JS在线运行环境
[English](https://github.com/theajack/jsbox#readme) | [立即体验](https://theajack.github.io/jsbox) | [配置体验地址](https://theajack.github.io/jsbox?config=theajack.store)
这是一个在线运行调试js的项目, 也支持多种编程高亮
<details>
<summary>查看更多示例图</summary>
</details>
## 0. 快速插入您的在线演示
### 0.1 配置文件
jsbox支持通过参数配置一个cdn文件作为演示内容，其中文件内容形式如下
```js
window.jsboxConfig = {
libs: {
// 需要引入的第三方库的cdn 文件单个库使用字符串，多个使用数组
},
iifeMap: {}, // 使用 cdn 时全局变量的映射
codes: {
// 您的演示代码
},
// 其他配置
theme: 'dark', // 默认为 dark， 可选值为 dark，light
}
```
你也可以使用字符串形式，其他参数全部使用默认值
```js
window.jsboxConfig = ``; // 此处放您的代码 语言默认为javascript
```
这里有一个简单的[示例文件](https://github.com/theajack/store/blob/main/jsbox.config.js)
libs除了使用cdn地址，也可以使用jsbox内置库, 内置库使用name即可，JsBox 内置库list如下 （版本较旧，推荐自行配置）
```js
['jquery', 'vue', 'react', 'react-dom', 'angularjs', 'vuex', 'redux', 'loadsh', 'virtual-dom', 'node-html-parser', 'jest', 'mocha', 'moment', 'dayjs', 'underscore', 'axios', 'qrcode', 'backbone', 'js-xlsx', 'recast', 'cnchar', 'cnchar-poly', 'cnchar-order', 'cnchar-trad', 'cnchar-draw', 'cnchar-idiom', 'cnchar-xhy', 'cnchar-radical', 'cnchar-all', 'easy-icon', 'element-ui', 'element-ui-style']
```
#### libs 详情
libs 为配置第三方库的CDN地址, 如下表示定义了一个第三方库名为 tc-store，下载地址为 https://cdn.jsdelivr.net/npm/tc-store
```json
"libs": {
"tc-store": "https://cdn.jsdelivr.net/npm/tc-store"
},
```
#### iifeMap 详情
通过 CDN 加载下来的库都为 iife 格式的，需要通过 iifeMap 指定挂载在 windows 上的对象名称，后续代码中的 import 语句都会从这个指定规则中读取
以下配置表示 tc-store 的引入 底层会通过 window.TCStore 来使用
```json
"iifeMap": {
"tc-store": "TCStore"
},
```
```js
import {createStore} from "tc-store";
// 会被转换成
const {createStore} = require("tc-srore"); // require内部最终引用的是window.TCStore
```
#### codes 配置详情
codes 为一个Json类型，可以配置多个demo，当有多个key-value时，jsbox左侧会显示列表，当仅有一个时，列表会被隐藏。
```ts
"codes": {
"Demo1": {
code: string,
dep?: string[], // 当前demo的依赖，值为libs中配置的key
lang?: 'html'|'js', // 默认为js
desc?: string, // 当前demo的描述信息
hideLog?: boolean, // 是否需要隐藏调试工具，默认为false
needUI?: boolean, // 是否需要展示UI，当lang=html时默认为true，否则默认为false
title?: string, // 开启新的章节并作为章节标题
doc?: string, // 当前示例的文档
},
// 其他demo
}
```
#### 配置文件自动生成
手动编写配置文件会有些麻烦，可以使用 jsbox-cmd 工具自动生成，请参考[jsbox-cmd](https://github.com/theajack/jsbox/tree/master/cmd)
### 0.1.1 配合github仓库使用（推荐）
将您的单文件放在您的github仓库中，演示url地址为 https://theajack.github.io/jsbox?github=user.rep.file
- user 参数为您的github账号
- rep 参数为您的项目名称，后面可以带 @xxx 来执行 release、branch或commit，默认使用最新的 release号，如果没有则使用master分支
- file 参数可选，表示配置文件在项目中的相对地址，默认为 jsbox.config.js
以下是一些可能的延迟地址
- https://theajack.github.io/jsbox?config=theajack.pure-v
- https://theajack.github.io/jsbox?config=theajack.pure-v@master
- https://theajack.github.io/jsbox?config=theajack.pure-v.helper/custom.code.js
#### 0.1.2 使用cdn地址
将您的js code 配置文件放在部署在某个服务器上，拿到他的http地址，如 http://xxx.com/config.js
则以下是您可以使用的在线演示地址
https://theajack.github.io/jsbox?config=${decodeURIComponent('http://xxx.com/config.js')}
### 0.2 使用硬编码的单链接
#### 0.2.1. 打开jsbox
进入 jsbox [工作台](https://theajack.github.io/jsbox)
#### 0.2.2. 选择环境，输入演示代码
##### 0.2.2.1. 纯js演示代码实例
输入演示代码
##### 0.2.2.2. 依赖第三方库以及dom交互
选择html语言
输入演示代码
#### 0.2.3. 生成演示链接
至此，一条含有演示代码的链接复制到了剪切板，你可以在其他地方引用。
除此之外你还可以通过菜单栏配置主题色，第三方包，字体大小等设置，这些设置也会在生成链接的时候被保存到连接中
## 1. 操作手册
### 1.1. 功能
1. 运行和编辑js、html、css代码
2. 加载第三方库的cdn文件
3. 导出链接，其他人使用链接可以直接使用您编辑的代码
4. 导出html文件
5. 颜色主题，风格与vscode对齐
6. 自定义log类型，自定义字体大小
### 1.2. 快捷按键与按钮说明：
1. ctrl + : 放大字体
2. ctrl - : 缩小字体
3. ctrl m : 切换主题
4. ctrl d : 清空代码
5. ctrl s : 暂存代码：暂存之后代码会被保存起来，刷新页面或重置代码都会还原到保存的状态
6. ctrl e : 重置代码：回到初始态或暂存状态
7. ctrl q : 复制代码
8. ctrl n : 打开运行环境选择
9. ctrl l : 生成链接：该链接打开可以还原当前正在编辑的代码
10. ctrl e : 清空log
11. ctrl enter : 运行代码
12. ctrl h : 切换是否代码换行
### 1.3. search参数：
1. theme=dark: 开启dark代码编辑模式，默认为normal
2. code=xxx: 设置编辑器代码，需要经过 encodeURIComponent
3. lib=Array<link|name>: 加载第三方库，可以是一个url或者[jsbox预定义的库](https://github.com/theajack/jsbox/blob/master/cdn/resources.js)，需要经过 encodeURIComponent
如果不是url，且不在jsbox预定义库中，jsbox会尝试从unpkg官网获取，但不保证可用
4. config=link: 使用自定义的配置文件url
5. id=string: 使用指定的id加载代码块，需要与config参数一起使用
6. env: 使用[jsbox预定义的运行环境](https://github.com/theajack/jsbox/blob/master/cdn/env.js)
config > env > lib
### 1.4. config参数
详情见 0.3
### 1.5. hash参数
1. #saved 使用暂存代码填充编辑器
2. #hello 进入欢迎页
### 1.6. 预定义方法
在jsbox中，您可以使用以下方法
1. log(arg1,arg2,...): 打印内容
2. copy(string): 复制内容到剪切板
3. $run(): 重新运行代码
4. $dom: [link-dom API](https://github.com/theajack/link-dom#readme)
5. $: document.querySelector 的快捷方式
6. $app: UI的渲染容器 dom 元素
### 1.7 注意事项
1. 使用 config 参数时，可以使用 config=user.repo@xxx，xxx可以表示分支或者release版本号，注意默认是使用最新的release版本好
2. 修改jsbox之后，jsdelivr会有缓存，需要访问 https://purge.jsdelivr.net/gh/{user}/{repo}/jsbox.code.js 刷新一下缓存
## 2. API 接入
### 2.1. 如何使用
JSBox 是一个通用的 在线js运行环境，您可以通过编写配置文件定制属于自己的js运行环境
#### 2.2. npm 安装
```
npm install jsbox-util
```
```js
import JSBox from 'jsbox-util';
```
#### 2.3. cdn引入
```html
<script src="https://cdn.jsdelivr.net/npm/jsbox-util/jsbox.min.js"></script>
```
#### 2.4. 使用
##### 2.4.1 跳转到新页面打开JSBox
```ts
// 公共配置, 非必须
JSBox.config({
theme?: string;
code?: string;
lib?: Array<string>;
id?: string;
env?: string;
lang?: string;
run?: boolean;
mes?: boolean;
remind?: boolean;
config?: string; // 配置文件 cdn 地址
})
JSBox.open(); // 使用公共配置或默认配置打开jsbox
JSBox.open({
... // 使用临时配置打开JSBox
});
```
theme, lib, env, lang 可用值请参考3.3参数说明
##### 2.4.2 内嵌JSBox
功能开发中......
##### 2.4.3 参数说明
1. theme: 开启dark代码编辑模式，默认为light, 可选dark
2. code: 设置编辑器代码，需要经过 encodeURIComponent
3. lib: 加载第三方库，可以是一个url或者[jsbox预定义的库](https://github.com/theajack/jsbox/blob/master/src/npm/index.d.ts#L26)，需要经过 encodeURIComponent
如果不是url，且不在jsbox预定义库中，jsbox会尝试从unpkg官网获取，但不保证可用
4. config: 使用自定义的配置文件url
5. id: 使用指定的id加载代码块，需要与config参数一起使用
6. env: 使用[jsbox预定义的运行环境](https://github.com/theajack/jsbox/blob/master/src/npm/index.d.ts#L58)
7. lang: 设置[开发语言](https://github.com/theajack/jsbox/blob/master/src/npm/index.d.ts#L66)，优先级低于 env 和 config+id 中配置的语言
8. run: 当有code时，会自动运行，如不希望自动运行，请设置 run=false
9. remind: 默认当代码改变时离开或刷新页面 会触发弹窗提示，如不希望提示，请设置 remind=false
10. mes: 加载第三方库时会有加载提示，如不希望提示，请设置 mes=false