simple-codepen-mika

mika-simple-editor

editor show demo of codepen based on monaco

what is monaco?:   [link](https://github.com/microsoft/monaco-editor)
what is codepen? : [link](https://codepen.io/?cursor=ZD0xJm89MCZwPTEmdj04MjI0Nw==)

done

• 利用 shadow dom 渲染 codepen 在线编译结果,主要为了实现 css 及 js 的沙箱隔离。

• 通过 proxy 代理 window，实现编辑 js 执行上下文可访问到 window，同时实现访问全局变量名默认指向 window 作用域。

• 编辑器内所声明的全局变量，包括函数，默认指向 window。且在重新编译及编辑器销毁生命周期中，清空相关定时器及监听对象等默认 window 事件。

• 支持编辑器内 cdn 包引用

• 通过浏览器 indexedDB 缓存在线编辑器内容

todo

• sass，less 等语法支持

• codepen 更多内容展示

  monaco依赖内容较多，若不希望打包该内容,推荐以 umd 方式引入

$ yarn
$ yarn dev
$ yarn build && yarn server

preview:

codepen:

mika-viewer: