Mini-playground NPM

Feature & 功能亮点

可以在线编辑 html | css | js 代码, 并实时预览代码效果
代码可以自动保存到页面的 URL 上, 分享网址即可分享代码

Document & 官方文档

官方文档 & 演示地址

Usage & 使用

通过 CDN 链接使用

<div id="my-playground"></div>

<script src="https://cdn.jsdelivr.net/npm/mini-playground@latest"></script>
<script>
  new MiniPlayground({
    el: '#my-playground',
    defaultValue: `<button onclick="alert('Hellow')">按钮</button>`,
  })
</script>

通过 npm 包下载使用

安装

npm i mini-playground@latest

使用

<div id="my-playground"></div>

import MiniPlayground from 'mini-playground'

new MiniPlayground({
  el: '#my-playground',
  defaultValue: `<button onclick="alert('Hellow')">按钮</button>`,
})

Config & 配置项

参数	说明
`el`: string \| HTMLDivElement	必传项, 因为在线编辑器必须得有一个容器
`defaultValue`?: string	编辑器默认值, 只有在 codeOnUrl = false 或地址栏的 code 参数不存在时才生效
`cssLibs`?: string[]	默认引入的 css 库
`jsLibs`?: string[]	默认引入的 js 库
`css`?: string	默认加载的 css 样式, 引入顺序在 cssLibs 的后面
`js`?: string	默认加载的 js 代码, 引入顺序在 jsLibs 的后面
`autoRun`?: boolean	每次修改后是否自动运行, 默认等于 false
`autoRunInterval`?: number	每次自动运行的时间间隔, 单位为毫秒, 默认等于 300
`codeOnUrl`?: boolean	是否将代码编译到地址栏中: www.abc.com?code=XXX, 默认为 false
`urlField`?: string	代码编译到 url 上所使用的字段, 默认为 'code'
`defaultEditorWidth`?: string	编辑器默认的宽度占比, 默认编辑器和渲染区域各占 50%
`height`?: string	在线编辑器的高度, 默认为 auto
`draggable`?: boolean	是否可以左右拖动布局, 默认为 true
`direction`?: 'row' \| 'row-reverse'	编辑器和渲染区域的排列方向, 分别为: 从左向右 \| 从右向左, 默认为 'row'
`onChange`?: () => void	编辑器的内容发生变化时触发
`onLoad`?: () => void	在线编辑器初始化完成后触发 (因为 css 库和 js 库的加载是异步的)
<!--	`theme`?: 'light'	'dark'	当前主题色, 默认等于 'light'	-->
<!--	`onFocus`?: () => void	编辑器获得焦点后触发	-->

友情链接

🎁 lucky-canvas 一个跨平台、兼容多端的【大转盘 / 九宫格 / 老虎机】抽奖插件

历史版本说明

v0.1.8
- 增加 height 属性, 用来设置在线编辑器的默认高度
- 增加 draggable 属性, 用来控制是否可以左右拖动
- 增加 urlField 属性, 用来控制代码编译到 url 上所使用的字段
- 增加顶部工具栏: 重置 / 刷新 / 输入框 / 复制
v0.1.7
- 增加 css 和 js 属性, 用来设置默认样式或代码
- 增加 onChange 和 onLoad 回调函数
v0.1.6
- 使用 ts playground 同款压缩算法优化 url 长度
v0.1.1
- 增加 iframe 渲染时的 loading 动画
- 修复 jsLibs 返回了错误 Promise 的问题
v0.1.0
- 完成 css / js 资源的全局缓存, 减少网络请求
- 增加配置项: 是否自动保存, 触发保存的时间间隔
- 增加配置项: 编辑区域的默认宽度占比
- 增加配置项: 代码是否保存到 url 地址栏中
v0.0.3
- 增加配置项: cssLibs 和 jsLibs 静态资源的配置