Skip to content

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

New issue
New issue
Closed
Closed
国内引入jsrun.net代码分享预览提高可玩性#906
@HerbertHe

Description

@HerbertHe
HerbertHe
opened on Jan 25, 2021 · edited by HerbertHe
Contributor

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

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

描述最优的解决方案

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

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

[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存在

[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 = "分享的语言类型"

其他信息

Activity

Vanessa219

Vanessa219 commented on Jan 25, 2021

@Vanessa219
Vanessa219
on Jan 25, 2021
Owner

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

HerbertHe

HerbertHe commented on Jan 26, 2021

@HerbertHe
HerbertHe
on Jan 26, 2021
ContributorAuthor

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

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

HerbertHe

HerbertHe commented on Jan 26, 2021

@HerbertHe
HerbertHe
on Jan 26, 2021 · edited by HerbertHe
ContributorAuthor

补充举例codepen

<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

Vanessa219 commented on Jan 27, 2021

@Vanessa219
Vanessa219
on Jan 27, 2021
Owner

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

Vanessa219
closed this as completedon Jan 27, 2021
HerbertHe

HerbertHe commented on Jan 27, 2021

@HerbertHe
HerbertHe
on Jan 27, 2021
ContributorAuthor

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

嗷嗷，谢谢

HerbertHe

HerbertHe commented on Jan 27, 2021

@HerbertHe
HerbertHe
on Jan 27, 2021
ContributorAuthor

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

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

Vanessa219

Vanessa219 commented on Jan 28, 2021

@Vanessa219
Vanessa219
on Jan 28, 2021
Owner

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

HerbertHe

HerbertHe commented on Jan 28, 2021

@HerbertHe
HerbertHe
on Jan 28, 2021
ContributorAuthor

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

😭那也行

HerbertHe
mentioned this on Feb 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Vanessa219@HerbertHe

        Issue actions
          国内引入jsrun.net代码分享预览提高可玩性 · Issue #906 · Vanessa219/vditor