嵌入Coderlane

2020-04-28 (6 个月前)

亲爱的开发者你好,Coderlane自从去年三月上线以来。我们收到了一些反馈和意见,我们一直在努力的改进和跟新产品功能,现在有个好消息Coderlane支持内嵌使用了。

通过iframe将Coderlane嵌入到你的网站中,你将拥有一个支持多种主流语言编译与执行的在线编程环境、支持配套的测试框架、漂亮的单元测试输出。

embed 界面预览

下面一起来看看怎么将coderlane引入到你的网站吧。

首介绍一下完整的引入url

https://coderlane.net/embed?language=默认语言&initCode=每种语言的初始化代码&initTest=每种语言的初始化测试

接下来通过javascript动态创建一个iframe,然后使用初始化代码和初始化测试参数

var url = 'https://coderlane.net/embed?';
var initCode = {
  javascript: '',
  java: '',
  cpp: '',
  c: '',
  ruby: '',
  go: '',
  python2: '',
  python3: '',
  rust: ''
}
var initTest = {
  javascript: '',
  java: '',
  cpp: '',
  c: '',
  ruby: '',
  go: '',
  python2: '',
  python3: '',
  rust: ''
}
// 默认选中语言
url += 'language=ruby';
// 初始化代码
url += '&initCode=' + encodeURIComponent(JSON.stringify(initCode));
// 初始化测试
url += '&initTest=' + encodeURIComponent(JSON.stringify(initTest));

var iframe = document.createElement('iframe');
iframe.src = url;
iframe.style = "width: 100%; height: 100%";
// 创建iframe元素到页面中
document.body.appendChild(iframe);

关于initCodeinitTest部分,可以参考支持语言部分获得

iframe实际调用演示

感谢阅读,如果有任何问题欢迎通过底部的微信二维码与我取得联系。