在线编辑器

本文使用开源的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