Yard


live-code-editor

本文使用开源的monaco-editor(https://github.com/Microsoft/monaco-editor)编辑工具来实现一个在线的code工具。在线预览http://code.yardwill.com/, 因为懒得上cdn,所以目前访问速度可能有点慢。

image.png

1. monaco-editor

左边一块就是我们的editor,在这里我们可以实时编辑code。并且具有代码提示。 image.png

2. console结果

右边一块是我们的console结果。我们可以来测试一下。输入代码之后点击运行。 image.png

当然也会对错误进行处理。

image.png

可以通过清除日志来删除所有的console内容。

3. 原理

原理也很简单,获取editor里的text,然后通过eval在浏览器端执行代码,最后覆盖浏览器内的console方法,来达到console内容的获取。

4. 源码

https://github.com/YardWill/live-code