iCode: 开源的在线 html/css/js 编辑器

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2103 天前的主题，其中的信息可能已经有所发展或是发生改变。

iCode，一款开源的在线 html/css/js 编辑器。

为什么要创建 iCode ？

是的，市面上已经有很多成熟的产品，比如 jsfiddle、codepen 等，为什么要再来一个呢？很简单：练手 😂

一方面，iCode 比较适合练手 css/Vue 等技术，另一方面自己平时也可能会用到 iCode 来测试代码。

iCode 有什么特点？

即使是练手项目，iCode 还是有些自己的特点的：

html/css/js/preview 四分布局，非常类似于我自己平时用的 iTerm2
交互上，也类似于 iTerm2：高亮当前 Panel，可拖拽调整 Panel 大小

快捷键支持（我是效率控）：
- ⌘1/2/3/4 显示隐藏 html/js/css/preview 区域
- ⌘Enter 手动运行代码
基础的编辑器支持，如自动缩进、语法高亮、语法检查等
代码保存在浏览器本地存储中

默认编辑后自动运行代码，如果担心有太多次不必要的执行，可以点页面右下角设置按钮，取消该选项。

iCode 还差什么？

距离一款成熟的在线编辑器，iCode 还差很多，比如：

浏览器适配，手机适配
多项目支持；目前 iCode 仅支持单项目代码
云端保存代码，跨浏览器运行
代码可嵌入网站
上传资源文件
更多界面布局、主题
…

源码

npm run serve，你懂的。

欢迎交流~

icode

编辑器

CSS

代码

12 条回复 • 2019-02-25 15:33:56 +08:00

Bijiabo

2019-02-25 01:00:37 +08:00 via iPad

点个赞，最近也有类似需求

ian511

2019-02-25 01:10:51 +08:00 via iPhone

恭喜又出佳作！资持一下！！

rocyhua

2019-02-25 01:21:47 +08:00

先收录一下 https://www.kunlunqiu.com/82.html

quietjosen

2019-02-25 08:09:22 +08:00 via iPhone

@Bijiabo 现有的在线编辑器，你觉得哪个最好用？

ccccccc

2019-02-25 10:43:39 +08:00

https://chrome.google.com/webstore/detail/yukar/ilbmpnheigbnilnbknenakbkkdmaemlp

支持更多情况，例如 vue jsx

```html
<script src="//unpkg.com/vue"></script>

<div id="root"></div>
```

```js
new Vue({
el: '#root',
data: {
msg: 'Vue JSX',
},
methods: {
hello () {
alert('Vue JSX')
},
},
render(h) {
return (
<p on-click={ this.hello }>
{ this.msg }
</p>
)
},
})
```

quietjosen

2019-02-25 12:11:22 +08:00

@ccccccc 可能你没仔细看，iCode 提供的示例截图不就是 Vue 吗？

ccccccc

2019-02-25 12:37:54 +08:00

@quietjosen 我说的是 vue 的 jsx，你试试我贴的代码

Bijiabo

2019-02-25 13:37:24 +08:00

@quietjosen 目前需求比较简单，主要是希望能在线编辑一点简单 JS 代码和 JSON 配置文件，考虑用 Ace 解决，其他还没有看到更加合适的。

airyland

2019-02-25 14:55:01 +08:00

这里有个开源的 https://codepan.net/

quietjosen

2019-02-25 15:29:36 +08:00

@ccccccc 还真是哎

quietjosen

2019-02-25 15:30:51 +08:00

@Bijiabo iCode 内置的编辑器是 CodeMirror

quietjosen

2019-02-25 15:33:56 +08:00

@airyland 可以可以，只是布局不能改有点遗憾。