一直觉得 Codepen 的在线代码预览系统很神奇，能够所见即所得地实时展示代码的运行效果。参考 Codepen 并经过一番调研之后，我开发了一个具有基本的在线运行代码能力的 demo 出来。

这周碰到一个让人头疼的需求：要在我的web项目中嵌入另一个第三方web项目。第一时间想到的就是用iframe了，但问题来了，我和第三方web项目是有交互的，这就违反同源策略了，处理跨域问题是最让人头疼的事之一。 需求是这样的，在我的页面点击一些按钮，要实时反馈到iframe子页…

iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览

`vue-code-view`是一个基于 `vue 2.x`、轻量级的代码交互组件，在网页中实时编辑运行代码、预览效果的代码交互组件。

话不多说，下面开始总结我在开发中的常用功能。 获取编辑器中的所有文本，并生成一个字符串返回，会保留所有信息（换行、缩进、注释等等）。 获取编辑器当前的 textmodel，一般不会直接使用，通过 textmodel 可以对文本各种操作。 功能和 “⌘ + F” 一致，通过字符串…

微软官方推出的 VS Code 的代码编辑器模块，可以在浏览器运行。 运行在服务器上的 VS Code，支持大部分插件，可以在浏览器里面使用。 Web 应用的在线 IDE。 基于浏览器的 IDE。

最近看了不少关于 h5 页面制作工具。端午闲来无事，决定尝试下一个页面搭建工具。效果如下： gif 录制效果不佳，可以访问以下链接进行体验。 前端开发组件库，完善组件类型，编辑器读取组件完成页面搭建，将页面数据发送至服务端保存。 访问页面，从服务端拉取页面数据，前端渲染页面即可…

iCode，一款开源的在线 html/css/js 编辑器。 一方面，iCode 比较适合练手 css/Vue 等技术，另一方面自己平时也可能会用到 iCode 来测试代码。 默认编辑后自动运行代码，如果担心有太多次不必要的执行，可以点页面右下角设置按钮，取消该选项。 npm …

yukar 是一个前端代码编辑预览工具，是一个 chrome 插件。你可以从 chrome web store 上安装 yukar