国内引入jsrun.net代码分享预览提高可玩性

[HerbertHe]

你在什么场景下需要该功能？

在前端里，分享设计与代码是很酷的玩法，国外有codepen和jsfiddle，国内目前很爽的方案有jsrun.net。通过代码的分享在线渲染会提高可玩性，促进代码水平的提高。

描述最优的解决方案

为了减少学习成本和实现难度，结合jsrun.net给的内嵌选项，有下面的思考解决方案

• 使用代码块声明jsrun

```jsrun
// 采用toml结构实现单一项配置，也可以通过vditor实现全局的配置，单一配置的优先级更高
[config]
theme = "dark" or "light"
src ="分享的demo地址(忽略http协议类型)"
type = "分享的仓库类型"
height = "输出的iframe的高度，默认为300"
\`\`\`

• 举个栗子，demo地址为 http://jsrun.net/G46Kp/edit

[config]
theme = "dark"
src = "jsrun.net/G46Kp"
type = "web"

• 输出结果为

<iframe width="100%" height="300" src="//jsrun.net/G46Kp/embedded/all/dark" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

• 如果主题是light的话

<iframe width="100%" height="300" src="//jsrun.net/G46Kp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

默认允许所有的tabs存在

• 如果类型是JavaScript，demo的地址为 http://js.jsrun.net/c2aKp/edit

[config]
theme = "dark"
src = "js.jsrun.net/c2aKp"
type = "js"

• 输出结果

<iframe width="100%" height="300" src="//js.jsrun.net/c2aKp/embedded/quick/dark" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

默认使用极速运行

描述候选解决方案

与上面同理, codepen等其他的也可以通过配置文件的方式来进行配置，文件格式改为下面那样

[config]
engine = "使用的engine，codepen | jsrun | jsfiddle等"
theme = "可选主题"
src="分享的地址"
height = "可修改的iframe高度"
type = "分享的语言类型"

其他信息

[Vanessa219]

看上去好像是直接嵌入一个 iframe 就可以了？

[HerbertHe]

看上去好像是直接嵌入一个 iframe 就可以了？

确实是的😂，我之前看react native官网也是通过iframe实现的

[HerbertHe]

补充举例codepen

• demo地址为 https://codepen.io/herberthe/pen/VwKJopR

<iframe height="265" style="width: 100%;" scrolling="no" title="VwKJopR" src="https://codepen.io/herberthe/embed/preview/VwKJopR?height=265&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/herberthe/pen/VwKJopR'>VwKJopR</a> by Herbert
  (<a href='https://codepen.io/herberthe'>@herberthe</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

其格式为

<iframe height="<高度>" style="width: 100%;" scrolling="no" title="<demo编号>" src="//codepen.io/<用户名>/embed/preview/<demo编号>?height=<高度>&theme-id=<主题>&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

默认开启了Use click-to-load

如果是codepen的话，可以将配置文件设成下面这样

配置文件语言类型使用保留字vditorCodeShare，而非之前单独举例的jsrun

[config]
engine = "codepen"
theme = "light"
src="codepen.io/herberthe/pen/VwKJopR"
height = "300"

在codepen可以忽略语言类型

• 输出结果为

<iframe height="300" style="width: 100%;" scrolling="no" title="VwKJopR" src="//codepen.io/herberthe/embed/preview/VwKJopR?height=300&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

[Vanessa219]

vditor 已支持 iframe 嵌入，直接输入就可以哦。

[HerbertHe]

vditor 已支持 iframe 嵌入，直接输入就可以哦。

嗷嗷，谢谢

[HerbertHe]

vditor 已支持 iframe 嵌入，直接输入就可以哦。

@Vanessa219 不过好像还是有一个问题，如果用户用iframe插入广告这不是不可控了吗

[Vanessa219]

那可能需要自己建立一个白名单或者黑名单

[HerbertHe]

那可能需要自己建立一个白名单或者黑名单

😭那也行